如何在不重新初始化每个页面上的相机的情况下保持跨页面的相机流活动？

Question

我正在开发一个网络应用程序，需要实时摄像头流才能在多个页面上保持活动状态。流显示在每个页面的顶部，但目前，每次用户导航到新页面时，相机都会停止并重新初始化。

我希望用户能够在页面之间导航，而无需重新启动相机或导致流中断。理想情况下，我更喜欢将网站转换为单页应用程序 (SPA) 以外的解决方案，但如果这是最佳选择，我愿意接受。

Web 应用程序是使用 Flask 框架和 HTML 构建的。我正在使用 OpenCV 来处理相机和图像处理。

Answer 1

“理想情况下，除了将网站转换为单页应用程序 (SPA) 之外，我更喜欢其他解决方案，但如果这是最佳选择，我愿意接受。”

您可以尝试使用

iframe

将网站作为独立于

<video>

的内容加载。

接下来，您可以使用图层同时显示两者（例如： CSS

z-index

选项）。

示例代码（单击“查看整页”以查看正确运行的解决方案）

<!-- loads and contains the website (is index.html ???) -->
<!-- puts it on layer 1 via "z-index: 1" -->
<iframe src="https://lumiere-video.github.io/" width="98%" height="700" style="z-index: 1; position: absolute; top: 0px; left: 9px">
</iframe>

<!-- loads and contains the video tag -->
<!-- puts it on layer 2 via "z-index: 2" -->
<!-- keep it always on screen via "position: sticky" -->
<video width="320" height="240" controls muted loop autoplay
style="z-index: 2; position: sticky; top: 0px; left: 0px">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>