Stream a canvas session sending chunks to host server WHILE the session is going on

CONTEXT : Record a LONG canvas session.

I CAN DO NOW : using navigator.mediaDevices connect a webcam to a canvas, the user hit "take photo" => then that photo is sent to host server to save it.

WHAT I WANT : "record" a longer session where in the HTML there is sliders to add some html effects.... and that long session be recorded to saved it in the host server WHILE the session is being done (sending smaller chunks instead of waiting the session to finish).

PRECISION : I emphasize on WHILE because when I search about it I find stuff about recording a session (canvas) then (ONLY when the user hit stop, it can be sent to the host server.....)

it's ok for small sessions (1 min, 2 min), but what about 1 hour, 2 hours, etc ????

I would like : that when the user begins the session (hit start), then it starts to live send chunks while the session is still going on.

is it possible ?

is there a javascript library that could give me a head start ?

Solution

It sounds like the MediaRecorder is what you're looking for. It's meant to record and encode audio/video content.

You could either use the timeslice parameter when calling start() or call requestData() manually to trigger dataavailable events which will emit what has been recorded so far (since the last dataavailable event).

const mediaRecorder = new MediaRecorder(YOUR_STREAM);

mediaRecorder.ondataavailable = ({ data }) => {
    // The data property should be a Blob with encoded media.
};

// This will trigger a dataavailable event every second.
mediaRecorder.start(1000);

// This will trigger a single dataavailable event.
mediaRecorder.requestData();