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

Question

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

Answer 1

一个选项是编写浏览器扩展程序。但是我想你想避免。

另一个选项是使用屏幕捕获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/。