view camera

src/views/home/components/Device.vue

@@ -56,6 +56,19 @@ export default defineComponent({
       emit('update:value', data.activeDeviceId)
     }
 
+    const handleReverse = () => {
+      const index = data.deviceList.findIndex((item) => item.deviceId === data.activeDeviceId)
+      if (data.deviceList.length === 1) {
+        emit('update:value', data.activeDeviceId)
+      } else if (index === data.deviceList.length - 1) {
+        data.activeDeviceId = data.deviceList[index - 1].deviceId
+        emit('update:value', data.activeDeviceId)
+      } else {
+        data.activeDeviceId = data.deviceList[index + 1].deviceId
+        emit('update:value', data.activeDeviceId)
+      }
+    }
+
     onMounted(() => {
       navigator.mediaDevices.getUserMedia({ audio: true, video: true })
         .then(() => {
@@ -69,7 +82,8 @@ export default defineComponent({
 
     return {
       ...toRefs(data),
-      handleChange
+      handleChange,
+      handleReverse
     }
   }
 

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="room">
-    <DeviceSelect v-model:value="cameraId" device-type="camera" />
+    <DeviceSelect v-show="false" ref="cameraRef" v-model:value="cameraId" device-type="camera" />
-    <DeviceSelect v-model:value="microphoneId" device-type="microphone" />
+    <DeviceSelect v-show="false" v-model:value="microphoneId" device-type="microphone" />
 
     <!-- 远端 -->
     <div class="remote-container">
@@ -20,10 +20,7 @@
       <!-- 本地流操作栏 -->
       <div v-if="isPlayingLocalStream" class="local-stream-control">
         <div class="video-control control">
-          <n-icon v-if="!isReverseCamera" size="40" @click="handleVideoMute">
+          <n-icon size="40" @click="handelCameraReverse">
-            <CameraOutline />
-          </n-icon>
-          <n-icon v-if="isReverseCamera" size="40" @click="handleVideoUnMute">
             <CameraReverseOutline />
           </n-icon>
         </div>
@@ -55,7 +52,7 @@
 import TRTC from 'trtc-js-sdk'
 import { useRoute } from 'vue-router'
 import DeviceSelect from './components/Device.vue'
-import { reactive, toRefs, onMounted, watch, nextTick } from 'vue'
+import { ref, reactive, toRefs, onMounted, watch, nextTick } from 'vue'
 import { CameraOutline, CameraReverseOutline, VideocamOutline, VideocamOffOutline } from '@vicons/ionicons5'
 import { AudioOutlined, AudioMutedOutlined } from '@vicons/antd'
 import { isUndef } from '@/utils/is.js'
@@ -73,6 +70,7 @@ export default {
   },
   setup() {
     const route = useRoute()
+    const cameraRef = ref()
     const data = reactive({
       client: null,
       sdkAppId: 1400752641,
@@ -442,18 +440,7 @@ export default {
     }
 
     const handelCameraReverse = () => {
-      if (this.video) {
+      cameraRef.value.handleReverse()
-        this.video.pause()
-      }
-      this.constraints.video.facingMode = this.isFront ? 'environment' : 'user'
-      const stream = this.video.srcObject
-      const tracks = stream.getTracks()
-      tracks.forEach(function(track) {
-        track.stop()
-      })
-      this.video.srcObject = null
-      this.init()
-      this.isFront = !this.isFront
     }
 
     onMounted(() => {
@@ -463,11 +450,11 @@ export default {
     })
     watch(() => [settings.cameraId, settings.microphoneId], async([cameraId, microphoneId]) => {
       if (cameraId && microphoneId) {
-        // await createMeetingRoom()
+        await createMeetingRoom()
-        // await joinMeetingRoom()
+        await joinMeetingRoom()
-        // await initLocalStream()
+        await initLocalStream()
-        // await playLocalStream()
+        await playLocalStream()
-        // await publishStream()
+        await publishStream()
       }
     })
 
@@ -475,6 +462,7 @@ export default {
       ...toRefs(data),
       ...toRefs(settings),
       ...toRefs(status),
+      cameraRef,
       handleVideoMute,
       handleVideoUnMute,
       handleAudioMute,