时间戳

首页 > 解决方案 > 从 navigator.mediaDevices.getUserMedia() 获取字节流？

javascript - 从 navigator.mediaDevices.getUserMedia() 获取字节流？

问题描述

我知道如何检索例如。来自网络摄像头源的视频流：

const constraints = { video: true };

navigator.mediaDevices

    .getUserMedia(constraints)

    .then(mediaStream => {

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

    });

我找不到任何有关如何从 mediaStream 对象中检索字节流的适当文档。

这该怎么做？因为，假设我想将字节流式传输到服务器。

标签： javascripthtmlwebrtc

解决方案

媒体流录制 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 中原生支持。

Polyfill： streamproc/MediaStreamRecorder

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

推荐阅读