WebRTC 在一个连接获取多个摄像头

背景：

最近远程会诊项目加了一个采集卡，要求同时显示采集卡和摄像头。

实现：

多个流和单个流的区别不大，都是调用navigator.mediaDevices.getUserMedia()，不同的是，第一次调用该方法只是为了获取到流，获取到后先缓存起来，等第二个流获取到以后，再按照以前的逻辑处理

1、 获取地一个流，缓存起来，然后关键逻辑在第二次获取流的时候做，主要的逻辑和只获取一个流保持一致就行了，基本就是以前只有一个流的时候做了些啥，现在重复做一次，

 navigator.mediaDevices.getUserMedia(this.captureCardConstrains).then(stream => {
          this.captureCardStream = stream
          let videoBox = this.$refs["video-box"]
          let captureCard = document.querySelector('[data-socket="' + this.userId + '_capture"]')
          if (!captureCard)  {
            captureCard = document.createElement('video')
            captureCard.muted = 'muted'
            captureCard.setAttribute('data-socket', this.userId +'_capture')
            captureCard.autoplay = "autoplay"
            videoBox.append(captureCard)
          }
          captureCard.srcObject = stream
          captureCard.onclick = (event)=>{
            this.$refs.remoteScreen.srcObject =event.target.srcObject
          }
        }).catch(error => {
          this.$Message.error("请检查采集卡设备是否存在或已被占用")
        });
      }

      navigator.mediaDevices.getUserMedia(this.constraints).then(stream => {
        this.cameraStream = stream
        let videoBox = this.$refs["video-box"]
        let localCamera = document.querySelector('[data-socket="' + this.userId + '"]')
        if (!localCamera)  {
          localCamera = document.createElement('video')
          localCamera.muted = 'muted'
          localCamera.setAttribute('data-socket', this.userId)
          localCamera.setAttribute('poster', this.videoBackGround)
          localCamera.autoplay = "autoplay"
          videoBox.append(localCamera)
        }
        localCamera.srcObject = stream
        localCamera.onclick = (event)=>{
          this.$refs.remoteScreen.srcObject =event.target.srcObject
        }
        this.socket.emit('join', {
          roomid: this.$route.query.roomId,
          account: this.$route.query.account
        });

        stream.getTracks().forEach(track => {
          this.socket.emit("addTrack", this.roomId, {
            streamId: stream.id,
            kind: track.kind,
            userId: this.userId,
            userName: this.userName
          })
        })
        if (this.$route.query.status ==1) {
          this.captureCardStream.getVideoTracks().forEach(track => {
            this.socket.emit("addTrack", this.roomId, {
              streamId: this.captureCardStream.id,
              kind: 'capture',
              userId: this.userId,
              userName: this.userName
            })
          })
        }
      }).catch(error => {
        this.$Message.error("请检查音视频设备是否存在或已被占用")
      });