如何在Angular应用程序中正确嵌入MJPEG视频 - Chrome,Edge,其他浏览器



Hello StackOverflow proffesionals!

起初 - 我不是程序员,所以请善待我:-(

我有一个用 Angular - JavaScript 编写的应用程序。我有网络服务器(Nginx(,它将网络摄像头视频流式传输为地址的MJPEG流../网络摄像头 .我需要的是将类似 MJPEG 流的东西嵌入到我的应用程序中的页面中,以供用户查看。当我添加一个简单的../webcam 可单击链接,视频仅在某些浏览器中播放,但例如 Edge 要求保存文件,它不会播放视频。我什至尝试做一个 iframe(实际代码(,但仍然是一样的 - 移动 Edge 询问将文件保存在哪里:-(

是否有任何选项如何将 MJPEG 流嵌入页面,以便 Edge 不会要求下载/保存,但会播放视频流?

页面现在是以下代码: https://vicon-security.zendesk.com/hc/en-us/articles/210734683-How-can-I-re-stream-MJPEG-from-my-camera-to-my-website-

GitHub 上整个应用程序的代码: https://github.com/romanicak/growduino-client

尝试使用视频标签而不是 Iframe。它可以帮助您解决问题。

<video data-title="Live stream">
<source type="application/x-mpegurl"
src="your URL goes here...">
</video>

使用代码进行测试,并告诉我们您的测试结果。

最新更新