我可以通过getDisplayMedia捕获单个HTML div吗?

Question

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

这是我用于捕获屏幕的代码部分。

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

谢谢！

Answer 1

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

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

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

您需要向用户传达如何选择要捕获的正确选项卡。如果您希望他们捕获您的网页，但他们最终捕获了整个屏幕或其他选项卡，您将获得意想不到的结果。