通过navigator.mediaDevices.getUserMedia获得的视频流怎么传给后端？

Question

如题。

通过navigator.mediaDevices.getUserMedia获得视频流后，

怎么传给后端啊，此方法会返回一个MediaStream，该怎么操作这个类型的对象。

求助。

Answer 1

我没做过捕获视频流，但做过捕获实时音频流，原理应该差不多吧。
总之，捕获到的数据是原始的ArrayBuffer，你可能需要对数据进行一定的处理，每捕获一帧，都会触发一个事件，你可以在这个事件回调中通过websocket或者http请求，逐帧发送给后端，当然也可以建立一个缓冲池，降低发送频率。

Answer 2

async videoStream() {
      let localStream = await navigator.mediaDevices.getUserMedia({
        video: true
      })
      let video = document.querySelector('video')
      video.srcObject = localStream
      video.onloadedmetadata = function(e) {
        video.play()
      }

      let mediaRecorder = new MediaRecorder(localStream);
      mediaRecorder.ondataavailable = function(blob) {
        console.log(blob.data)
      }
      mediaRecorder.start(1000)
    }

找到方法了，getUserMedia返回的stream需要用MediaRecorder包装一下。

监听ondataavailable事件，然后执行start方法。这样就可以根据固定的时间间隔取得视频流了。