我希望能够从YouTube视频中的各个点(不仅仅是缩略图)中提取帧,并对它们进行一些处理。我可以使用iframe API在我的网站中嵌入视频,但我很难找到将其捕获到画布的方法。 (如果我被迫捕获整个屏幕,那就没关系了,如果我必须更改浏览器设置以允许它,那就没关系。)
一种选择是编写浏览器扩展。但我猜你会想避免这种情况。
另一种选择是使用Screen Capture API(Chrome,Edge和Firefox支持)。查看MDN上的browser compatibility information。
使用此API,您可以允许用户共享其屏幕或浏览器选项卡,并在瞬态视频元素上播放:
const videoElem = document.createElement('video');
videoElem.autoplay = true;
const displayMediaOptions = {
video: {
cursor: "never"
},
audio: false
};
async function startCapture() {
videoElem.srcObject = await navigator.mediaDevices
.getDisplayMedia(displayMediaOptions);
}
稍后您可以在画布上绘制视频以获得Base64帧(基本上是屏幕截图)。
function getScreenshotInBase64() {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let [w, h] = [videoElem.videoWidth, videoElem.videoHeight];
canvas.width = w;
canvas.height = h;
context.drawImage(videoElem, 0, 0, w, h);
return canvas.toDataURL();
}
这种方法的局限性:
我用上面的片段构建了一个小的JsFiddle,在你开始屏幕共享(通过点击开始按钮)2秒后获得一个Base64打印屏幕:https://jsfiddle.net/75Lmbf2o/。