CODEWITHSUNDEEP
javascripthtmlwebrtc
Dachstein
Dachstein

Reputation: 4282

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

    });

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.

Upvotes: 16

Views: 9652

Answers (1)

Dachstein
Dachstein

Reputation: 4282

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);
    });

Browser Support:

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

Polyfill: streamproc/MediaStreamRecorder

Further reading: Record to an audio file

Upvotes: 11

Related Questions