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.

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.

• javascript
• html
• webrtc

• I was exactly looking for this. Have you experimented with this more? e.g. sending the audio/video bytes to the server and then transmitting to the other device. So that it works like VoIP (similar to WebRTC)? We are looking to implement the VoIP using our custom server, possibly without WebRTC. – iammilind Commented Mar 26, 2019 at 14:32
• @iammilind Not yet, I was just down the standard WebRTC path. Post your own experience in the future here if you made some interesting discovering. – Dachstein Commented Mar 27, 2019 at 8:35
• Did you figure that out by any chance? – Pepa Zdepa Commented May 11, 2024 at 8:08

1 Answer 1

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