前端截图的跨界突破：screen capture api
虽然前端中盛行 HTML-to-Canvas 的截图方案，但如果您希望直接截屏，无需将 HTML 转成 Canvas，那么不妨了解一下 Screen Capture API。
此 API 允许您捕获屏幕流，从而实现类似于 Windows 截图工具的截屏体验。不过，使用该 API 需要用户的同意。
兼容性：
不幸的是，Screen Capture API 的兼容性并不理想：
立即学习“前端免费学习笔记（深入）”；
- 移动端基本不可用
- PC 端中，仅 Chrome 和 Safari 支持
- Firefox 不支持
以下图片展示了该 API 的兼容性情况：
[图片来源：责编截图]
使用方法：
- 请求屏幕捕获权限
- 创建 MediaRecorder 对象并捕获屏幕流
- 捕获到的媒体流可以转换为图像或视频
示例代码：
async function startScreenCapture() {
const mediaStream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: false,
});
const mediaRecorder = new MediaRecorder(mediaStream);
mediaRecorder.start();
const chunks = [];
mediaRecorder.ondataavailable = (e) => {
chunks.push(e.data);
};
mediaRecorder.onstop = () => {
const videoBlob = new Blob(chunks, { type: "video/webm" });
const imageUrl = URL.createObjectURL(videoBlob);
const img = new Image();
img.src = imageUrl;
document.body.appendChild(img);
};
} 
