显示MJPEG流的跨浏览器解决方案
有没有一种轻量级、免费且可靠的方式在跨浏览器环境中显示 MJPEG?我正在尝试显示来自 Axis 的 MJPEG 流我正在开发的网站上有 2120 IP 摄像头,我发现这在当前版本的 Firefox 中相当可靠。然而,经过一些测试,我发现 IE、Opera 和 Chrome 在执行此操作时都存在不同程度的问题(无法访问 Mac,所以我不确定 Safari)。 Internet Explorer 不支持 MJPEG,根本无法工作。在发送初始 GET 后,Opera 实际上需要 10-15 秒才能显示任何内容。 Chrome 可以正常工作,直到包含 标记的
被隐藏然后再次显示。作为参考,我使用 标签来显示流,如下所示:
<img src="http://my.ip.addr/axis-cgi/mjpg/video.cgi/?resolution=352x240" alt="real-time video feed" />
我考虑过使用 重播服务器来收集MJPEG流并即时转码,但这个解决方案看起来太丑陋了。还有更好的建议吗?
Is there a lightweight, free, and reliable way to display MJPEG in a cross-browser environment? I'm trying to display an MJPEG stream from an Axis 2120 IP camera on a site that I'm developing, and I've found that this is quite reliable in current versions of Firefox. However, after some testing I've found that IE, Opera and Chrome all have varying degrees of trouble doing this (no Mac access, so I'm not sure about Safari). Internet Explorer has no support for MJPEG and doesn't work at all. Opera takes literally 10-15 seconds to display anything after the initial GET was sent. Chrome works perfectly until the <div>
that contains the <img>
tag is hidden and then shown again.
For reference, I'm using an <img>
tag to display the stream like so:
<img src="http://my.ip.addr/axis-cgi/mjpg/video.cgi/?resolution=352x240" alt="real-time video feed" />
I've considered using a re-broadcasting server to collect the MJPEG stream and transcode it on-the-fly, but this solution seems too ugly. Are there any better suggestions out there?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
几个月前我刚刚提出了一个解决方案。它是跨平台的,不需要Flash或Java等第三方插件。
基本上,它是一个 node.js 代理,可以解析 m-jpeg 边界并以定义的时间间隔提供图像。
在 https://github.com/rodowi/Paparazzo.js 分叉它
I've just came out with a solution a couple of months ago. It's cross-platform, and doesn't need third-party plugins such as Flash or Java.
Basically, it's a node.js proxy which parses m-jpeg boundaries and delivers images in a defined interval.
Fork it at https://github.com/rodowi/Paparazzo.js
这是一个基于 Java 小程序的解决方案,您可以将其用于任何浏览器(或仅不支持 MJPEG 的浏览器): http://www.charliemouse.com/code/cambozola/
至于 MJPEG 的其他错误,我发现您应该将 'img' 标签的 'src' 属性设置为某个值除了 MJPEG 之外,在尝试删除“img”标签之前。示例:
如果您不这样做,Firefox 将继续下载 MJPEG 流,尽管它不应该这样做。
Here is a Java applet based solution that you can use for any browser (or just the ones that don't support MJPEG): http://www.charliemouse.com/code/cambozola/
As far as other bugs go with MJPEG, I have found that you should set the 'src' attribute of the 'img' tag to something besides the MJPEG before you try to remove 'img' tag. Example:
If you don't do that, Firefox will continue to download MJPEG stream even though it shouldn't.