直播一部分

package.json

@@ -15,6 +15,7 @@
     "core-js": "^3.6.5",
     "dayjs": "^1.9.1",
     "postcss-pxtorem": "^5.1.1",
+    "tim-js-sdk": "^2.8.0",
     "trtc-js-sdk": "^4.6.5",
     "vod-js-sdk-v6": "^1.4.10",
     "vue": "^3.0.0-0",

src/components/LivePlay.vue

@@ -101,7 +101,10 @@ export default defineComponent({
     // todo 修改后报错
     function kaishi(){
       if(props.info != undefined){
-        livestart(props.info.liveid)
+        const id = props.info.liveid;
+        livestart(id).then(()=>{
+            router.push("/regime/liveing?id=" + id)
+        })
       }
     }
     // const liveinfo = ref(props.liveinfo)

src/views/regime/Livedetail.vue

@@ -36,6 +36,7 @@ import LiveCount from "@/components/LiveCount.vue";
 import VideoReview from "@/components/VideoReview.vue";
 import { useRoute } from "vue-router";
 import { getliveinfo } from "@/api";
+import router from '@/router';
 export default defineComponent({
   components: {
     LiveCount,

src/views/regime/Liveing.vue

@@ -5,7 +5,7 @@
         <div class="left">直播页面</div>
         <div class="right">
             <img src="@/static/images/liveshare.png" alt="" @click="qiehuan()" />
-            <img src="@/static/images/liveend.png" alt="" />
+            <img src="@/static/images/liveend.png" alt="" @click="visible = true" />
         </div>
         </div>
         <div class="info">
@@ -30,13 +30,13 @@
                 </div>
                 </div>
             </div>
-            <div class="others">
+            <div class="others" v-for="(item, index) in roominfo.studentlist" :key="index">
-                <div id="s-10" class="othersitem">
+                <div :id="'s-' + item.memberid" class="othersitem">
                     <div class="watcher"></div>
-                    <div class="name">asdsada</div>
+                    <div class="name">{{item.name}}</div>
                 <!-- <img src="" alt="" /> -->
                 </div>
-                <div class="othersitem">
+                <!-- <div class="othersitem">
                 <div class="watcher"></div>
                 <div class="name">asdsada</div>
                 <img src="" alt="" />
@@ -50,9 +50,18 @@
                 <div class="watcher"></div>
                 <div class="name">asdsada</div>
                 <img src="" alt="" />
-                </div>
+                </div> -->
+                 <div class="othersitem" id="s-52">
+                    <div class="watcher"></div>
+                    <div class="name">测试</div>
+                    <!-- <img src="" alt="" /> -->
+                </div> 
+               
             </div>
         </div>
+        <a-modal v-model:visible="visible" title="Basic Modal" @ok="guanbi">
+            <p>您确认关闭直播吗</p>
+        </a-modal>
     </div>
 </template>
 <style lang="scss" scoped>
@@ -151,42 +160,48 @@
         display: flex;
         flex-direction: column;
         .othersitem {
-        position: relative;
+            position: relative;
-        width: 100%;
+            width: 100%;
-        height: 132px;
-        margin-bottom: 35px;
-        .watcher {
-            width: 228px;
-            height: 29px;
-            background: #000000;
-            color: white;
-            position: absolute;
-            opacity: 0.1;
-            border-radius: 18px 18px 0px 0px;
-            top: 0;
-        }
-        > img {
-            width: 228px;
             height: 132px;
-            border-radius: 18px;
+            margin-bottom: 35px;
-        }
+            background-color: #eee;
-        .name {
+            border-radius: 18px 18px 0px 0px;
-            position: absolute;
+            overflow: hidden;
-            top: 9px;
+            .watcher {
-            left: 28px;
+                width: 100%;
-            font-size: 12px;
+                height: 29px;
-            color: #fff;
+                background: #000000;
-        }
+                color: white;
+                position: absolute;
+                opacity: 0.1;
+                border-radius: 18px 18px 0px 0px;
+                top: 0;
+            }
+            > img {
+                width: 228px;
+                height: 132px;
+                border-radius: 18px;
+            }
+            .name {
+                position: absolute;
+                top: 9px;
+                left: 28px;
+                font-size: 12px;
+                color: #fff;
+            }
         }
     }
 }
 </style>
 <script lang="ts">
-import { defineComponent, onMounted } from "vue";
+import { defineComponent, onMounted, ref } from "vue";
 import LivePlaying from "@/components/LivePlaying.vue";
 import LiveingWatcher from "@/components/LiveingWatcher.vue";
 import TRTC from "trtc-js-sdk"
-import { usersig } from '@/api';
+import { getliveinfo, usersig } from '@/api';
+import { useRoute } from 'vue-router';
+import store from '@/store';
+import { message } from 'ant-design-vue';
 
 export default defineComponent({
     components: {
@@ -200,10 +215,15 @@ export default defineComponent({
         let statie = true;
         let userSing = '';
         let type = false;
+        const visible = ref(false); 
+        const roominfo = ref<any>([]);
+        console.log(useRoute())
+        const id = useRoute().query.id;
+            
         async function qiehuan(){
             // 1 屏幕分享 2 摄像头
             client.unpublish(localStream)
-            localStream = type ? TRTC.createStream({ userid: 10, audio: true, screen: true }) : TRTC.createStream({ userId: 10, audio: true, video: true });
+            localStream = type ? TRTC.createStream({ userid: store.state.userinfo.memberid, audio: true, screen: true }) : TRTC.createStream({ userId: 10, audio: true, video: true });
             type = !type;
             localStream.initialize().then(()=>{
                 client
@@ -222,10 +242,10 @@ export default defineComponent({
             });
             
         }
-        function pingmu(){
+        async function pingmu(){
-            localStream = TRTC.createStream({ userid: 10, audio: true, screen: true });
+            localStream = TRTC.createStream({ userid: store.state.userinfo.memberid, audio: true, screen: true });
-
+            const id = localStream.getId();
-            localStream
+            await localStream
             .initialize()
             .catch((error: string) => {
                 console.error('初始化本地流失败 ' + error);
@@ -240,12 +260,14 @@ export default defineComponent({
                 .then(() => {
                     localStream.play('local_stream');
                     console.log('本地流发布成功');
+                    console.log(id , 123)
                 });
             });
         }
-        function shexiang(){
+        async function shexiang(){
-            localStream = TRTC.createStream({ userId: 10, audio: true, video: true });
+            localStream = TRTC.createStream({ userId: store.state.userinfo.memberid, audio: true, video: true });
-            localStream
+            const id = localStream.getId();
+            await localStream
             .initialize()
             .catch((error: string) => {
                 console.error('初始化本地流失败 ' + error);
@@ -260,20 +282,27 @@ export default defineComponent({
                 .then(() => {
                     localStream.play('local_stream');
                     console.log('本地流发布成功');
+                    console.log(id, 123)
                 });
             });
         }
-        function init(fun: any, userSig: string){
+        async function init(fun: any, userSig: string): Promise<void>{
             console.log(userSig)
             const el = document.querySelector("#local_stream");
             if(el){
                 el.innerHTML = ""
             }
+            if (typeof id == "string") {
+                roominfo.value = await getliveinfo(parseInt(id))
+                console.log(roominfo.value)
+            }
+
+            
             client = TRTC.createClient({
                 mode: 'rtc',
                 sdkAppId: '1400400340',
-                userId: 10,
+                userId: store.state.userinfo.memberid,
-                userSig: 'eJw1zMsKwjAUBNB-yVrqzatowaU7UcQgGNxEG5tLUGNSxQf*u7FWmM2cgXkRNVsVNxtJRVgBZNB1rO2pxQN2TP*aam9CwJpUVADkcAG-xd4DRptdSskAem3x*LUSOOdjoL0mbPLpvtx5rRbb4RIla86XBxNGKTePI391T64N6jQFgRu3ThPy-gBYczBk'
+                userSig: userSig
             });
             client.on('stream-added', (event: { stream: any }) => {
                 const remoteStream = event.stream;
@@ -283,12 +312,12 @@ export default defineComponent({
             });
             client.on('stream-subscribed', (event: { stream: any }) => {
                 const remoteStream = event.stream;
-                console.log('远端流订阅成功：' + remoteStream.getId());
+                console.log(remoteStream);
                 // 播放远端流
-                remoteStream.play('s-' + remoteStream.getId());
+                remoteStream.play('s-' + remoteStream.userId_);
             });
             client
-            .join({ roomId: 11 })
+            .join({ roomId: roominfo.value.roomid })
             .catch((error: string) => {
                 console.error('进房失败 ' + error);
             })
@@ -297,34 +326,47 @@ export default defineComponent({
                 fun()
             });
         }
-        function fenxiang(){
+        async function fenxiang(){
             console.log(localStream)
            
 
-            // client.unpublish(localStream).then(() => {
+            await client.unpublish(localStream).then(() => {
-            //     // 关闭屏幕分享流
+                // 关闭屏幕分享流
-            //     console.log("关闭")
+                console.log("关闭")
-            //     client.leave().then(() => {
+                client.leave().then(() => {
-            //     // leaving room success
+                // leaving room success
-            //         console.log("关闭成功")
+                    console.log("关闭成功")
-            //     }).catch((error: string) => {
+                }).catch((error: string) => {
-            //         console.error('leaving room failed: ' + error);
+                    console.error('leaving room failed: ' + error);
-            //     });
+                });
-            // });
+            });
-            init(statie ? shexiang : pingmu, userSing);
+            statie ? await shexiang() : await pingmu();
             statie = !statie;
+            console.log(localStream.getId())
+        }
+
+        function guanbi(){
+            client.leave().then(() => {
+                // leaving room success
+                visible.value = false;
+                
+            }).catch((error: string) => {
+                message.error('关闭失败: ' + error);
+            });
         }
 
         onMounted(async ()=>{
-            userSing = await usersig(10);
+            userSing = await usersig(store.state.userinfo.memberid);
             
             init(pingmu, userSing);
-
         })
      
         return{
             fenxiang,
-            qiehuan
+            qiehuan,
+            roominfo,
+            guanbi,
+            visible
         }
     },
 });

yarn.lock

@@ -8774,6 +8774,11 @@ thunky@^1.0.2:
   resolved "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
+tim-js-sdk@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.npmjs.org/tim-js-sdk/-/tim-js-sdk-2.8.0.tgz#bfba8a591cb209789484f54dc7d1dcfcd4e7e7cf"
+  integrity sha512-dJbHdc6i4JBDfkCf6BRcmBgXZckot2yS2HxA8BvdtCiEyBrncgcG84EjN8pKsTqE+uomb5JfLC5nRnPmAkTm5w==
+
 timers-browserify@^2.0.4:
   version "2.0.11"
   resolved "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.11.tgz#800b1f3eee272e5bc53ee465a04d0e804c31211f"