Javascript 如何使用MediaRecorder将画布录制为与其他视频完全相同的持续时间？
我有一个持续时间为9200毫秒的视频和一个显示用户网络摄像头视频的画布。我的目标是在播放原始视频的同时录制网络摄像头视频，以创建与Javascript 如何使用MediaRecorder将画布录制为与其他视频完全相同的持续时间？,javascript,html5-video,mediarecorder,web-mediarecorder,Javascript,Html5 Video,Mediarecorder,Web Mediarecorder,我有一个持续时间为9200毫秒的视频和一个显示用户网络摄像头视频的画布。我的目标是在播放原始视频的同时录制网络摄像头视频，以创建与MediaRecorder具有完全相同持续时间的输出blob，但似乎总是获得更长长度的视频（通常约9400ms） 我已经发现，如果我在持续时间上的差异，并在输出视频中提前跳过这个量，它基本上会与原始视频同步，但我希望不必使用这种方法。知道了这一点，我认为区别在于HTML5视频的play（）函数是异步的，但即使在内部调用recorder.start（），那么play（）
MediaRecorderplay（）内部调用recorder.start（）
，那么play（）
承诺之后的play（）
仍然会导致持续时间更长的输出blob
我将start（）
MediaRecorderplay（）requestAnimationFramestop（）MediaRecorder.start（）requestAnimationFrameMediaRecorderMediaRecorderstart（）stop（）onstartonstopconst stream=makeEmptyStream（）；
const rec=新媒体记录器（流）；
rec.onstart=（evt）=>{console.log（“启动时使用了%sms”，performance.now（）-begin）；}；
const begin=performance.now（）；
rec.start（）；
设置超时（（）=>{
rec.onstop=（evt）=>{console.log（“停止%sms”，performance.now（）-begin）；}；
const begin=performance.now（）；
建议停止（）；
}, 1000 );
函数makeEmptyStream（）{
const canvas=document.createElement（'canvas'）；
canvas.getContext（'2d'）.fillRect（0,0,1,1）；
返回canvas.captureStream（）；
}start（）stop（）onstartonstopconst stream=makeEmptyStream（）；
const rec=新媒体记录器（流）；
rec.onstart=（evt）=>{console.log（“启动时使用了%sms”，performance.now（）-begin）；}；
const begin=performance.now（）；
rec.start（）；
设置超时（（）=>{
rec.onstop=（evt）=>{console.log（“停止%sms”，performance.now（）-begin）；}；
const begin=performance.now（）；
建议停止（）；
}, 1000 );
函数makeEmptyStream（）{
const canvas=document.createElement（'canvas'）；
canvas.getContext（'2d'）.fillRect（0,0,1,1）；
返回canvas.captureStream（）；
}{video:{frameRate:{max:1}}}流.getVideoTracks（）[0].getCapabilities（）.frameRate{video:{frameRate:{max:1}}}流.getVideoTracks（）[0].getCapabilities（）.frameRate