feat: 切换摄像头

webrtc-static/src/pages/Room.vue

@@ -34,6 +34,8 @@
         </el-button>
       </div>
       <Video
+          :cameras="cameras"
+          :currentCamera="currentCamera"
           :showStartVideoByReceiver="showStartVideoByReceiver"
           :showStartVideoBySender="showStartVideoBySender"
           :showVideo="showVideo"
@@ -41,6 +43,7 @@
           @cancelReceiveVideo="cancelReceiveVideo"
           @hangupVideo="hangUpVideo"
           @answerVideo="answerVideo"
+          @cameraChange="cameraChange"
       />
     </div>
     <div v-else>
@@ -79,9 +82,11 @@ export default {
     return {
       showFormArea: true,
       showVideo: false,
+      devices: [],
       showStartVideoByReceiver: null,
       showStartVideoBySender: null,
       remoteStream: null,
+      currentCamera: 'default',
       roomForm: {
         roomId: '',
         userName: ''
@@ -123,6 +128,9 @@ export default {
     receiveUser () {
       return this.roomUsers.find(item => item.sockId !== this.sockId);
     },
+    cameras () {
+      return this.devices.filter(i => i.kind === 'videoinput');
+    }
   },
   methods: {
     canSupportWebRTC () {
@@ -151,6 +159,7 @@ export default {
     async getDevices () {
       try {
         const devices = await navigator.mediaDevices.enumerateDevices();
+        this.devices = devices;
         console.log('devices', devices);
       } catch (error) {
         console.error(error);
@@ -359,10 +368,28 @@ export default {
     hangUpVideo () {
       socket.emit('hangupVideo', this.user);
     },
+    async cameraChange (deviceId) {
+      const localStream = await navigator.mediaDevices.getUserMedia({
+        audio: true,
+        video: {
+          deviceId
+        }
+      });
+      const videoTrack = localStream.getVideoTracks()[0];
+      const sender = this.peer.getSenders().find(function (s) {
+        return s.track.kind == videoTrack.kind;
+      });
+      console.log('found sender:', sender);
+      sender.replaceTrack(videoTrack);
+      this.localStream = localStream;
+      setLocalStream(localStream);
+    },
     async createLocalVideoStream () {
-      const constraints = { audio: true, video: true };
       // Link: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
-      const localStream = await navigator.mediaDevices.getUserMedia(constraints);
+      const localStream = await navigator.mediaDevices.getUserMedia({
+        audio: true,
+        video: true
+      });
       console.log('localStream:', localStream);
       return localStream;
     },