如何截取整个客户端计算机的屏幕截图，而不仅仅是 Web 浏览器或来自 javascript 的网页
How to take screen shot of entire client machine not only web browser or a web page from javascript
我想将屏幕截图捕获为图像而不是视频。我找到了这样做的方法，但它们要么捕获当前网页，要么从整个屏幕重新编码视频。我找到 This library 来录制屏幕。这是在做类似于 WebRTC 所做的事情。我的要求是从我用普通 javascript 编写的 Web 应用程序中以编程方式获取整个屏幕的图像。有什么办法可以做到吗？
谢谢
从您通过媒体捕获和流获得的 MediaStream API，您可以创建一个 ImageCapture instance and call its grabFrame() 方法来生成一个 ImageBitmap，您将能够在 <canvas>.
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 的浏览器才能访问此理想路径。
对于其他浏览器，您需要将 HTMLVideoElement 的 srcObject 设置为 MediaStream，并在 2D 上下文中将 HTMLVideoElement 设置为 drawImage。
我想将屏幕截图捕获为图像而不是视频。我找到了这样做的方法，但它们要么捕获当前网页，要么从整个屏幕重新编码视频。我找到 This library 来录制屏幕。这是在做类似于 WebRTC 所做的事情。我的要求是从我用普通 javascript 编写的 Web 应用程序中以编程方式获取整个屏幕的图像。有什么办法可以做到吗？ 谢谢
从您通过媒体捕获和流获得的 MediaStream API，您可以创建一个 ImageCapture instance and call its grabFrame() 方法来生成一个 ImageBitmap，您将能够在 <canvas>.
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 的浏览器才能访问此理想路径。
对于其他浏览器，您需要将 HTMLVideoElement 的 srcObject 设置为 MediaStream，并在 2D 上下文中将 HTMLVideoElement 设置为 drawImage。