view camera

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="room">
-    <DeviceSelect v-show="false" v-model:value="cameraId" device-type="camera" />
-    <DeviceSelect v-show="false" v-model:value="microphoneId" device-type="microphone" />
+    <DeviceSelect v-model:value="cameraId" device-type="camera" />
+    <DeviceSelect v-model:value="microphoneId" device-type="microphone" />
 
     <!-- 远端 -->
     <div class="remote-container">
@@ -19,6 +19,14 @@
       <div id="localStream" class="local-stream-content" />
       <!-- 本地流操作栏 -->
       <div v-if="isPlayingLocalStream" class="local-stream-control">
+        <div class="video-control control">
+          <n-icon v-if="!isReverseCamera" size="40" @click="handleVideoMute">
+            <CameraOutline />
+          </n-icon>
+          <n-icon v-if="isReverseCamera" size="40" @click="handleVideoUnMute">
+            <CameraReverseOutline />
+          </n-icon>
+        </div>
         <div class="video-control control">
           <n-icon v-if="!isMutedVideo" size="40" @click="handleVideoMute">
             <VideocamOutline />
@@ -48,7 +56,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 { VideocamOutline, VideocamOffOutline } from '@vicons/ionicons5'
+import { CameraOutline, CameraReverseOutline, VideocamOutline, VideocamOffOutline } from '@vicons/ionicons5'
 import { AudioOutlined, AudioMutedOutlined } from '@vicons/antd'
 import { isUndef } from '@/utils/is.js'
 // import { Screen, ScreenOff } from '@vicons/carbon'
@@ -56,6 +64,8 @@ export default {
   name: 'HomePage',
   components: {
     DeviceSelect,
+    CameraOutline,
+    CameraReverseOutline,
     VideocamOutline,
     VideocamOffOutline,
     AudioOutlined,
@@ -431,6 +441,21 @@ export default {
       }
     }
 
+    const handelCameraReverse = () => {
+      if (this.video) {
+        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(() => {
       const { userId, roomId } = route.query
       data.userId = userId
@@ -438,11 +463,11 @@ export default {
     })
     watch(() => [settings.cameraId, settings.microphoneId], async([cameraId, microphoneId]) => {
       if (cameraId && microphoneId) {
-        await createMeetingRoom()
-        await joinMeetingRoom()
-        await initLocalStream()
-        await playLocalStream()
-        await publishStream()
+        // await createMeetingRoom()
+        // await joinMeetingRoom()
+        // await initLocalStream()
+        // await playLocalStream()
+        // await publishStream()
       }
     })
 
@@ -454,6 +479,7 @@ export default {
       handleVideoUnMute,
       handleAudioMute,
       handleAudioUnMute,
+      handelCameraReverse,
       leaveMeetingRoom
     }
   }