添加取消屏幕共享与修复部分问题

src/components/live-broadcast/action-bar.tsx

@@ -133,7 +133,7 @@ export default defineComponent({
             <span class={styles['bar-btn-text']}>音量调节</span>
           </div> */}
 
-          <div class={styles['bar-btn']} onClick={RuntimeUtils.shareScreenVideo}>
+          <div class={styles['bar-btn']} onClick={RuntimeUtils.toggleShareScreenVideo}>
             <div class={styles.btnInner}>
               <SvgIcon
                 name={runtime.videoStatus === 'liveing' ? 'bar-screen-share' : 'bar-screen-share-disabled2'}
@@ -143,7 +143,7 @@ export default defineComponent({
                 }}
               />
             </div>
-            <span class={styles['bar-btn-text']}>屏幕共享</span>
+            <span class={styles['bar-btn-text']}>{runtime.screenShareStatus ? '取消共享' : '屏幕共享'}</span>
           </div>
 
           {/* <div class={styles['bar-btn']} >

src/components/live-broadcast/runtime.ts

@@ -1,4 +1,4 @@
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import { reactive, ref, Ref } from 'vue'
 import * as RongIMLib from '@rongcloud/imlib-next'
 import * as RTC from '@rongcloud/plugin-rtc'
@@ -225,7 +225,9 @@ export const shareScreenVideo = async () => {
     }
     const oldTrack = runtime.activeTracks.camera as RTC.RCLocalTrack
     // removeTrack([oldTrack], 'camera')
-    await runtime.joinedRoom?.unpublish([oldTrack])
+    if (oldTrack) {
+      await runtime.joinedRoom?.unpublish([oldTrack])
+    }
     setTrack([screenTrack as RTC.RCLocalTrack], 'screen')
     if (runtime.videoRef) {
       screenTrack?.play(runtime.videoRef)
@@ -248,6 +250,36 @@ export const shareScreenVideo = async () => {
 }
 
 /**
+ * 取消屏幕共享流的访问，会导致取消屏幕共享
+ */
+
+export const closeShareScreenVideo = () => {
+  const screenTrack = runtime.activeTracks.screen as RTC.RCLocalTrack
+  if (screenTrack) {
+    screenTrack.destroy()
+    runtime.screenShareStatus = false
+  }
+  const oldTrack = runtime.activeTracks.camera as RTC.RCLocalTrack
+  if (oldTrack) {
+    setTrack([oldTrack as RTC.RCLocalTrack], 'camera')
+    if (runtime.videoRef) {
+      oldTrack.play(runtime.videoRef)
+    }
+  }
+}
+
+export const toggleShareScreenVideo = async () => {
+  if (runtime.screenShareStatus) {
+    try {
+      await ElMessageBox.confirm('是否确认取消屏幕共享?')
+      closeShareScreenVideo()
+    } catch (error) {}
+  } else {
+    shareScreenVideo()
+  }
+}
+
+/**
  *
  * 获取所有音频输入设备
  * @returns {Promise<void>}
@@ -567,7 +599,7 @@ export const closeDevice = async (trackType: TrackType, needPublish = true) => {
 
 export const toggleDevice = async (trackType: TrackType) => {
   if (runtime.screenShareStatus) {
-    ElMessage.error('正在屏幕共享中，请先关闭屏幕共享')
+    await toggleShareScreenVideo()
     return
   }
   const track = runtime.activeTracks[trackType]