修改推流流程

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

@@ -33,7 +33,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,
   // 屏幕分享状态
@@ -385,13 +385,14 @@ export const startLive = async (resetTime = true) => {
   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 +411,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 +422,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 +542,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)