Get a stream of bytes from navigator.mediaDevices.getUserMedia()?

Question

I am aware of how to retrieve eg. a video stream from a webcam source:

const constraints = { video: true };

navigator.mediaDevices

    .getUserMedia(constraints)

    .then(mediaStream => {

        // ** But how to get the a stream of bytes from here??? **

    });

I could not find any proper documentation of how to retrieve a stream of bytes from the mediaStream object.

How to do this? Because, lets say I want to stream the bytes to the server.

Answer 1

媒体流录制 API

通过进一步研究 MDN 和与音频和视频相关的 HTML 5 API，我找到了MediaStream Recording API。

因此，要获取字节流（或一些可用的块），我们可以这样做：

const constraints = { video: true };

navigator.mediaDevices

    .getUserMedia(constraints)

    .then(mediaStream => {

        // use MediaStream Recording API
        const recorder = new MediaRecorder(stream);

        // fires every one second and passes an BlobEvent
        recorder.ondataavailable = event => {

            // get the Blob from the event
            const blob = event.data;

            // and send that blob to the server...
        };

        // make data available event fire every one second
        recorder.start(1000);
    });

浏览器支持：

MediaStream Recording API 仍处于工作草案状态（2018 年 3 月）。目前仅在 Chrome 和 Firefox 中原生支持。

填充：streamproc/MediaStreamRecorder

进一步阅读： 录制到音频文件