如何生成 webm 视频的初始化片段以与媒体源 API 一起使用

How to generate Initialization Segment of webm video to use with Media Source API

本文关键字：媒体 API 一起 webm 何生成 视频 片段 初始化      更新时间：2023-09-26

我正在构建一个小型应用程序，该应用程序使用MediaRecoder API将重新编码的视频从网络摄像头中分离出来，并将所有部分上传到服务器。
我看到使用媒体源 API，我需要播放第一部分，然后播放任何其他部分。

根据 http://www.w3.org/TR/media-source/#examples 我需要文件开头的"初始化段"。

如何在 JS 中生成 WebM 的"初始化段"，以便我可以扮演我选择的任何部分。有没有库？（我对 WebM 字节流格式一无所知）

需要使用媒体源扩展

请参考以下示例

<script>
  var appendID = "123";
  function onOpen(e) {
    var video = e.target;
    var headers = GetStreamHeaders();
    if (headers == null) {
      // Error fetching headers. Signal end of stream with an error.
      video.sourceEndOfStream(HTMLMediaElement.EOS_NETWORK_ERR);
    }
    video.sourceAddId(appendID, 'video/webm; codecs="vorbis,vp8"');
    // Append the stream headers (i.e. WebM Header, Info, and Tracks elements)
    video.sourceAppend(appendID, headers);
    // Append some initial media data.
    video.sourceAppend(appendID, GetNextCluster());
  }
  function onSeeking(e) {
    var video = e.target;
    // Abort current segment append.
    video.sourceAbort(appendID);
    // Notify the cluster loading code to start fetching data at the
    // new playback position.
    SeekToClusterAt(video.currentTime);
    // Append clusters from the new playback position.
    video.sourceAppend(appendID, GetNextCluster());
    video.sourceAppend(appendID, GetNextCluster());
  }
  function onProgress(e) {
    var video = e.target;
    if (video.sourceState == video.SOURCE_ENDED)
      return;
    // If we have run out of stream data, then signal end of stream.
    if (!HaveMoreClusters()) {
      video.sourceEndOfStream(HTMLMediaElement.EOS_NO_ERROR);
      return;
    }
    video.sourceAppend(appendID, GetNextCluster());
  }
  var video = document.getElementById('v');
  video.addEventListener('sourceopen', onOpen);
  video.addEventListener('seeking', onSeeking);
  video.addEventListener('progress', onProgress);
</script>

<video id="v" autoplay> </video>
<script>
  var video = document.getElementById('v');
  video.src = video.mediaSourceURL;
</script>
相关文章：