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;
     },

webrtc-static/src/pages/Video.vue

@@ -5,9 +5,20 @@
         <video autoplay class="remoteStream" id="remoteStream"></video>
         <video autoplay class="localStream" id="localStream"></video>
       </div>
-      <div>
+      <div class="control">
+        <el-select :value="currentCamera" @change="changeCamera">
+          <el-option value="default">系统默认</el-option>
+          <el-option
+              v-for="item in cameras"
+              :key="item.deviceId"
+              :label="item.label"
+              :value="item.deviceId">
+          </el-option>
+        </el-select>
+        <el-button type="success" @click="takePhoto">拍照</el-button>
         <el-button type="danger" @click="clickHangup">挂断</el-button>
       </div>
+      <canvas id="photo"/>
     </div>
     <div v-if="!showVideo && showStartVideoByReceiver" class="modal">
       <div class="desc">等待{{ showStartVideoByReceiver.userName }}接受视频通话邀请</div>
@@ -34,28 +45,49 @@
 <script>
 export default {
   name: 'VideoView',
-  props: ['devices', 'showVideo', 'showStartVideoByReceiver', 'showStartVideoBySender', 'remoteStream', 'localStream'],
+  props: ['currentCamera', 'cameras', 'showVideo', 'showStartVideoByReceiver', 'showStartVideoBySender', 'remoteStream', 'localStream'],
   methods: {
-    cancelSendVideo () {
+    cancelSendVideo() {
       this.$emit('cancelSendVideo');
     },
-    cancelReceiveVideo () {
+    cancelReceiveVideo() {
       this.$emit('cancelReceiveVideo');
     },
-    clickHangup () {
+    clickHangup() {
       this.$emit('hangupVideo');
     },
-    clickAnswer () {
+    clickAnswer() {
       this.$emit('answerVideo');
+    },
+    takePhoto() {
+      const canvas = document.querySelector('#photo');
+      const context = canvas.getContext('2d');
+      const video = document.querySelector('#remoteStream');
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+
+      const data = canvas.toDataURL('image/png');
+      const a = document.createElement('a');
+      a.download = 'photo.png';
+      a.href = data;
+      document.body.appendChild(a);
+      a.click();
+      setTimeout(() => {
+        document.body.removeChild(a);
+      });
+    },
+    changeCamera(deviceId) {
+      this.$emit('cameraChange', deviceId);
     }
   }
 };
 
-export function setLocalStream (stream) {
+export function setLocalStream(stream) {
   document.querySelector('#localStream').srcObject = stream;
 }
 
-export function setRemoteSteam (stream) {
+export function setRemoteSteam(stream) {
   document.querySelector('#remoteStream').srcObject = stream;
 }
 </script>
@@ -108,4 +140,18 @@ video {
   width: 100%;
   height: 100%;
 }
+
+#photo {
+  width: 500px;
+  height: 400px;
+  position: fixed;
+  top: -5000px;
+  left: -5000px;
+}
+
+.control {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
 </style>