MediaRecorder's Webm blobs produce a broken video

Question

I'm trying to emit webm Blobs (Base64-encoded and generated by MediaRecorder) to my Phoenix backend via WS, where I Base64-decode them and append them to a file. What I end up with is a defective webm video, I can see the first frame when I open it in a player, but it's somewhat pixelated, the colors are off etc. The video length doesn't exist and when I try to diagnose the errors with ffmpeg, it says:

[h264 @ 0x7fcbd3804200] decode_slice_header error
[h264 @ 0x7fcbd3804200] no frame!
[h264 @ 0x7fcbd3804200] non-existing PPS 0 referenced
(repeated many times)

I'm not sure where I'm making an error (or if I'm making one), here's my short client-side code:

const mediaStream = await navigator.mediaDevices.getUserMedia({ audio:true, video: true });
const options = {
  audioBitsPerSecond: 128000,
  videoBitsPerSecond: 2500000,
  mimeType: 'video/webm'
}
const mediaRecorder = new MediaRecorder(mediaStream,options);
mediaRecorder.ondataavailable = ((e) => {
  var reader = new window.FileReader();
  reader.readAsDataURL(e.data);
  reader.onloadend = (() => {
    base64data = reader.result;
    topic.push('video_feed', {data: base64data});
  })
})
mediaRecorder.start(1500);

My backend Elixir code responsible for file IO and Base64 decoding:

{:ok, io} = File.open("some_file.webm", [:binary, :append]) # This part is triggered once
# Everything below is triggered upon receiving a blob (feed is the base64data object from 
# clientside code above)
"data:video/x-matroska;codecs=avc1,opus;base64," <> base64_bit = feed
decode_res = Base.decode64(base64_bit)
case decode_res do
  :error -> some_error_handling_code
  {:ok, data} -> io |> IO.binwrite(data)
end
{:noreply, state}

Am I messing up the file IO somehow ? I'm suspecting that I'm somehow missing some headers or file metadata which media players require.

What is `io` here? From reading the docs on `binwrite` it seems like if `io` is in unicode mode for some reason you might get the wrong thing written. — Paweł Obrok, Apr 28 '20 at 23:54
@PawełObrok It's defined a few lines prior (first line of the backend code posted here), it's an `io_device` in binary mode. — Milan Velebit, Apr 29 '20 at 10:54

Milan Velebit · Accepted Answer · 2023-08-28T09:15:03.220

Alright, after 2 days of digging and debugging the webm files, I realized this was a client-side issue (code-related).

There was a race condition where I closed the socket from clientside right after invoking mediaRecorder.stop(). This was a mistake as I forgot that a final event is always emitted in that case with the remainder of the data (the chunk between the last emission time and the time of stopping the recorder). That event was never sent as I immediately closed my tab programmatically (wise, I know) so my video was malformed. I had some other code-related issues but none this big.

Make sure that you receive that final event, something along the lines of:

topic.push('feed', {data: base64data})
  .receive('ok', () => {
    // MR state will become inactive as soon as you call .stop() method
    if (mediaRecorder.state === 'inactive') {
      x.push('that_was_the_final_chunk', {}).receive('ok' => {
        nowWeCanSafelyTerminate();
      })
    }
  })
}

MediaRecorder's Webm blobs produce a broken video

1 Answers1