Javascript 如何生成用于媒体源API的webm视频初始化段

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

根据我需要的“初始化段”在文件的开头

---

如何在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>

var appendID=“123”；
功能开启（e）{
var-video=e.target；
var headers=GetStreamHeaders（）；
if（headers==null）{
//获取标头时出错。向流结束发送错误信号。
video.sourceEndOfStream（htmlmedialelement.EOS\u NETWORK\u ERR）；
}
sourceAddId（appendID，'video/webm；codecs=“vorbis，vp8”）；
//附加流标题（即WebM标题、信息和跟踪元素）
sourceAppend（appendID，headers）；
//附加一些初始媒体数据。
sourceAppend（appendID，GetNextCluster（））；
}
查询功能（e）{
var-video=e.target；
//中止当前段追加。
video.sourceAbort（appendID）；
//通知集群加载代码开始在
//新的播放位置。
请参阅Toclusterat（video.currentTime）；
//从新播放位置附加簇。
sourceAppend（appendID，GetNextCluster（））；
sourceAppend（appendID，GetNextCluster（））；
}
职能进展（e）{
var-video=e.target；
if（video.sourceState==video.SOURCE\u结束）
返回；
//若我们已经用完了流数据，那个么信号流结束。
如果（！HaveMoreClusters（））{
video.sourceEndOfStream（HTMLMEDIALEMENT.EOS\u无错误）；
返回；
}
sourceAppend（appendID，GetNextCluster（））；
}
var video=document.getElementById（'v'）；
video.addEventListener（'sourceopen'，onOpen）；
video.addEventListener（“正在查找”，正在查找）；
video.addEventListener（'progress'，onProgress）；
var video=document.getElementById（'v'）；
video.src=video.mediaSourceURL；

那么如何实现“GetStreamHeaders”功能呢？请注意，我的问题是关于通过javascript生成头的@nvcvn，不可能使用客户端Javascript对GetStreamHeaders进行这样的定制，所以您需要依赖服务器端的东西。您可以使用PHP访问wiki链接，但这并没有回答问题。问题是根据生成一个WebM初始化段，而您的答案与此无关。您指的是两种不同的方法来执行似乎是同一任务的操作。但是，使用xhr，您可以设置xhr.setRequestHeaders（“Range Bytes”int Bytes），其中xhr是对webm文件的新服务器请求，以字节为单位的范围决定了标头信息的确切字节数，使用该范围，媒体src指向的blob对象应使用适当的标头信息进行初始化，请记住，这是针对一个流（或文件），如果要记录流并另存为一个更大的文件，则应生成一个新的头文件？hello@nvcnvn！这个话题有进展吗？我将vp8流生成到udp端口，将我的小服务器生成到udp->WebSocket。我也不知道我应该交付什么样的初始化片段以及如何生成它。@zarkone，我发现这是我项目的“死胡同”，MediaRecoder没有将视频分割成可以播放的很多部分，它只是简单地将视频分割成一部分字节。无法按媒体源重播这些部分