javascript - 如何将嵌入式 YouTube 视频的帧(通过 iframe)写入 Canvas ？

Question

我希望能够从 YouTube 视频中的不同点(不仅仅是缩略图)提取帧，并对它们进行一些处理。我可以使用 iframe API 将视频嵌入我的网站，但我正在努力寻找一种方法将其捕获到 Canvas 上。 (如果我被迫捕获整个屏幕没关系，如果我必须更改浏览器设置以允许它也没关系。)

Answer 1

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

另一种选择是使用 Screen Capture API(Chrome、Edge 和 Firefox 支持)。查看browser compatibility information在 MDN 上。

使用此 API，您可以允许您的用户共享他的屏幕或浏览器选项卡并在 transient 视频元素上播放:

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);
}

稍后您可以在 Canvas 上绘制视频以获得 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/ .