Javascript 为什么MediaRecorder在Firefox上显示为空白，而在Chrome上显示为空白？
我已经编写了一个小型javascript应用程序，它使用鼠标在画布上画线，捕获流，然后创建视频。创建该视频后，它会将其附加到Javascript 为什么MediaRecorder在Firefox上显示为空白，而在Chrome上显示为空白？,javascript,html,Javascript,Html,我已经编写了一个小型javascript应用程序，它使用鼠标在画布上画线，捕获流，然后创建视频。创建该视频后，它会将其附加到标记上 当我在Chrome上运行时，它运行得非常好 当我在Firefox上运行它时，它会返回一个完全黑色的视频。不过，视频的时间长度是正确的 更奇怪的是，当我从Chrome上保存视频时（通过右键单击并“将视频另存为…”），它保存的文件显示为完全黑色 我试图在绘图时对视频进行流式传输，以查看问题是否与.captureStream（）函数有关。不过，这很好。我的直觉告诉我问题出
.captureStream（）MediaRecorder.isTypeSupported（`video/webm；codecs=vp8`）
文件
帆布{
边框：1px纯黑；
光标：十字线；
}
.帆布架{
宽度：40%；
浮动：左；
显示：内联块；
}
.视频支架{
宽度：40%；
浮动：左；
显示：内联块；
}
保存画布
开始录音
停止录音
var canvas=document.querySelector（“canvas#mycanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.lineWidth=5；
ctx.lineCap=“圆形”；
ctx.shadowBlur=1；//有助于处理锯齿状边缘
ctx.shadowColor=“黑色”；
//绘图逻辑
鼠标={x:0，y:0，moveflag:false}；
addEventListener（“mousedown”，e=>draw（“mousedown”，e），false）；
addEventListener（“mousemove”，e=>draw（“mousemove”，e），false）；
addEventListener（“mouseup”，e=>draw（“mouseup”，e），false）；
功能图（res，e）{
如果（res==“鼠标向下”）{
//开始画画
mouse.moveflag=true；
}else if（res==“mousemove”&&mouse.moveflag）{
mouse.x=e.offsetX；//这可以补偿画布稍微偏移
mouse.y=e.offsetY；
ctx.lineTo（mouse.x，mouse.y）；
ctx.stroke（）；
}else if（res==“mouseup”&鼠标）{
mouse.moveflag=false；
ctx.beginPath（）；
}否则{
返回；
}
}
//保存逻辑
saveButton=document.querySelector（“保存按钮”）；
saveButton.onclick=e=>{
e、 预防默认值（）；
console.log（“已保存！”）；
var image=canvas.toDataURL（“image/png”）；
//window.location.href=image；//重定向到保存的图像
log（“Image，base64编码=>”，Image）；
};
//视频逻辑
const videoTag=document.querySelector（“video#myvideo”）；
const streamVideo=document.querySelector（“视频#流视频”）；
const startButton=document.querySelector（“按钮#开始按钮”）；
const stopButton=document.querySelector（“按钮#停止按钮”）；
const stream=canvas.captureStream（）；
streamVideo.srcObject=流；
var mediaRecorder=新的mediaRecorder（流{
mimeType:`video/webm；编解码器=vp8`
});
让chunks=[]；
mediaRecorder.ondataavailable=e=>{
日志（“分块数据”）；
推送（如数据）；
};
mediaRecorder.onstop=e=>{
console.log（“停止mediaRecorder”）；
var blob=新blob（块{
类型：`video/webm；编解码器=vp8`
});
//创建本地URL并将视频设置为该URL
//全黑了！
const videoURL=window.URL.createObjectURL（blob）；
videoTag.src=videoURL；
videoTag.play（）；
};
startButton.onclick=e=>{
e、 预防默认值（）；
mediaRecorder.start（）；
console.log（“开始录制”）；
};
stopButton.onclick=e=>{
e、 预防默认值（）；
mediaRecorder.stop（）；
控制台日志（“停止记录”）；
};