Javascript 使用captureStream和mediaRecorder进行画布录制

如何从多个画布记录流？ 也就是说，当我将一个画布更改为另一个画布时，它必须记录活动画布并继续第一个画布

我是这样做的：

stream = canvas.captureStream();
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10);

function handleDataAvailable(event) {
  recordedBlobs.push(event.data);
}

---

但是当添加另一个流时，只记录第一部分。我正在将录制的数据推送到全局阵列。

在当前的实现中，您无法切换MediaRecorder流的录制曲目

当您尝试这样做时，Firefox会将您扔到控制台中

MediaRecorder此时不支持录制同一类型的多个曲目

当Chrome保持沉默并录制黑色帧而不是第二首曲目时

var canvases=Array.prototype.slice.call（document.querySelectorAll（'canvas'）， recordingStream， 电流=0， chunks=[]， 录音机， 切换间隔； 函数startRecording（）{ //首先收集两个画布流并提取视频轨迹 让流=画布.map（（c）=>{ 返回c.captureStream（30） }); 让tracks=streams.map（（s）=>{ 返回s.getVideoTracks（）[0] }); //创建包含两个曲目的新媒体流 //我们不使用addTrack，因为https://bugzilla.mozilla.org/show_bug.cgi?id=1296531 recordingStream='MediaStream'在窗口中&&new MediaStream（曲目）| | new WebKit MediaStream（曲目）； //初始化MediaRecorder 记录器=新媒体记录器（recordingStream）； recorder.ondataavailable=saveChunks； recorder.onstop=exportVideo； recorder.onerror=（e）=>{ console.log（e.name） }; recorder.start（）； stopRec.disabled=false； //每200ms将画布切换为记录器 switchInterval=setInterval（switchStream，200）； } //将其中一个曲目切换为静音，然后切换另一个曲目 函数switchStream（）{ 电流=+！电流； var tracks=recordingStream.getVideoTracks（）； 跟踪[当前]。已启用=真； //评论，因为FF似乎还不支持canvasTrack的方法 //即使在chrome中也不起作用 //跟踪[current].requestFrame（）； 磁道[+！当前].enabled=false； } 函数存储块（evt）{ //存储我们的视频块 如果（evt.data.size>0）{ 推送（evt.data）； } } stopRec.onclick=函数stopRecording（）{ if（recorder.state！=='recording'）{ this.disabled=true； 返回； } //停止一切 recorder.stop（）；//这将触发exportVideo clearInterval（切换间隔）； 停止画布动画（）； a、 style.display=b.style.display='none'； this.parentNode.innerHTML=“”； } 函数exportVideo（）{ //我们什么都有 vid.src=URL.createObjectURL（新Blob（块））； } var stopCanvasAnim=（函数initCanvasDrawing（）{ //一些精美的图画 var aCtx=画布[0]。getContext（'2d'）， bCtx=画布[1]。getContext（'2d'）； var objects=[]， w=画布[0]。宽度， h=画布[0]。高度； aCtx.fillStyle=bCtx.fillStyle='象牙'； 对于（变量i=0；i<100；i++）{ objects.push({ 角度：Math.random（）*360， x:100+（数学随机（）*w/2）， y:100+（数学随机（）*h/2）， 半径：10+（数学随机（）*40）， 速度：1+Math.random（）*20 }); } var-stop=false； var draw=function（）{ aCtx.fillRect（0,0,w,h）； bCtx.fillRect（0,0,w,h）； 对于（变量n=0；n<100；n++）{ 变量实体=对象[n]， velY=Math.cos（entity.angle*Math.PI/180）*entity.speed， velX=Math.sin（entity.angle*Math.PI/180）*entity.speed； 实体x+=velX； 实体y-=y； aCtx.drawImage（imgA，entity.x，entity.y，entity.radius，entity.radius）； bCtx.drawImage（imgB，entity.x，entity.y，entity.radius，entity.radius）； entity.angle++； } 如果（！停止）{ 请求动画帧（绘制）； } } var imgA=新图像（）； var imgB=新图像（）； imgA.onload=函数（）{ draw（）； startRecording（）； }; imgA.crossOrigin=imgB.crossOrigin='anonymous'； imgA.src=”https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png"; imgB.src=”https://dl.dropboxusercontent.com/s/rumlhyme6s5f8pt/ABC.png"; 返回函数（）{ 停止=真； }; })();

停止录音

您是否也可以显示可用的

处理数据

？顺便说一句，您正在使用哪个浏览器？对于chrome，你可以替换当前录制的视频流，FF，但是创建一个新的录像机并在同一个最终Blob中推送新的块应该是可行的。chrome，像这样吗？stream.addTrack（track）是完全压缩的：

stream.removeTrack（stream.getVideoTracks（）[0]）；stream.addTrack（otherCanvas.captureStream（fps.getVideoTracks（）[0]）

但我从未尝试过，我会马上做。Han，我只花了40分钟尝试做这件事，既没有保存所有块，也没有从中创建一个Blob，也没有动态地更改曲目，都不管用。。。你有我的+1，如果我有多一点时间，我会进一步调查。我很好奇。我目前只能在一个数组中保存不同的blob，但无法将它们组合起来……是的，这就是问题所在。我找了很多