Javascript 将视频块播放到画布中

如何将视频块播放到画布中

HTML:

JS:

另一个用例

setInterval(function(){
   if(frames.length > 0) {
      var webmBlob = Whammy.fromImageArray(frames, frameRate); // webm video
      // render webm video blob into Canvas
   }
}, 1000);

您的MediaRecorder的ondataavailable输出不是视频块，它只是视频文件的一块。除了第一个，它不能单独播放，您需要将它与之前录制的所有块连接起来

const chunks = [];
recorder.ondatavailable = (evt) => {
  chunks.push( evt.data ); // store all the chunks
  play( new Blob( chunks ) ); // concatenate all the chunks to as single Blob
};

然后，要播放用作Blob的视频，必须创建指向该Blob的URL，这是使用URL.createObjectURL方法完成的

现在，要在画布上绘制它，必须通过一个元素，在该元素上将src设置为我们之前创建的blob:URI：

异步=>{ const source=document.createElement“video”； source.crossOrigin=匿名； source.mute=true； source.src=https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm; 控制台。日志“正在加载，请稍候”； 等待消息来源； const player=document.createElement“video”； player.mute=true； const output=document.getElementById“output”； const ctx=output.getContext'2d'； const stream=source.captureStream&&source.captureStream | | source.mozCaptureStream； const recorder=新的MediaRecorder流； 常量块=[]； recorder.ondataavailable=evt=>{ 控制台。清除； chunks.push evt.data； 播放新的Blob块； }; 控制台。清除； 控制台。日志“缓冲，请等待5s”； recorder.start 5000；//每个区块5秒 source.addEventListener“结束”，evt=>recorder.stop； 函数播放blob{ 如果玩家暂停{ 绘图=真； player.addEventListener'loadedmetadata'，evt=>{ output.width=player.videoWidth； output.height=player.videoHeight； 请求动画帧循环； }，{once:true}； } player.src=URL.createObjectURL blob； player.play； } 函数环{ ctx.drawImage播放器，0,0； 如果！播放器暂停{ 请求动画帧循环； } } }.catch.console.error；

---

这不是一个视频，而是一个视频块，你需要将它与其他块连接起来，并通过视频播放它。从字面上看，所有关于网络上MediaRecorder的例子都展示了如何做到这一点。但是如果你想把它传递到画布上，为什么还要麻烦使用MediaRecorder呢？改为播放原始流…@kaido原因是我试图解决的低延迟录制和播放问题：。。。然后让我们转到另一个问题，这个问题实际上只是X-Y问题中的一个Z。我相信这是一个有效的问题，如何在画布上播放视频块，这显然是很难的，当我尝试这样做时，它很难不，一点也不难，你只需要学习你要做的基本知识，但是很好，如果你真的想，我会发布一个答案，但那真的不是你应该做的！我已经有了这个代码，事实上，类似于我有一个视频元素作为源，然后通过requestAnimationFrame将其绘制到画布上，所以我已经解决了这个问题，因此我能够从画布上捕获帧并将其存储在Whammy中；我已经更新了我的帖子。这个whammy方法返回一个实际的webm视频本身，我测试手动下载并播放。我想在画布中播放blob的原因是测试生成的blob是否以正确的FPS播放，等等。请再次阅读答案。我一直在测试你的代码，我发现你的解决方案存在问题。它假定webm是一个静态资源。在我的例子中，webm blob是在setInterval内以1秒的间隔动态生成的

const chunks = [];
recorder.ondatavailable = (evt) => {
  chunks.push( evt.data ); // store all the chunks
  play( new Blob( chunks ) ); // concatenate all the chunks to as single Blob
};