Reputation: 4282
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
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