这比看起来简单。可以使用此答案中的代码来实现将视频的静态快照保存为png的缺失部分。完整的代码如下：
const v = document.getElementById("v");
const b = document.getElementById("b");
const i = document.getElementById("i");
navigator.mediaDevices.getDisplayMedia({
audio: false
}).then((r) => {
console.log(r);
v.srcObject = r;
}).catch((e) => {
console.log("this must be run in a secure context. Stack snippets (rightfully) refuse to run this.");
});
b.onclick = () => {
// take screenshot
// from /a/44325898/15472
let scale = 1;
const canvas = document.createElement("canvas");
canvas.width = v.clientWidth * scale;
canvas.height = v.clientHeight * scale;
canvas.getContext('2d').drawImage(v, 0, 0,
canvas.width, canvas.height);
i.src = canvas.toDataURL();
// you can send i.src here to a server
// stop video
let tracks = v.srcObject.getTracks();
tracks.forEach(track => track.stop());
v.srcObject = null;
}
#v,
#i {
width: 400;
height: 300;
}
#v {
border: 1px solid blue;
}
#i {
border: 1px solid green;
}
take screenshot
请注意，StackOverflow不允许询问屏幕抓取权限，因此此代码不在此处运行。
