更新

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

@@ -1,228 +1,228 @@
-import { defineComponent, reactive } from 'vue'
-import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElSlider, ElDialog, ElIcon } from 'element-plus'
-import runtime, * as RuntimeUtils from './runtime'
-import styles from './action-bar.module.less'
-import Share from './share'
-
-export const state = reactive({
-  volume: 30,
-  barStatus: {
-    camera: false, // 摄像头
-    volume: false, // 声音调节
-    microphone: false, // 麦克风
-    screen: false, // 共享屏幕
-    share: false, // 分享
-  },
-  shareVisiable: false
-})
-
-export default defineComponent({
-  name: 'LiveBroadcast-ActionBar',
-  computed: {
-    isCameraDisabled() {
-      return state.barStatus.camera && runtime.deviceStatus.camera !== 'denied' && runtime.cameras.length
-    },
-    isMicrophoneDisabled() {
-      const isDisabled = state.barStatus.microphone && runtime.deviceStatus.microphone !== 'denied' && runtime.microphones.length
-      return isDisabled
-    },
-    isVolumeDisabled() {
-      return state.volume === 0
-    }
-  },
-  mounted() {
-    console.log(runtime.cameras, runtime.cameras.length)
-  },
-  methods: {
-    startShare() {
-      console.log('调用')
-      state.shareVisiable = true
-    },
-    volumeChange(value: number) {
-      state.volume = value
-      RuntimeUtils.setVolume(value)
-    }
-  },
-  render() {
-    return (
-      <div class={styles['action-bar']} id="action-bar">
-        <div style={{ display: 'flex' }}>
-          <div class={styles['bar-btn']}>
-            <div class={styles.btnInner}>
-              <SvgIcon
-                onClick={() => {
-                  state.barStatus.camera = !state.barStatus.camera
-                  RuntimeUtils.toggleDevice('camera')
-                }}
-                name={this.isCameraDisabled ? 'bar-camera-disabled' : 'bar-camera'}
-                style={{
-                  width: '22px',
-                  cursor: 'pointer'
-                }}
-              />
-              { runtime.cameras.length === 0 ? null : <ElDropdown
-                placement="top"
-                // @ts-ignore
-                disabled={runtime.cameras.length === 0}
-                onCommand={RuntimeUtils.setSelectCamera}
-                // @ts-ignore
-                vSlots={{
-                  dropdown: () => (
-                    <ElDropdownMenu>
-                      {runtime.cameras.map(item => (<ElDropdownItem disabled={item === runtime.selectedCamera} command={item}>{item.label}</ElDropdownItem>))}
-                    </ElDropdownMenu>
-                  )
-                }}
-              >
-                <div class={styles['bar-btn']} style={{ height: '32px' }}>
-                  <SvgIcon
-                    name="bar-arrow-down"
-                    style={{
-                      width: '18px'
-                    }}
-                  />
-                </div>
-              </ElDropdown> }
-            </div>
-            <span class={styles['bar-btn-text']}>摄像头</span>
-          </div>
-          <div class={styles['bar-btn']}>
-            <div class={styles.btnInner}>
-              <SvgIcon
-                onClick={() => {
-                  state.barStatus.volume = !state.barStatus.volume;
-                  if(!state.barStatus.volume) {
-                    sessionStorage.getItem('volume') && this.volumeChange(Number(sessionStorage.getItem('volume')))
-                  } else {
-                    sessionStorage.setItem('volume', state.volume.toString())
-                    this.volumeChange(0)
-                  }
-                }}
-                name={this.isVolumeDisabled ? 'bar-volume-disabled' : 'bar-volume'}
-                style={{
-                  width: '22px',
-                  cursor: 'pointer'
-                }}
-              />
-              <ElDropdown
-                placement="top-start"
-                popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
-                // @ts-ignore
-                vSlots={{
-                  dropdown: () => (
-                    <div class={styles.volumeSlider}>
-                      <SvgIcon class={styles.volumeIcon} name="message-voice" color="#fff" />
-                      <ElSlider modelValue={state.volume} onInput={this.volumeChange} size="small" />
-                    </div>
-                  )
-                }}
-              >
-                <div class={styles['bar-btn']} style={{ height: '32px' }}>
-                  <SvgIcon
-                    name="bar-arrow-down"
-                    style={{
-                      width: '18px'
-                    }}
-                  />
-                </div>
-              </ElDropdown>
-            </div>
-            <span class={styles['bar-btn-text']}>音量调节</span>
-          </div>
-
-          <div class={styles['bar-btn']} onClick={RuntimeUtils.shareScreenVideo}>
-            <div class={styles.btnInner}>
-              <SvgIcon
-                name="bar-screen-share"
-                style={{
-                  width: '22px',
-                  cursor: 'pointer'
-                }}
-              />
-            </div>
-            <span class={styles['bar-btn-text']}>屏幕共享</span>
-          </div>
-
-          {/* <div class={styles['bar-btn']} >
-            <div class={styles.btnInner}>
-              <SvgIcon
-                name="bar-beauty"
-                style={{
-                  width: '22px',
-                  cursor: 'pointer'
-                }}
-              />
-            </div>
-            <span class={styles['bar-btn-text']}>美颜</span>
-          </div> */}
-          <div class={styles['bar-btn']}>
-            <div class={styles.btnInner}>
-              <SvgIcon
-                onClick={() => {
-                  const needPublish = runtime.videoStatus === 'liveing'
-                  state.barStatus.microphone = !state.barStatus.microphone
-                  if (!state.barStatus.microphone) {
-                    RuntimeUtils.openDevice('microphone', needPublish)
-                  } else {
-                    RuntimeUtils.closeDevice('microphone', needPublish)
-                  }
-                }}
-                name={this.isMicrophoneDisabled ? 'bar-mike-disabled' : 'bar-mike'}
-                style={{
-                  width: '22px',
-                  cursor: 'pointer'
-                }}
-              />
-              { runtime.microphones.length === 0 ? null : <ElDropdown
-                placement="top-start"
-                // @ts-ignore
-                disabled={runtime.microphones.length === 0}
-                popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
-                onCommand={RuntimeUtils.setSelectMicrophone}
-                // @ts-ignore
-                vSlots={{
-                  dropdown: () => (
-                    <ElDropdownMenu>
-                      {runtime.microphones.map(item => (<ElDropdownItem disabled={item === runtime.selectedMicrophone} command={item}>{item.label}</ElDropdownItem>))}
-                    </ElDropdownMenu>
-                  )
-                }}
-              >
-                <div class={styles['bar-btn']} style={{ height: '32px' }}>
-                  <SvgIcon
-                    name="bar-arrow-down"
-                    style={{
-                      width: '18px'
-                    }}
-                  />
-                </div>
-              </ElDropdown>}
-            </div>
-            <span class={styles['bar-btn-text']}>麦克风</span>
-          </div>
-
-        </div>
-        <div style={{ display: 'flex' }} onClick={this.startShare}>
-          <div class={styles['bar-btn']} >
-            <div class={styles.btnInner}>
-              <SvgIcon
-                name="bar-share"
-                style={{
-                  width: '22px',
-                  cursor: 'pointer'
-                }}
-              />
-            </div>
-            <span class={styles['bar-btn-text']} >分享</span>
-          </div>
-        </div>
-        {/* <ElButton onClick={RuntimeUtils.shareScreenVideo}>屏幕共享</ElButton> */}
-        <ElDialog width="510px"
-        destroy-on-close
-          append-to-body modelValue={state.shareVisiable} title="分享" before-close={() => { state.shareVisiable = false }}>
-            <Share onClose={()=>state.shareVisiable = false}/>
-        </ElDialog>
-      </div>
-    )
-  }
-})
+import { defineComponent, reactive } from 'vue'
+import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElSlider, ElDialog, ElIcon } from 'element-plus'
+import runtime, * as RuntimeUtils from './runtime'
+import styles from './action-bar.module.less'
+import Share from './share'
+
+export const state = reactive({
+  volume: 0,
+  barStatus: {
+    camera: false, // 摄像头
+    volume: false, // 声音调节
+    microphone: false, // 麦克风
+    screen: false, // 共享屏幕
+    share: false, // 分享
+  },
+  shareVisiable: false
+})
+
+export default defineComponent({
+  name: 'LiveBroadcast-ActionBar',
+  computed: {
+    isCameraDisabled() {
+      return state.barStatus.camera && runtime.deviceStatus.camera !== 'denied' && runtime.cameras.length
+    },
+    isMicrophoneDisabled() {
+      const isDisabled = state.barStatus.microphone && runtime.deviceStatus.microphone !== 'denied' && runtime.microphones.length
+      return isDisabled
+    },
+    isVolumeDisabled() {
+      return state.volume === 0
+    }
+  },
+  mounted() {
+    console.log(runtime.cameras, runtime.cameras.length)
+  },
+  methods: {
+    startShare() {
+      console.log('调用')
+      state.shareVisiable = true
+    },
+    volumeChange(value: number) {
+      state.volume = value
+      RuntimeUtils.setVolume(value)
+    }
+  },
+  render() {
+    return (
+      <div class={styles['action-bar']} id="action-bar">
+        <div style={{ display: 'flex' }}>
+          <div class={styles['bar-btn']}>
+            <div class={styles.btnInner}>
+              <SvgIcon
+                onClick={() => {
+                  state.barStatus.camera = !state.barStatus.camera
+                  RuntimeUtils.toggleDevice('camera')
+                }}
+                name={this.isCameraDisabled ? 'bar-camera-disabled' : 'bar-camera'}
+                style={{
+                  width: '22px',
+                  cursor: 'pointer'
+                }}
+              />
+              { runtime.cameras.length === 0 ? null : <ElDropdown
+                placement="top"
+                // @ts-ignore
+                disabled={runtime.cameras.length === 0}
+                onCommand={RuntimeUtils.setSelectCamera}
+                // @ts-ignore
+                vSlots={{
+                  dropdown: () => (
+                    <ElDropdownMenu>
+                      {runtime.cameras.map(item => (<ElDropdownItem disabled={item === runtime.selectedCamera} command={item}>{item.label}</ElDropdownItem>))}
+                    </ElDropdownMenu>
+                  )
+                }}
+              >
+                <div class={styles['bar-btn']} style={{ height: '32px' }}>
+                  <SvgIcon
+                    name="bar-arrow-down"
+                    style={{
+                      width: '18px'
+                    }}
+                  />
+                </div>
+              </ElDropdown> }
+            </div>
+            <span class={styles['bar-btn-text']}>摄像头</span>
+          </div>
+          {/* <div class={styles['bar-btn']}>
+            <div class={styles.btnInner}>
+              <SvgIcon
+                onClick={() => {
+                  state.barStatus.volume = !state.barStatus.volume;
+                  if(!state.barStatus.volume) {
+                    sessionStorage.getItem('volume') && this.volumeChange(Number(sessionStorage.getItem('volume')))
+                  } else {
+                    sessionStorage.setItem('volume', state.volume.toString())
+                    this.volumeChange(0)
+                  }
+                }}
+                name={this.isVolumeDisabled ? 'bar-volume-disabled' : 'bar-volume'}
+                style={{
+                  width: '22px',
+                  cursor: 'pointer'
+                }}
+              />
+              <ElDropdown
+                placement="top-start"
+                popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
+                // @ts-ignore
+                vSlots={{
+                  dropdown: () => (
+                    <div class={styles.volumeSlider}>
+                      <SvgIcon class={styles.volumeIcon} name="message-voice" color="#fff" />
+                      <ElSlider modelValue={state.volume} onInput={this.volumeChange} size="small" />
+                    </div>
+                  )
+                }}
+              >
+                <div class={styles['bar-btn']} style={{ height: '32px' }}>
+                  <SvgIcon
+                    name="bar-arrow-down"
+                    style={{
+                      width: '18px'
+                    }}
+                  />
+                </div>
+              </ElDropdown>
+            </div>
+            <span class={styles['bar-btn-text']}>音量调节</span>
+          </div> */}
+
+          <div class={styles['bar-btn']} onClick={RuntimeUtils.shareScreenVideo}>
+            <div class={styles.btnInner}>
+              <SvgIcon
+                name="bar-screen-share"
+                style={{
+                  width: '22px',
+                  cursor: 'pointer'
+                }}
+              />
+            </div>
+            <span class={styles['bar-btn-text']}>屏幕共享</span>
+          </div>
+
+          {/* <div class={styles['bar-btn']} >
+            <div class={styles.btnInner}>
+              <SvgIcon
+                name="bar-beauty"
+                style={{
+                  width: '22px',
+                  cursor: 'pointer'
+                }}
+              />
+            </div>
+            <span class={styles['bar-btn-text']}>美颜</span>
+          </div> */}
+          <div class={styles['bar-btn']}>
+            <div class={styles.btnInner}>
+              <SvgIcon
+                onClick={() => {
+                  const needPublish = runtime.videoStatus === 'liveing'
+                  state.barStatus.microphone = !state.barStatus.microphone
+                  if (!state.barStatus.microphone) {
+                    RuntimeUtils.openDevice('microphone', needPublish)
+                  } else {
+                    RuntimeUtils.closeDevice('microphone', needPublish)
+                  }
+                }}
+                name={this.isMicrophoneDisabled ? 'bar-mike-disabled' : 'bar-mike'}
+                style={{
+                  width: '22px',
+                  cursor: 'pointer'
+                }}
+              />
+              { runtime.microphones.length === 0 ? null : <ElDropdown
+                placement="top-start"
+                // @ts-ignore
+                disabled={runtime.microphones.length === 0}
+                popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
+                onCommand={RuntimeUtils.setSelectMicrophone}
+                // @ts-ignore
+                vSlots={{
+                  dropdown: () => (
+                    <ElDropdownMenu>
+                      {runtime.microphones.map(item => (<ElDropdownItem disabled={item === runtime.selectedMicrophone} command={item}>{item.label}</ElDropdownItem>))}
+                    </ElDropdownMenu>
+                  )
+                }}
+              >
+                <div class={styles['bar-btn']} style={{ height: '32px' }}>
+                  <SvgIcon
+                    name="bar-arrow-down"
+                    style={{
+                      width: '18px'
+                    }}
+                  />
+                </div>
+              </ElDropdown>}
+            </div>
+            <span class={styles['bar-btn-text']}>麦克风</span>
+          </div>
+
+        </div>
+        <div style={{ display: 'flex' }} onClick={this.startShare}>
+          <div class={styles['bar-btn']} >
+            <div class={styles.btnInner}>
+              <SvgIcon
+                name="bar-share"
+                style={{
+                  width: '22px',
+                  cursor: 'pointer'
+                }}
+              />
+            </div>
+            <span class={styles['bar-btn-text']} >分享</span>
+          </div>
+        </div>
+        {/* <ElButton onClick={RuntimeUtils.shareScreenVideo}>屏幕共享</ElButton> */}
+        <ElDialog width="510px"
+        destroy-on-close
+          append-to-body modelValue={state.shareVisiable} title="分享" before-close={() => { state.shareVisiable = false }}>
+            <Share onClose={()=>state.shareVisiable = false}/>
+        </ElDialog>
+      </div>
+    )
+  }
+})

src/components/live-broadcast/runtime.ts

@@ -339,10 +339,10 @@ export const setTrack = async (tracks: RTC.RCLocalTrack[], trackType: TrackType,
   for (const track of tracks) {
     // @ts-ignore
     // await runtime.mediaStreams?.addTrack(track._msTrack)
-    if (trackType === 'microphone') {
-      console.log('添加麦克风')
-      track?.play()
-    }
+    // if (trackType === 'microphone') {
+    //   console.log('添加麦克风')
+    //   track?.play()
+    // }
     runtime.activeTracks[trackType] = track
   }
   if (needPublish) {