用于显示MJPEG流的跨浏览器解决方案

时间:2011-03-11 05:38:42

标签: streaming mjpeg ip-camera multiple-browsers

是否有一种轻量级,免费且可靠的方式在跨浏览器环境中显示MJPEG?我正在尝试在我正在开发的网站上显示来自Axis 2120 IP摄像头的MJPEG流,并且我发现这在当前版本的Firefox中非常可靠。然而,经过一些测试后我发现IE,Opera和Chrome都有不同程度的麻烦(没有Mac访问,所以我不确定Safari)。 Internet Explorer不支持MJPEG,根本不起作用。在发送初始GET之后,Opera需要10-15秒才能显示任何内容。 Chrome可以完美运行,直到隐藏包含<div>标记的<img>,然后再次显示。

作为参考,我使用<img>标签来显示流,如下所示:

<img src="http://my.ip.addr/axis-cgi/mjpg/video.cgi/?resolution=352x240" alt="real-time video feed" />

我考虑使用re-broadcasting server收集MJPEG流并即时转码,但这个解决方案似乎太难看了。那里有更好的建议吗?

2 个答案:

答案 0 :(得分:10)

几个月前我刚刚提出解决方案。它是跨平台的,不需要第三方插件,如Flash或Java。

基本上,它是一个node.js代理,它解析m-jpeg边界并以定义的间隔提供图像。

https://github.com/rodowi/Paparazzo.js

分叉

答案 1 :(得分:5)

这是一个基于Java applet的解决方案,可以用于任何浏览器(或者只是那些不支持MJPEG的浏览器):http://www.charliemouse.com/code/cambozola/

对于MJPEG的其他错误,我发现在尝试删除'img'标记之前,应该将'img'标记的'src'属性设置为除MJPEG之外的其他内容。例如:

<img src="#" />

如果你不这样做,Firefox会继续下载MJPEG流,即使它不应该。