从navigator.mediaDevices.getUserMedia（）获取字节流？ [英] Get a stream of bytes from navigator.mediaDevices.getUserMedia()?

问题描述

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

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??? **

    });

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

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.

推荐答案

MediaStream Recording API

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

By further investigating into MDN and the HTML 5 APIs related to Audio and Video I have found the MediaStream Recording API.

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

So, to get the byte stream (or chunks as soon as some are available) we can do this:

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中本机支持。

The MediaStream Recording API is still in Working Draft status (March 2018). Currently only natively supported in Chrome and Firefox.

Polyfill： streamproc / MediaStreamRecorder

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

这篇关于从navigator.mediaDevices.getUserMedia（）获取字节流？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！