新增h5语聊dome

2024-09-13 18:05:37 +08:00
10 changed files with 317 additions and 0 deletions
--- a/view/molistar/modules/h5Chat/css/index.css
+++ b/view/molistar/modules/h5Chat/css/index.css
@@ -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;
+}
--- a/view/molistar/modules/h5Chat/css/index.scss
+++ b/view/molistar/modules/h5Chat/css/index.scss
@@ -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;
+    }
+}
--- a/view/molistar/modules/h5Chat/images/bg.png
+++ b/view/molistar/modules/h5Chat/images/bg.png
--- a/view/molistar/modules/h5Chat/images/finishCall.png
+++ b/view/molistar/modules/h5Chat/images/finishCall.png
--- a/view/molistar/modules/h5Chat/images/startCall.png
+++ b/view/molistar/modules/h5Chat/images/startCall.png
--- a/view/molistar/modules/h5Chat/index.html
+++ b/view/molistar/modules/h5Chat/index.html
@@ -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>
--- a/view/molistar/modules/h5Chat/js/NIM_Web_NERTC_v5.6.30.js
+++ b/view/molistar/modules/h5Chat/js/NIM_Web_NERTC_v5.6.30.js
--- a/view/molistar/modules/h5Chat/js/index.js
+++ b/view/molistar/modules/h5Chat/js/index.js
@@ -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()
+})
--- a/view/molistar/modules/h5Chat/package-lock.json
+++ b/view/molistar/modules/h5Chat/package-lock.json
@@ -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"
+      }
+    }
+  }
+}
--- a/view/molistar/modules/h5Chat/package.json
+++ b/view/molistar/modules/h5Chat/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "nertc-web-sdk": "^5.6.30"
+  }
+}