A media element such as a HTML5 video tag can be recorded with the Media Stream Recording API. A straightforward example is provided here by the helpful people at Mozilla:
https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element
Passing a timeslice argument to MediaRecorder‘s start() method causes the callback function supplied to ondataavailable to be called during recording at (approximately) the requested interval.
You might think this should be perfect for doing something fun with the video stream in real time, right?
Stream those blobs to a server backend and let ffmpeg decode or transcode them in real-time, for example?
Apparently not. Fun, it seems, is not allowed. The only thing the “canonical” examples out there do, including the Mozilla one linked above, is to append the incoming blobs to an array of blobs, and then only do anything with that array after recording has finished. Neither real-time, nor fun at all:
let recordedChunks: blob[] = [];
recorder.ondataavailable = event => recordedChunks.push(event.data);
But I could be wrong of course…
- Is there any way of making sense of the recorded chunk blobs in a standalone way?
- And can it be done in a standard-compliant way without relying on the
internal minutiae of how each browser out there has decided to
implement this recording API? - Or is it maybe better to ignore the Media Stream Recording API
altogether, and use a different method to upload video in a way that
can be interpreted in real-time?
BTW, I know it’s possible to capture VideoFrames in real-time and upload those as individual images (WEBP or JPEG) via OffscreenCanvas’ convertToBlob() method, but this seems sub-optimal in terms of overall compression and processing efficiency to me.
(It’s summer 2024 and similar -albeit poorly phrased- questions seem to have been asked on SO for several years now, but none of them have ever seemed to received a real answer that wasn’t handwavey nonsense.)