如何截取整個客戶端機器的屏幕截圖，不僅是 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的圖像。