0

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..");
  });
Caio Nakai
  • 11
  • 1

0 Answers0