change camera

src/views/home/components/Device.vue

@@ -13,7 +13,7 @@
 
 <script>
 import TRTC from 'trtc-js-sdk'
-import { reactive, toRefs, onMounted, defineComponent } from 'vue'
+import { defineComponent, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'
 export default defineComponent({
   name: 'DeviceSelect',
   props: {
@@ -26,7 +26,7 @@ export default defineComponent({
       default: () => {}
     }
   },
-  emits: ['update:value'],
+  emits: ['update:value', 'switch'],
   setup(props, { emit }) {
     const data = reactive({
       deviceList: [],
@@ -35,10 +35,10 @@ export default defineComponent({
 
     const getDeviceList = async() => {
       switch (props.deviceType) {
-        case 'camera':
+        case 'video':
           data.deviceList = await TRTC.getCameras()
           break
-        case 'microphone':
+        case 'audio':
           data.deviceList = await TRTC.getMicrophones()
           break
         case 'speaker':
@@ -54,18 +54,21 @@ export default defineComponent({
     const handleChange = (value) => {
       data.activeDeviceId = value
       emit('update:value', data.activeDeviceId)
+      emit('switch', { type: props.deviceType, deviceId: data.activeDeviceId })
     }
 
     const handleReverse = () => {
       const index = data.deviceList.findIndex((item) => item.deviceId === data.activeDeviceId)
       if (data.deviceList.length === 1) {
-        emit('update:value', data.activeDeviceId)
+        return
       } else if (index === data.deviceList.length - 1) {
         data.activeDeviceId = data.deviceList[index - 1].deviceId
         emit('update:value', data.activeDeviceId)
+        emit('switch', { type: props.deviceType, deviceId: data.activeDeviceId })
       } else {
         data.activeDeviceId = data.deviceList[index + 1].deviceId
         emit('update:value', data.activeDeviceId)
+        emit('switch', { type: props.deviceType, deviceId: data.activeDeviceId })
       }
     }
 
@@ -74,11 +77,11 @@ export default defineComponent({
         .then(() => {
           getDeviceList()
         })
-      // navigator.mediaDevices.addEventListener('devicechange', this.getDeviceList)
+      navigator.mediaDevices.addEventListener('devicechange', getDeviceList)
+    })
+    onBeforeUnmount(() => {
+      navigator.mediaDevices.removeEventListener('devicechange', getDeviceList)
     })
-    // beforeUnmount() {
-    //   navigator.mediaDevices.removeEventListener('devicechange', this.getDeviceList)
-    // }
 
     return {
       ...toRefs(data),

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="room">
-    <DeviceSelect ref="cameraRef" v-model:value="cameraId" device-type="camera" />
-    <DeviceSelect v-show="false" v-model:value="microphoneId" device-type="microphone" />
+    <DeviceSelect v-show="false" ref="cameraRef" v-model:value="cameraId" device-type="video" @switch="handleDeviceSwitch" />
+    <DeviceSelect v-show="false" v-model:value="microphoneId" device-type="audio" @switch="handleDeviceSwitch" />
 
     <!-- 远端 -->
     <div class="remote-container">
@@ -53,7 +53,7 @@ import TRTC from 'trtc-js-sdk'
 import { useRoute } from 'vue-router'
 import DeviceSelect from './components/Device.vue'
 import { ref, reactive, toRefs, onMounted, watch, nextTick } from 'vue'
-import { CameraOutline, CameraReverseOutline, VideocamOutline, VideocamOffOutline } from '@vicons/ionicons5'
+import { CameraReverseOutline, VideocamOutline, VideocamOffOutline } from '@vicons/ionicons5'
 import { AudioOutlined, AudioMutedOutlined } from '@vicons/antd'
 import { isUndef } from '@/utils/is.js'
 // import { Screen, ScreenOff } from '@vicons/carbon'
@@ -61,7 +61,6 @@ export default {
   name: 'HomePage',
   components: {
     DeviceSelect,
-    CameraOutline,
     CameraReverseOutline,
     VideocamOutline,
     VideocamOffOutline,
@@ -72,6 +71,7 @@ export default {
     const route = useRoute()
     const cameraRef = ref()
     const data = reactive({
+      hasInit: false,
       client: null,
       sdkAppId: 1400752641,
       sdkSecret: '9b5fc557f286d7e4d6eafd8023026da59f0674000f319754aa1ec4beefddcdd6',
@@ -204,37 +204,31 @@ export default {
       /* 远端流更新 */
       data.client.on('stream-updated', (event) => {
         const { stream: remoteStream } = event
-        alert('stream')
         console.log(`type: ${remoteStream.getType()} stream-updated hasAudio: ${remoteStream.hasAudio()} hasVideo: ${remoteStream.hasVideo()}`)
       })
       /* 远端流禁用音频 */
       data.client.on('mute-audio', (event) => {
         const { userId } = event
-        alert('muteaudio')
         console.log(`${userId} mute audio`)
       })
       /* 远端流启用音频 */
       data.client.on('unmute-audio', (event) => {
         const { userId } = event
-        alert('unmuteaudio')
         console.log(`${userId} unmute audio`)
       })
       /* 远端流禁用视频 */
       data.client.on('mute-video', (event) => {
         const { userId } = event
-        alert('mutevideo')
         console.log(`${userId} mute video`)
       })
       /* 远端流启用视频 */
       data.client.on('unmute-video', (event) => {
         const { userId } = event
-        alert('unmutevideo')
         console.log(`${userId} unmute video`)
       })
 
       /* 本地 client 与腾讯云的连接状态变更 */
       data.client.on('connection-state-changed', (event) => {
-        alert('connection')
         console.log(`RtcClient state changed to ${event.state} from ${event.prevState}`)
       })
 
@@ -255,7 +249,6 @@ export default {
           audio: isUndef(config.audio) ? true : config.audio,
           video: isUndef(config.video) ? true : config.video
         })
-        alert('subscribeStream')
       } catch (error) {
         console.error(`subscribe ${remoteStream.getUserId()} with audio: ${config.audio} video: ${config.video} error`, error)
       }
@@ -268,7 +261,6 @@ export default {
     const unsubscribeStream = async(remoteStream) => {
       try {
         await data.client.unsubscribe(remoteStream)
-        alert('unsubscribeStream')
       } catch (error) {
         console.error(`unsubscribe ${remoteStream.getUserId()} error`, error)
       }
@@ -312,7 +304,9 @@ export default {
      * @return {*}
      */
     const playLocalStream = async() => {
-      alert('playLocalStream')
+      if (settings.localStream && settings.isPlayingLocalStream) {
+        settings.isPlayingLocalStream = false
+      }
       settings.localStream.play('localStream')
         .then(() => {
           settings.isPlayingLocalStream = true
@@ -425,6 +419,22 @@ export default {
       data.client && data.client.enableAudioVolumeEvaluation(-1)
     }
 
+    /**
+     * @description: 切换音频
+     * @param {*} type
+     * @param {*} deviceId
+     * @return {*}
+     */
+    const handleDeviceSwitch = ({ type, deviceId }) => {
+      try {
+        if (settings.localStream) {
+          settings.localStream.switchDevice(type, deviceId)
+        }
+      } catch (error) {
+        console.error('switchDevice failed', error)
+      }
+    }
+
     /**
      * @description: 退出直播间
      * @return {*}
@@ -460,6 +470,12 @@ export default {
     })
     watch(() => [settings.cameraId, settings.microphoneId], async([cameraId, microphoneId]) => {
       if (cameraId && microphoneId) {
+        data.hasInit = true
+      }
+    })
+
+    watch(() => data.hasInit, async(val) => {
+      if (val) {
         await createMeetingRoom()
         await joinMeetingRoom()
         await initLocalStream()
@@ -478,6 +494,7 @@ export default {
       handleAudioMute,
       handleAudioUnMute,
       handelCameraReverse,
+      handleDeviceSwitch,
       leaveMeetingRoom
     }
   }
@@ -491,9 +508,9 @@ export default {
   position: relative;
   .local-stream-container{
     width: 100%;
-    height: 30%;
+    height: 100%;
     position: absolute;
-    top: 50px;
+    top: 0;
     .local-stream-content {
       width: 100%;
       height: 100%;