MediaRecorder 的 Webm blob 产生损坏的视频

Question

我正在尝试通过 WS 将 webm Blobs（Base64 编码并由 MediaRecorder 生成）发送到我的 Phoenix 后端，我在那里对它们进行 Base64 解码并附加他们到一个文件。我最终得到的是一个有缺陷的 webm 视频，当我在播放器中打开它时我可以看到第一帧，但它有点像素化，颜色不正确等。视频长度不存在，当我尝试诊断ffmpeg 错误，它说：

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

我不确定我哪里出错了（或者我是否出错），这是我的简短 client-side 代码：

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);

我负责文件 IO 和 Base64 解码的后端 Elixir 代码：

{: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}

我是不是把文件 IO 弄乱了？我怀疑我以某种方式丢失了一些 headers 或媒体播放器需要的文件元数据。

Answer 1

好吧，经过 2 天的挖掘和调试 webm 文件，我意识到这是一个客户端问题（与代码相关）。

我在调用 mediaRecorder.stop() 后立即从客户端关闭了套接字，这是一个竞争条件。这是一个错误，因为我忘记了 在这种情况下，最终事件总是与数据的其余部分一起发出 （最后一次发射时间和停止记录器时间之间的块）。该事件从未发送过，因为我立即以编程方式关闭了我的标签（明智的，我知道）所以我的视频格式不正确。我还有其他一些与代码相关的问题，但 none 这么大。

确保您收到最后的事件，大致如下：

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_go_wild', {}).receive('ok' => {
        nowWeCanSurelySafelyTerminate();
      })
    }
  })
}

MediaRecorder 的 Webm blob 产生损坏的视频

MediaRecorder's Webm blobs produce a broken video

base64

elixir

webm

web-mediarecorder