如何捕获和流式传输 iframe 的视频？-解网

问：

在一个网站上，我有一个加载我的游戏（来自另一个域）的 iframe，我想捕获并流式传输它。我怎样才能做到这一点？当用户与此 iframe 交互时，仅显示此 iframe 的内容，而不是整个屏幕或页面。

这是我尝试过的：

从 Chromium/Mozilla 浏览器 API 使用，添加到 HTTP 标头和属性是我认为可以解决问题的方法，但发生的事情是它只允许您使用屏幕捕获 API，它似乎不支持将 iframe 内容捕获为视频。getDisplayMedia()feature-policy:allow

其次，我尝试使用iframe，但是当我调用iframe时没有显示。allow='displaycapture'getDisplayUserMedia()

我最后一次绝望的尝试是一个浏览器扩展程序，它可以以某种方式将 iframe 内容捕获为视频流，但这似乎很困难，因为它不像 iframe 屏幕输出在 chromium 引擎深处的某个地方作为二进制文件进行流式传输。

JavaScript iframe

不幸的是，仍然没有好的 API......如您所见，gDUM 仅呈现选项卡或全屏。在Firefox中，如果用户选择了正确的选项卡，并且iframe显示在屏幕上，则可以使用&co.约束来破解某些内容，以便仅捕获iframe。但是，如果您的游戏是在画布上制作的，那么仅流式传输此画布内容就足够了？这可以很容易地完成。viewportOffsetX

0赞 Saroshi Kir 2/21/2022

你是这个意思吗？developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

1赞 Kaiido 2/21/2022

不，我说的是Firefox确实为gDUM公开的一些非标准约束，您可以通过执行以下操作来查看这些约束。await navigator.mediaDevices.getSupportedConstraints()

0赞 Brad 11/12/2023

@KJ 这个问题无关紧要。而且，至少对于我的用例，我正在研究自有的同源 iframe。基本上，不是使用 CanvasCaptureStream，而是希望 IframeCaptureStream。理想情况下，屏幕外也是如此。在我的应用程序中，我今天在服务器端这样做，但客户端将是理想的，而不必涉及画布。浏览器可以捕获带有...如果可以以某种方式调用它来捕获 iframe，而用户不必选择正确的内容，那就太好了。getDisplayMedia()

答：

3赞 aarvinr 11/17/2023 #1

出于安全原因，无法记录来自第三方来源的嵌入页面。您需要将其放在同一域下，在这种情况下，您可以使用或添加 HTTP 标头。除此之外，你不走运。<iframe allow='displaycapture'/>Permissions-Policy: display-capture=(self)

当您启动时，用户将收到一个提示，询问要共享的内容，他们自己将不得不选择当前屏幕。还可以使用 preferCurrentTab 选项来帮助指导用户。不幸的是，没有办法直接选择要在代码中共享的窗口，用户必须自己完成。getDisplayMedia()

0赞 Brad 11/19/2023

好的，所以只允许选择当前选项卡的 API......那还不存在吗？尚未实施？（我知道我读过关于它的讨论......找不到它......

0赞 aarvinr 11/19/2023

我没有意识到这一点，但我想你必须在没有它的情况下进行管理，直到它被实施。不幸的是，这是一个非常难以实现的功能，在大多数情况下，最好将其留给 Twitch 等专用流媒体平台。但是，如果您真的愿意，这是您能做的最好的事情。

0赞 Brad 11/19/2023

找到了：docs.google.com/presentation/d/...

-1赞 Website360 11/18/2023 #2

您可以使用 JavaScript 和 HTML5 视频 API 捕获和流式传输 iframe 的视频。以下是如何实现此目的的基本概述：

首先，识别 HTML 中的 iframe：

<iframe id="myIframe" src="url_to_your_video" width="560" height="315"></iframe>

使用 JavaScript，您可以访问 iframe 的内容并捕获其中的视频元素：

// Access the iframe
var iframe = document.getElementById('myIframe');

// Access the document within the iframe
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

// Access the video element within the iframe's document
var videoElement = innerDoc.getElementById('videoId');  // Replace 'videoId' with the actual ID of your video element

访问视频元素后，可以使用 HTML5 视频 API 对其进行流式传输：

// Create a new video element on the main page to stream the captured video
var streamingVideo = document.createElement('video');
document.body.appendChild(streamingVideo);

// Set the source of the streaming video to be same as captured from iframe
streamingVideo.src = videoElement.src;
streamingVideo.play();

此代码将使用 JavaScript 和 HTML5 API 有效地从 iframe 捕获和流式传输视频。

如何捕获和流式传输 iframe 的视频？

How can I capture and stream video of an iframe?

评论

评论

评论