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

【问题标题】：Javascript Electron how to take screenshots from a video sourceJavascript Electron 如何从视频源中截取屏幕截图
【发布时间】：2019-05-08 09:47:26
【问题描述】：

我正在使用 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 截取视频源？

【问题讨论】：

您的脚本似乎期望您的.drawImage() 函数中的给定参数是任何给定类型。显然 localStream.getVideoTracks()[0] 不是受支持的类型。 drawImage() 是你设计的函数吗，你能展示它的定义吗？
@Barrosy drawImage() 是画布内置的函数。
您正在尝试将视频绘制为canvas 中的图像，我认为.drawImage() 不应该用于该图像。确保您尝试作为（视频）参数传递的任何内容都是给定类型的（例如，我在链接中给出的示例中的图像）。
@Barrosy 我搜索了如何从这样的视频中截取屏幕截图，它说要像这样使用画布，尽管代码与我的代码不是 100% 相同，但这不是我自己的代码。那么，你会如何从这样的视频中截取屏幕截图呢？

标签： javascript electron screenshot

【解决方案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

【讨论】：