I'm using media recorder API to record a video from user's screen and sending the blobs through web socket to a nodejs server. The nodejs server is using the blobs to create a webm video file, the video is being created fine but with a delay, after the user clicks on the stop recording button it stops the media recorder api, however the server didn't finish the processing of all blobs (at least that's what I think it's happening) and then when I check the video file generated the last few seconds of the recording are missing I wonder if there's an way to solve this. Any help is appreciated :)
This is the front-end code that sends the blobs to the nodejs server
const startScreenCapture = async () => {
try {
let screenStream;
videoElem = document.getElementById("myscreen");
screenStream = await navigator.mediaDevices.getDisplayMedia(
displayMediaOptions
);
const recorderOptions = {
mimeType: "video/webm;codecs=vp9",
videoBitsPerSecond: 3 * 1024 * 1024,
};
screenMediaRecorder = new MediaRecorder(screenStream, recorderOptions);
screenMediaRecorder.start(1); // 1000 - the number of milliseconds to record into each Blob
screenMediaRecorder.ondataavailable = (event) => {
console.debug("Got blob data:", event.data);
console.log("Camera stream: ", event.data);
if (event.data && event.data.size > 0) {
socket.emit("screen_stream", event.data);
}
};
videoElem.srcObject = screenStream;
// console.log("Screen stream", screenStream);
// socket.emit("screen_stream", screenStream);
} catch (err) {
console.error("Error: " + err);
}
};
const stopCapture = (evt) => {
let tracks = videoElem.srcObject.getTracks();
tracks.forEach((track) => track.stop());
videoElem.srcObject = null;
screenMediaRecorder.stop();
socket.emit("stop_screen");
socket.close();
};
This is the nodejs back-end that handle the blobs and generates the videofile
const ffmpeg2 = child_process.spawn("ffmpeg", [
"-i",
"-",
"-c:v",
"copy",
"-c:a",
"copy",
"screen.webm",
]);
socket.on("screen_stream", (msg) => {
console.log("Writing screen blob! ");
ffmpeg2.stdin.write(msg);
});
socket.on("stop_screen", () => {
console.log("Stop recording..");
});