Javascript Electron 如何从视频源截取屏幕截图

Question

我正在使用 Electron Desktop Capturer https://github.com/electron/electron/blob/master/docs/api/desktop-capturer.md定期捕获此流的屏幕截图。我正在使用这段代码，但出于某种原因我收到了一个错误:

function takeScr(stream) {
  const video = localStream.getVideoTracks()[0];
  console.log(video)
  const canvas = document.createElement('canvas');
  canvas.getContext("2d").drawImage(video, 0, 0, 300, 300, 0, 0, 300, 300);
}

目前，我只是在流媒体开始播放后按下一个按钮来激活截屏功能。控制台日志显示视频轨道没有输出问题:

MediaStreamTrack {kind: "video", id: "7a19a94f-6077-4e3d-b534-03d138b3f300", label: "Screen", enabled: true, muted: false, …}

但是 canvas.getContext 函数抛出错误:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

这里有很多关于这个错误的问题，但似乎没有一个能解决我的问题，也没有一个是关于视频流的。一些解决方案是在尝试绘制到 Canvas 时图像未加载，但由于我在流开始几秒钟后按下按钮，我确定它必须加载？

也许我做错了，有更好的方法从 Desktop Capturer 截取视频源的屏幕截图？

Answer 1

我在 following question 中找到了一个示例关于从视频中拍摄快照。

你可以这样做:

document.getElementById("snap").addEventListener("click", function() {
  snap();
});

// Get handles on the video and canvas elements
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
// Get a handle on the 2d context of the canvas element
var context = canvas.getContext('2d');
// Define some vars required later
var w, h, ratio;

// Add a listener to wait for the 'loadedmetadata' state so the video's dimensions can be read
video.addEventListener('loadedmetadata', function() {
  // Calculate the ratio of the video's width to height
  ratio = video.videoWidth / video.videoHeight;
  // Define the required width as 100 pixels smaller than the actual video's width
  w = video.videoWidth - 100;
  // Calculate the height based on the video's width and the ratio
  h = parseInt(w / ratio, 10);
  // Set the canvas width and height to the values just calculated
  canvas.width = w;
  canvas.height = h;
}, false);

// Takes a snapshot of the video
function snap() {
  // Define the size of the rectangle that will be filled (basically the entire element)
  context.fillRect(0, 0, w, h);
  // Grab the image from the video
  context.drawImage(video, 0, 0, w, h);
}

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<canvas width="364" height="204"></canvas>

<button id="snap">Take screenshot</button>

JSFiddle