Browse Source

调整部分问题

wolyshaw 3 years ago
parent
commit
1ea74c1cdf

+ 5 - 2
src/components/live-broadcast/action-bar.tsx

@@ -51,8 +51,11 @@ export default defineComponent({
             <div class={styles.btnInner}>
               <SvgIcon
                 onClick={() => {
-                  state.barStatus.camera = !state.barStatus.camera
                   RuntimeUtils.toggleDevice('camera')
+                  if (runtime.screenShareStatus) {
+                    return
+                  }
+                  state.barStatus.camera = !state.barStatus.camera
                 }}
                 name={this.isCameraDisabled ? 'bar-camera-disabled' : 'bar-camera'}
                 style={{
@@ -133,7 +136,7 @@ export default defineComponent({
           <div class={styles['bar-btn']} onClick={RuntimeUtils.shareScreenVideo}>
             <div class={styles.btnInner}>
               <SvgIcon
-                name="bar-screen-share"
+                name={runtime.videoStatus === 'liveing' ? 'bar-screen-share' : 'bar-screen-share-disabled2'}
                 style={{
                   width: '22px',
                   cursor: 'pointer'

+ 27 - 4
src/components/live-broadcast/runtime.ts

@@ -159,6 +159,9 @@ const Events = RongIMLib.Events
  RongIMLib.addEventListener(Events.DISCONNECT, () => {
   console.log('disconnect')
    runtime.imConnectStatus = 'disconnect'
+   if (runtime.joinedRoom && runtime.videoStatus === 'liveing') {
+    closeLive(true)
+   }
  })
 
  export const connectIM = async (imToken: string) => {
@@ -206,14 +209,26 @@ export const setVideoSrcObject = (video: HTMLVideoElement | null, mediaStreams:
  * 发起屏幕共享
  */
 export const shareScreenVideo = async () => {
-  if (runtime.rtcClient && !runtime.screenShareStatus) {
-    const screenTrack = await getTrack('screen')
+  if (runtime.screenShareStatus) {
+    ElMessage.error('正在屏幕共享中,请先关闭屏幕共享')
+    return
+  }
+  if (runtime.rtcClient && !runtime.screenShareStatus && runtime.videoStatus === 'liveing') {
+    let screenTrack: RTC.RCLocalTrack | undefined
+    try {
+      screenTrack = await getTrack('screen')
+    } catch (error) {
+      ElMessage.error('屏幕分享失败,请检查是否授权')
+    }
+    if (!screenTrack) {
+      return
+    }
     const oldTrack = runtime.activeTracks.camera as RTC.RCLocalTrack
     // removeTrack([oldTrack], 'camera')
-    runtime.joinedRoom?.unpublish([oldTrack])
+    await runtime.joinedRoom?.unpublish([oldTrack])
     setTrack([screenTrack as RTC.RCLocalTrack], 'screen')
     if (runtime.videoRef) {
-      screenTrack.play(runtime.videoRef)
+      screenTrack?.play(runtime.videoRef)
       runtime.screenShareStatus = true
     }
     screenTrack?.on(RTC.RCLocalTrack.EVENT_LOCAL_TRACK_END, (track: RTC.RCLocalTrack) => {
@@ -328,6 +343,9 @@ export const getTrack = async (trackType: TrackType): Promise<RTC.RCLocalTrack>
   // if (res.code !== RTC.RCRTCCode.SUCCESS || !Track) {
   //   throw new Error('获取数据流失败')
   // }
+  if (res.code === RTC.RCRTCCode.GET_DISPLAY_MEDIA_FAILED) {
+    throw new Error('获取屏幕共享失败')
+  }
   return Track
 }
 
@@ -345,6 +363,7 @@ export const setTrack = async (tracks: RTC.RCLocalTrack[], trackType: TrackType,
     // }
     runtime.activeTracks[trackType] = track
   }
+  console.log(needPublish)
   if (needPublish) {
     // console.log('publish', runtime.joinedRoom)
     await runtime.joinedRoom?.publish(tracks.filter(track => !!track))
@@ -547,6 +566,10 @@ export const closeDevice = async (trackType: TrackType, needPublish = true) => {
 }
 
 export const toggleDevice = async (trackType: TrackType) => {
+  if (runtime.screenShareStatus) {
+    ElMessage.error('正在屏幕共享中,请先关闭屏幕共享')
+    return
+  }
   const track = runtime.activeTracks[trackType]
   const needPublish = runtime.videoStatus === 'liveing'
   if (track) {

+ 17 - 0
src/icons/bar/screen-share-disabled2.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="21px" height="17px" viewBox="0 0 21 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>屏幕分享(关闭)</title>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标状态" transform="translate(-234.000000, -125.000000)">
+            <g id="屏幕分享备份-3" transform="translate(218.000000, 117.000000)">
+                <g id="屏幕分享(关闭)" transform="translate(16.000000, 8.000000)">
+                    <rect id="矩形" x="0" y="0" width="20" height="17"></rect>
+                    <g id="编组" transform="translate(1.000000, 0.535534)">
+                        <path d="M12.015,14.3037518 C12.3380866,14.3037518 12.6,14.5635865 12.6,14.8841089 C12.6,15.2046313 12.3380866,15.4644661 12.015,15.4644661 L5.98500001,15.4644661 C5.82984836,15.4644661 5.68105131,15.4033215 5.57134253,15.2944834 C5.46163374,15.1856453 5.4,15.0380292 5.4,14.8841089 C5.4,14.7301887 5.46163375,14.5825725 5.57134253,14.4737345 C5.68105132,14.3648964 5.82984836,14.3037518 5.98500001,14.3037518 L12.015,14.3037518 Z M15.385,0.464213562 L11.402,4.44721356 L10.049229,3.24700097 C9.91550447,3.12870837 9.7309643,3.08531493 9.55911111,3.12699053 L9.47453576,3.1549645 C9.28103216,3.23699802 9.15545308,3.42175909 9.1540358,3.62650732 L9.1540358,3.62650732 L9.1454796,5.1403851 C8.15054491,5.14038509 7.19841159,5.52274183 6.49639906,6.20334118 C5.79438652,6.88394054 5.4,7.80703136 5.4,8.7695442 C5.4,9.05587695 5.63942152,9.28799551 5.93476294,9.28799551 C6.23010435,9.28799551 6.46952588,9.05587695 6.46952588,8.7695442 C6.46952481,7.3390944 7.66467809,6.17900424 9.14013198,6.1772877 L9.14013198,6.1772877 L9.137,6.71121356 L2.884,12.9642136 L1.80000001,12.9644661 C1.38228404,12.9644661 0.979538055,12.8204235 0.659235868,12.5600652 L0.527207799,12.4414425 C0.189642315,12.1065561 0,11.6523527 0,11.1787518 L0,11.1787518 L0,2.25018037 C0,1.7765795 0.189642315,1.32237608 0.527207799,0.98748969 C0.864773283,0.6526033 1.32261033,0.464466094 1.80000001,0.464466094 L1.80000001,0.464466094 L15.385,0.464213562 Z M17.5759,1.09882413 C17.848726,1.41967927 18,1.82719333 18,2.25018037 L18,2.25018037 L18,11.1787518 C18,11.6523527 17.8103577,12.1065561 17.4727922,12.4414425 C17.1352267,12.7763289 16.6773897,12.9644661 16.2,12.9644661 L16.2,12.9644661 L5.713,12.9642136 L17.5563492,1.12132034 L17.5563492,1.12132034 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
+                        <rect id="矩形" fill="#FF3D00" transform="translate(11.131728, 8.131728) rotate(-315.000000) translate(-11.131728, -8.131728) " x="10.131728" y="-2.36827202" width="2" height="21" rx="1"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>