一种选择是编写浏览器扩展。但我猜你会想避免这种情况。
另一种选择是使用屏幕捕获 API(Chrome、Edge 和 Firefox 支持)。查看浏览器兼容性信息 https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API#Browser_compatibility在 MDN 上。
使用此 API,您可以允许用户共享其屏幕或浏览器选项卡并在瞬态视频元素上播放:
const videoElem = document.createElement('video');
videoElem.autoplay = true;
const displayMediaOptions = {
video: {
cursor: "never"
},
audio: false
};
async function startCapture() {
videoElem.srcObject = await navigator.mediaDevices
.getDisplayMedia(displayMediaOptions);
}
稍后您可以在画布上绘制视频以获得 Base64 帧(基本上是屏幕截图)。
function getScreenshotInBase64() {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let [w, h] = [videoElem.videoWidth, videoElem.videoHeight];
canvas.width = w;
canvas.height = h;
context.drawImage(videoElem, 0, 0, w, h);
return canvas.toDataURL();
}
这种方法的局限性:
- 用户可以选择不同的选项卡/应用程序/屏幕,或者页面可以向下滚动并且视频不可见。
- 您获得的不仅仅是视频(但根据您的描述,这不一定是坏事)。
- 浏览器支持非常稀缺(如果您考虑较旧的浏览器或移动浏览器)。
- 用户必须允许您这样做(基本上每次您想要开始共享时=在您的情况下录制视频)。
我使用上述代码片段构建了一个小型 JsFiddle,它在开始屏幕共享(通过单击开始按钮)后 2 秒获得 Base64 打印屏幕:https://jsfiddle.net/75Lmbf2o/ https://jsfiddle.net/75Lmbf2o/.