我可以通过 getDisplayMedia 捕获单个 HTML div 吗？答案

【问题标题】：Can I capture a single HTML div via getDisplayMedia?我可以通过 getDisplayMedia 捕获单个 HTML div 吗？
【发布时间】：2021-08-02 14:55:47
【问题描述】：

我正在研究屏幕捕获 API，并为此创建了一些小项目。我的问题是，我可以捕获自定义 HTML div 而不是捕获选项卡、窗口或屏幕吗？

这是我用来截屏的代码部分。

    captureStream = await navigator.mediaDevices.getDisplayMedia();
    const video = document.createElement("video");
    video.id = "vid";
    addVideoStream(video, captureStream);

谢谢！

【问题讨论】：

标签： javascript node.js webrtc screen-capture

【解决方案1】：

我不相信有这样的选择，但我认为你可以通过这样做来实现：

获取视频流
获取元素在 DOM 中的位置和尺寸。
仅将视频的一部分渲染到 <canvas>，裁剪为第 1 步和第 2 步中的值：ctx.drawImage(video, domX, domY, domWidth, domHeight, 0, 0, domWidth, domHeight);

您应该能够使用像素值，但以百分比计算值可能会在视频流被下采样的情况下具有优势，尽管我认为任何浏览器都不会这样做。

您需要与用户沟通如何选择要捕获的正确标签。如果您希望他们捕获您的网页，但他们最终捕获了整个屏幕或不同的标签，您会得到意想不到的结果。

【讨论】：

谢谢。我们可以将它用于任何 div 或 iframe，还是仅适用于视频对象？另外，在我们这样做之前，用户代理是否会先请求权限？
所有用户代理都要求用户首先允许桌面截屏。事实上，在 Mac OS 上，用户甚至可能需要在允许网页本身之前将其浏览器列入白名单！捕获<div>或<iframe>是不支持，但有一些库，如模拟它的 HTML2Canvas。他们会读取您的 HTML 和 CSS 并自行渲染，这是一个尽力而为的副本，而不是实际的屏幕截图。
是的，你是对的。这是一个皇家 PITA，尽管我们每次都必须请求许可，即使是相同的元素，尤其是因为它来自用户手势。