Merge branch 'master' of http://git.dayaedu.com/lex/dy-admin-live

dist/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>管乐迷</title>
-    <script type="module" crossorigin src="./assets/index.46ef5581.js"></script>
+    <script type="module" crossorigin src="./assets/index.f00511ce.js"></script>
     <link rel="modulepreload" href="./assets/vendor.a31584f5.js">
     <link rel="stylesheet" href="./assets/index.fb6968e4.css">
     <script type="module">!function(){try{new Function("m","return import(m)")}catch(o){console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}}();</script>
@@ -15,6 +15,6 @@
     
     <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
     <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.55e2facf.js"></script>
-    <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.07548e6d.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+    <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.eaa6e41b.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
   </body>
 </html>

src/components/live-broadcast/header.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { ElButton, ElMessageBox } from 'element-plus'
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus'
 import runtime, * as RuntimeUtils from './runtime'
 import { state } from '/src/state'
 import request from '/src/helpers/request'
@@ -16,6 +16,7 @@ export default defineComponent({
           type: 'warning',
         })
         await RuntimeUtils.startLive()
+        ElMessage.success('开启成功')
       } catch (error) {
         console.log(error)
       }
@@ -35,6 +36,7 @@ export default defineComponent({
         //   }
         // })
         await RuntimeUtils.closeLive()
+        ElMessage.success('关闭成功')
       } catch (error) {}
     }
   },

src/components/live-broadcast/index.tsx

@@ -53,6 +53,7 @@ export default defineComponent({
     async initializeRoom () {
       if (!state.user) throw Error('请先登录')
       try {
+        const isLiveing = sessionStorage.getItem(RuntimeUtils.START_LIVE_STATUS) === 'liveing'
         // IM连接
         await RuntimeUtils.connectIM(state.user?.imToken)
         runtime.videoRef = videoRef.value
@@ -64,8 +65,9 @@ export default defineComponent({
         RuntimeUtils.setSelectMicrophone(this.getDeviceByDeviceType('microphone'))
         cameraVideoTrack = await RuntimeUtils.getTrack('camera')
         runtime.videoRef && cameraVideoTrack.play(runtime.videoRef)
-        await RuntimeUtils.setTrack([cameraVideoTrack], 'camera', false)
-        // microphoneAudioTrack = await RuntimeUtils.getTrack('microphone')
+        // await RuntimeUtils.setTrack([cameraVideoTrack], 'camera', isLiveing)
+        // await RuntimeUtils.getTrack('microphone')
+        microphoneAudioTrack = await RuntimeUtils.getTrack('microphone')
         // microphoneAudioTrack.play()
         // console.log(microphoneAudioTrack)
         // console.log(runtime.deviceStatus)
@@ -111,9 +113,12 @@ export default defineComponent({
         if (join.room && join.code === RTC.RCRTCCode.SUCCESS) {
           runtime.joinedRoom = join.room
         }
-        if (sessionStorage.getItem(RuntimeUtils.START_LIVE_STATUS) === 'liveing') {
+        if (isLiveing) {
           await RuntimeUtils.startLive(false)
           runtime.videoStatus = 'liveing'
+        } else {
+          await RuntimeUtils.setTrack([cameraVideoTrack], 'camera', false)
+          await RuntimeUtils.setTrack([microphoneAudioTrack], 'microphone', false)
         }
         const volume =localStorage.getItem(RuntimeUtils.AUDIO_DEVICE_VOLUME)
         if (volume) {

src/components/live-broadcast/runtime.ts

@@ -1,3 +1,4 @@
+import { ElMessage } from 'element-plus';
 import { reactive, ref, Ref } from 'vue'
 import * as RongIMLib from '@rongcloud/imlib-next'
 import * as RTC from '@rongcloud/plugin-rtc'
@@ -33,7 +34,7 @@ export const AUDIO_DEVICE_VOLUME = 'audio-device-volume'
 
 const runtime = reactive({
   /** 房间id */
-  roomUid: 'LIVE-2112263-12345',
+  roomUid: sessionStorage.getItem('roomUid') || '',
   /** IM连接状态 */
   imConnectStatus: 'connecting' as imConnectStatus,
   // 屏幕分享状态
@@ -380,18 +381,23 @@ export const joinRoom = async (roomId: string, type: RTC.RCLivingType, listenEve
  */
 
 export const startLive = async (resetTime = true) => {
-  if (runtime.videoStatus !== 'stream') throw Error('当前无视频流')
+  if (runtime.videoStatus !== 'stream') {
+    const errorMessage = '请确定摄像头已经开启'
+    ElMessage.error(errorMessage)
+    throw Error(errorMessage)
+  }
   const room = runtime.joinedRoom
   if (room) {
     // const microphoneAudioTrack = await getTrack('microphone')
     // const cameraVideoTrack = await getTrack('camera')
-    // await setTrack([cameraVideoTrack], 'camera')
-    // await setTrack([microphoneAudioTrack], 'microphone')
+    await setTrack([runtime.activeTracks.camera as RTC.RCLocalVideoTrack], 'camera')
+    await setTrack([runtime.activeTracks.microphone as RTC.RCLocalAudioTrack], 'microphone')
     // const builder = await runtime.joinedRoom?.getMCUConfigBuilder()
     // // @ts-ignore
     // await builder.setOutputVideoRenderMode?.(RTC.MixVideoRenderMode.WHOLE)
     // // @ts-ignore
     // await builder.flush()
+    // console.log(runtime.activeTracks)
     await request.get('/api-web/imLiveBroadcastRoom/opsLiveVideo', {
       params: {
         type: '1',
@@ -410,7 +416,7 @@ export const startLive = async (resetTime = true) => {
 /**
  * 关闭直播
  */
-export const closeLive = async () => {
+export const closeLive = async (remove = false) => {
   // removeMedia(runtime.mediaStreams, runtime.mediaStreamTrack)
   await request.get('/api-web/imLiveBroadcastRoom/opsLiveVideo', {
     params: {
@@ -421,15 +427,19 @@ export const closeLive = async () => {
   })
   sessionStorage.removeItem(START_LIVE_TIME)
   sessionStorage.removeItem(START_LIVE_STATUS)
-  runtime.videoStatus = 'stream'
+  // 关闭房间仅移除推流即可
   for (const key in runtime.activeTracks) {
     if (Object.prototype.hasOwnProperty.call(runtime.activeTracks, key)) {
       const track = runtime.activeTracks[key as TrackType] as RTC.RCLocalTrack
       if (track) {
-        removeTrack([track], key as TrackType)
+        await runtime.joinedRoom?.unpublish([track])
+        if (remove) {
+          await removeTrack([track], key as TrackType)
+        }
       }
     }
   }
+  runtime.videoStatus = 'stream'
 }
 
 /**
@@ -537,7 +547,7 @@ export const toggleDevice = async (trackType: TrackType) => {
 }
 
 export const leaveIMRoom = async () => {
-  await closeLive()
+  await closeLive(true)
   if (runtime.joinedRoom) {
     // @ts-ignore
     await runtime.rtcClient?.leaveRoom(runtime.joinedRoom)