如何将嵌入的YouTube视频(通过iframe)框架写入画布？

Question

我希望能够从YouTube视频中的各个点(不仅仅是缩略图)中提取帧,并对它们进行一些处理.我可以使用iframe API在我的网站中嵌入视频,但我很难找到将其捕获到画布的方法.(如果我被迫捕获整个屏幕,那就没关系了,如果我必须更改浏览器设置以允许它,那就没关系.)

Answer 1

一种选择是编写浏览器扩展.但我猜你会想避免这种情况.

另一种选择是使用Screen Capture API(Chrome,Edge和Firefox支持).查看MDN上的浏览器兼容性信息.

使用此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/.