Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
0f8d25edb3 |
70
view/molistar/modules/h5Chat/css/index.css
Normal file
70
view/molistar/modules/h5Chat/css/index.css
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
width: 10rem;
|
||||||
|
height: 21.65333rem;
|
||||||
|
background: url(../images/bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg .chat {
|
||||||
|
width: 7.41333rem;
|
||||||
|
height: 4.88rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 0.68rem;
|
||||||
|
top: 12.66667rem;
|
||||||
|
background: rgba(247, 245, 245, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: 0;
|
||||||
|
width: 10rem;
|
||||||
|
height: 1.62667rem;
|
||||||
|
border-radius: 0.61333rem 0.61333rem 0 0;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom .text {
|
||||||
|
width: 2.4rem;
|
||||||
|
height: 0.74667rem;
|
||||||
|
line-height: 0.74667rem;
|
||||||
|
border-radius: 0.74667rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 0.26667rem;
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.26667rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
position: absolute;
|
||||||
|
left: 1.06667rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom .text::placeholder {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom img {
|
||||||
|
width: 0.77333rem;
|
||||||
|
height: 0.77333rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 3.82667rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom #finishCall {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
75
view/molistar/modules/h5Chat/css/index.scss
Normal file
75
view/molistar/modules/h5Chat/css/index.scss
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
@function px2rem($px) {
|
||||||
|
@return $px / 75+rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
width: px2rem(750);
|
||||||
|
height: px2rem(1624);
|
||||||
|
background: url(../images/bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto 0;
|
||||||
|
|
||||||
|
.chat {
|
||||||
|
width: px2rem(556);
|
||||||
|
height: px2rem(366);
|
||||||
|
position: absolute;
|
||||||
|
left: px2rem(51);
|
||||||
|
top: px2rem(950);
|
||||||
|
background: rgba(247, 245, 245, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: 0;
|
||||||
|
width: px2rem(750);
|
||||||
|
height: px2rem(122);
|
||||||
|
border-radius: px2rem(46) px2rem(46) 0 0;
|
||||||
|
background: rgba(255, 255, 255, .2);
|
||||||
|
|
||||||
|
.text {
|
||||||
|
width: px2rem(180);
|
||||||
|
height: px2rem(56);
|
||||||
|
line-height: px2rem(56);
|
||||||
|
border-radius: px2rem(56);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 px2rem(20);
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(0, 0, 0, .1);
|
||||||
|
color: #fff;
|
||||||
|
font-size: px2rem(20);
|
||||||
|
font-weight: 500;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
position: absolute;
|
||||||
|
left: px2rem(80);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: px2rem(58);
|
||||||
|
height: px2rem(58);
|
||||||
|
// background: rgba(0, 0, 0, .1);
|
||||||
|
position: absolute;
|
||||||
|
left: px2rem(287);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#finishCall {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
view/molistar/modules/h5Chat/images/bg.png
Normal file
BIN
view/molistar/modules/h5Chat/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
view/molistar/modules/h5Chat/images/finishCall.png
Normal file
BIN
view/molistar/modules/h5Chat/images/finishCall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
view/molistar/modules/h5Chat/images/startCall.png
Normal file
BIN
view/molistar/modules/h5Chat/images/startCall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
35
view/molistar/modules/h5Chat/index.html
Normal file
35
view/molistar/modules/h5Chat/index.html
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>多人聊天</title>
|
||||||
|
<script src="./js/NIM_Web_NERTC_v5.6.30.js"></script>
|
||||||
|
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||||
|
<link rel="stylesheet" href="./css/index.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="bg">
|
||||||
|
<!-- 文字聊天容器 -->
|
||||||
|
<div class="chat">聊天内容</div>
|
||||||
|
</div>
|
||||||
|
<!-- 底部 -->
|
||||||
|
<div class="bottom">
|
||||||
|
<input type="text" class="text" placeholder="说点什么...">
|
||||||
|
<img src="./images/startCall.png" alt="" id="startCall">
|
||||||
|
<img src="./images/finishCall.png" alt="" id="finishCall">
|
||||||
|
</div>
|
||||||
|
<!-- <button type="button" id="startCall">开始通话</button>
|
||||||
|
<button type="button" id="finishCall">结束通话</button> -->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
<script src="../../common/js/flexible.js"></script>
|
||||||
|
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||||
|
<script src="../../common/js/common2.js"></script>
|
||||||
|
<script src="../../common/js/layer.js"></script>
|
||||||
|
<script src="../../common/js/vconsole.min.js"></script>
|
||||||
|
<script src="../../common/js/route-constant.js"></script>
|
||||||
|
<script src="./js/index.js"></script>
|
||||||
17
view/molistar/modules/h5Chat/js/NIM_Web_NERTC_v5.6.30.js
Normal file
17
view/molistar/modules/h5Chat/js/NIM_Web_NERTC_v5.6.30.js
Normal file
File diff suppressed because one or more lines are too long
90
view/molistar/modules/h5Chat/js/index.js
Normal file
90
view/molistar/modules/h5Chat/js/index.js
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
let rtc = {};
|
||||||
|
let client, localStream;
|
||||||
|
let uid = getQueryString().uid;
|
||||||
|
let channelName = '消失的房间111';
|
||||||
|
const main = async () => {
|
||||||
|
client = NERTC.createClient({
|
||||||
|
appkey: '2f9b0121d8e1338564b3fea38236390b', //您的 App Key
|
||||||
|
debug: false, //是否开启调试日志
|
||||||
|
});
|
||||||
|
// 加入房间
|
||||||
|
try {
|
||||||
|
await client.join({
|
||||||
|
channelName,
|
||||||
|
uid: uid,
|
||||||
|
token: null // 调试模式下可设置为 null
|
||||||
|
});
|
||||||
|
console.info('加入房间成功...');
|
||||||
|
await initLocalStream();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加入房间失败:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//初始化本地流并且发布
|
||||||
|
async function initLocalStream() {
|
||||||
|
// 监听事件
|
||||||
|
client.on('stream-added', event => {
|
||||||
|
const remoteStream = event.stream;
|
||||||
|
console.warn('收到别人的发布消息: ', remoteStream.streamID, 'mediaType: ', event.mediaType)
|
||||||
|
//订阅远端流
|
||||||
|
client.subscribe(remoteStream).then(() => {
|
||||||
|
console.warn(`subscribe 成功 ${remoteStream.streamID}`)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
client.on('stream-subscribed', event => {
|
||||||
|
// 远端流订阅成功
|
||||||
|
const remoteStream = event.stream;
|
||||||
|
console.warn('订阅别人的流成功的通知: ', remoteStream.streamID, 'mediaType: ', event.mediaType)
|
||||||
|
// 设置远端视频画布
|
||||||
|
remoteStream.setRemoteRenderMode({
|
||||||
|
width: 640,
|
||||||
|
height: 480
|
||||||
|
});
|
||||||
|
// 播放远端流
|
||||||
|
remoteStream.play('remoteVideoContent');
|
||||||
|
|
||||||
|
});
|
||||||
|
// 进房成功后开始推流
|
||||||
|
try {
|
||||||
|
// await client.join({ channelName, uid });
|
||||||
|
localStream = NERTC.createStream({ uid, audio: false, video: false, client });
|
||||||
|
localStream.setAudioProfile("high_quality_stereo");
|
||||||
|
await localStream.init();
|
||||||
|
await client.publish(localStream);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 开启麦克风-按钮
|
||||||
|
document.getElementById('startCall').onclick = async function () {
|
||||||
|
try {
|
||||||
|
// localStream.audio = true;
|
||||||
|
// await localStream.init();
|
||||||
|
// await client.publish(localStream);
|
||||||
|
localStream.open({type:'audio'})
|
||||||
|
$(this).hide();
|
||||||
|
$('.bottom #finishCall').show();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('开启麦克风失败', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 关闭麦克风-按钮
|
||||||
|
document.getElementById('finishCall').onclick = async function () {
|
||||||
|
//结束通话 await client.leave();
|
||||||
|
try {
|
||||||
|
// localStream.audio = false;
|
||||||
|
// await localStream.init();
|
||||||
|
// await client.publish(localStream);
|
||||||
|
localStream.close({ type: "audio"});
|
||||||
|
$(this).hide();
|
||||||
|
$('.bottom #startCall').show();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('关闭麦克风失败', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
main()
|
||||||
|
})
|
||||||
25
view/molistar/modules/h5Chat/package-lock.json
generated
Normal file
25
view/molistar/modules/h5Chat/package-lock.json
generated
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "dome",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"dependencies": {
|
||||||
|
"nertc-web-sdk": "^5.6.30"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@types/webrtc": {
|
||||||
|
"version": "0.0.31",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@types/webrtc/-/webrtc-0.0.31.tgz",
|
||||||
|
"integrity": "sha512-GEoJIoM/ddxdaGnu0enJVDTdvwwr3/tPkpXz0LBTSi282gqxWDg1ffk4fzHU2dosNshp+Slq1kfGxpKs5083Nw=="
|
||||||
|
},
|
||||||
|
"node_modules/nertc-web-sdk": {
|
||||||
|
"version": "5.6.30",
|
||||||
|
"resolved": "https://registry.npmmirror.com/nertc-web-sdk/-/nertc-web-sdk-5.6.30.tgz",
|
||||||
|
"integrity": "sha512-1dU4K6uIqkKC9hI7aDw5uz1i78cMZ3H5CQ1aLmPcZUbr6i9twQOLSwfHcbhiOc7xXPC2fi49t/xVyDPjUTJfRQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/webrtc": "^0.0.31"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
5
view/molistar/modules/h5Chat/package.json
Normal file
5
view/molistar/modules/h5Chat/package.json
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"dependencies": {
|
||||||
|
"nertc-web-sdk": "^5.6.30"
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user