我正在尝试使用 Javascript 中的 MediaStream API 获取浏览器的屏幕录像。我当前使用原始 Javascript 的方法非常适用于 Firefox(它为我提供了大约 10 秒的屏幕视频并下载它),但在 Chrome 中,它给了我一个单帧视频 - 大约半秒的镜头。
我的原始代码
var videoEl = document.querySelector('video');
var stream = videoEl.srcObject;
var track = stream.getVideoTracks()[0];
var finalStream = new MediaStream();
finalStream.addTrack(track);
this.recorder = new MediaRecorder(finalStream);
this.recorder.ondataavailable = function(e) {
var link = document.createElement('a');
link.setAttribute('href', window.URL.createObjectURL(e.data));
link.setAttribute('download', 'video_' + Math.floor((Math.random() * 999999)) + '.mp4');
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
this.recorder.start();
setTimeout(() => this.recorder.stop(), 10000);
我也尝试过使用 javascript Blob API,但是当我使用这种方法时,Chrome 的行为和以前一样,Firefox 要么正确记录 10 秒,要么抛出TypeError: stream is null
斑点法
var videoEl = document.querySelector('video');
var stream = videoEl.srcObject;
var track = stream.getVideoTracks()[0];
var finalStream = new MediaStream();
finalStream.addTrack(track);
this.recorder = new MediaRecorder(finalStream);
var chunks = [];
this.recorder.ondataavailable = function(e) {
chunks.push(e.data);
}
this.recorder.onstop = function(e) {
var link = document.createElement('a');
link.setAttribute('href', window.URL.createObjectURL(new Blob(chunks)));
link.setAttribute('download', 'video_' + Math.floor((Math.random() * 999999)) + '.mp4');
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
this.recorder.start();
setTimeout(() => {this.recorder.stop()}, 10000);
我希望它会记录大约 10 秒,然后下载文件。
我在 Firefox 中得到了正确的结果,但在 Chrome 中我得到了不到一秒的镜头。