如何截取整个客户端机器的屏幕截图，不仅是 web 浏览器或 javascript 的 web 页面

Question

我想将屏幕截图捕获到图像而不是视频。 我找到了这样做的方法，但他们要么捕获当前的 web 页面，要么从整个屏幕重新编码视频。 我找到了这个库来记录屏幕。 这与 WebRTC 所做的类似。 我的要求是从我用普通 javascript 编写的 web 应用程序中以编程方式拍摄整个屏幕的图像。 有什么办法可以做到吗？ 谢谢

Answer 1

通过媒体捕获和流 API 从 MediaStream 中，您可以创建一个ImageCapture实例并调用它的grabFrame()方法，该方法将生成一个您可以在<canvas>上绘制的 ImageBitmap。

const stream = await navigator.mediaDevices.getDisplayMedia();
const track = stream.getVideoTracks()[0];
const capture = new ImageCapture(track);
// when you need the still image
const bitmap = await capture.grabFrame();
// if you want a Blob version
const canvas = document.createElement("canvas");
canvas.width = bitmap.width;
canvas.height = bitmap.height;
canvas.getContext("bitmaprenderer").transferFromImageBitmap(bitmap);
const blob = await new Promise((res) => canvas.toBlob(res));

现在，我应该注意到这个理想的路径目前只能由基于 Chromium 的浏览器访问。
对于其他浏览器，您需要将srcObject的 srcObject 设置为 MediaStream，并在 2D 上下文中绘制该drawImage的图像。