Recherche avancée

Sur d’autres sites (7408)

• Gaps when recording using MediaRecorder API(audio/webm opus)

  9 août 2018, par Jack Juiceson

  ----- UPDATE HAS BEEN ADDED BELOW -----

  I have an issue with MediaRecorder API (https://www.w3.org/TR/mediastream-recording/#mediarecorder-api).

  I’m using it to record the speech from the web page(Chrome was used in this case) and save it as chunks.
  I need to be able to play it while and after it is recorded, so it’s important to keep those chunks.

  Here is the code which is recording data :

  navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function(stream) {
 recorder = new MediaRecorder(stream, { mimeType: 'audio/webm; codecs="opus"' })
 recorder.ondataavailable = function(e) {
   // Read blob from `e.data`, decode64 and send to sever;
 }
 recorder.start(1000)
})

  The issue is that the WebM file which I get when I concatenate all the parts is corrupted(rarely) !. I can play it as WebM, but when I try to convert it(ffmpeg) to something else, it gives me a file with shifted timings.

  For example. I’m trying to convert a file which has duration 00:36:27.78 to wav, but I get a file with duration 00:36:26.04, which is 1.74s less.

  At the beginning of file - the audio is the same, but after about 10min WebM file plays with a small delay.

  After some research, I found out that it also does not play correctly with the browser’s MediaSource API, which I use for playing the chunks. I tried 2 ways of playing those chunks :

  In a case when I just merge all the parts into a single blob - it works fine.
  In case when I add them via the sourceBuffer object, it has some gaps (i can see them by inspecting buffered property).
  697.196 - 697.528 ( 330ms)
  996.198 - 996.754 ( 550ms)
  1597.16 - 1597.531 ( 370ms)
  1896.893 - 1897.183 ( 290ms)

  Those gaps are 1.55s in total and they are exactly in the places where the desync between wav & webm files start. Unfortunately, the file where it is reproducible cannot be shared because it’s customer’s private data and I was not able to reproduce such issue on different media yet.

  What can be the cause for such an issue ?

  ----- UPDATE -----
  I was able to reproduce the issue on https://jsfiddle.net/96uj34nf/4/

  In order to see the problem, click on the "Print buffer zones" button and it will display time ranges. You can see that there are two gaps :
  0 - 136.349, 141.388 - 195.439, 197.57 - 198.589

  1. 136.349 - 141.388
  2. 195.439 - 197.57

  So, as you can see there are 5 and 2 second gaps. Would be happy if someone could shed some light on why it is happening or how to avoid this issue.

  Thank you

• Updated(reproducible) - Gaps when recording using MediaRecorder API(audio/webm opus)

  25 mars 2019, par Jack Juiceson

  ----- UPDATE HAS BEEN ADDED BELOW -----

  I have an issue with MediaRecorder API (https://www.w3.org/TR/mediastream-recording/#mediarecorder-api).

  I’m using it to record the speech from the web page(Chrome was used in this case) and save it as chunks.
  I need to be able to play it while and after it is recorded, so it’s important to keep those chunks.

  Here is the code which is recording data :

  navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function(stream) {
 recorder = new MediaRecorder(stream, { mimeType: 'audio/webm; codecs="opus"' })
 recorder.ondataavailable = function(e) {
   // Read blob from `e.data`, decode64 and send to sever;
 }
 recorder.start(1000)
})

  The issue is that the WebM file which I get when I concatenate all the parts is corrupted(rarely) !. I can play it as WebM, but when I try to convert it(ffmpeg) to something else, it gives me a file with shifted timings.

  For example. I’m trying to convert a file which has duration 00:36:27.78 to wav, but I get a file with duration 00:36:26.04, which is 1.74s less.

  At the beginning of file - the audio is the same, but after about 10min WebM file plays with a small delay.

  After some research, I found out that it also does not play correctly with the browser’s MediaSource API, which I use for playing the chunks. I tried 2 ways of playing those chunks :

  In a case when I just merge all the parts into a single blob - it works fine.
  In case when I add them via the sourceBuffer object, it has some gaps (i can see them by inspecting buffered property).
  697.196 - 697.528 ( 330ms)
  996.198 - 996.754 ( 550ms)
  1597.16 - 1597.531 ( 370ms)
  1896.893 - 1897.183 ( 290ms)

  Those gaps are 1.55s in total and they are exactly in the places where the desync between wav & webm files start. Unfortunately, the file where it is reproducible cannot be shared because it’s customer’s private data and I was not able to reproduce such issue on different media yet.

  What can be the cause for such an issue ?

  ----- UPDATE -----
  I was able to reproduce the issue on https://jsfiddle.net/96uj34nf/4/

  In order to see the problem, click on the "Print buffer zones" button and it will display time ranges. You can see that there are two gaps :
  0 - 136.349, 141.388 - 195.439, 197.57 - 198.589

  1. 136.349 - 141.388
  2. 195.439 - 197.57

  So, as you can see there are 5 and 2 second gaps. Would be happy if someone could shed some light on why it is happening or how to avoid this issue.

  Thank you

• FFMPEG - How to wait until all blobs are written before finishing ffmpeg process when getting them from media recorder API

  7 novembre 2020, par Caio Nakai

  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..");
  });