|
|
@@ -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>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|
