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)'

关于此错误，这里有很多问题，但似乎都无法解决我的问题，也没有关于视频流的问题。一些解决方案是在尝试绘制到画布上时未加载图像，但是由于在流启动后几秒钟按下了按钮，我确定必须加载图像？

也许我做错了方法，并且有更好的方法从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

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

1 个答案: