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

【问题标题】：Cross-browser solution for displaying MJPEG stream显示 MJPEG 流的跨浏览器解决方案
【发布时间】：2011-07-13 06:23:45
【问题描述】：

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

作为参考，我使用<img> 标记来显示流，如下所示：

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

我考虑过使用re-broadcasting server 来收集MJPEG 流并即时对其进行转码，但这种解决方案似乎太难看了。有没有更好的建议？

【问题讨论】：

非常简单的解决方案，它不需要任何额外的服务器（如 Node.js）：github.com/blueimp/mjpeg-server 它“包裹”在 ffmpeg 周围，然后它只需要打开（默认情况下）你的本地主机： 9000 在浏览器中。对我来说就像一个魅力。

标签： streaming mjpeg ip-camera multiple-browsers

【解决方案1】：

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

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

在https://github.com/rodowi/Paparazzo.js叉它

【讨论】：

【解决方案2】：

这是一个基于 Java 小程序的解决方案，可用于任何浏览器（或仅用于不支持 MJPEG 的浏览器）：http://www.charliemouse.com/code/cambozola/

就其他与 MJPEG 相关的错误而言，我发现在尝试删除“img”标签之前，您应该将“img”标签的“src”属性设置为 MJPEG 之外的其他内容。示例：

<img src="#" />

如果您不这样做，Firefox 将继续下载 MJPEG 流，即使它不应该这样做。

【讨论】：

谢谢泰迪。我还注意到 Firefox 在不应该的时候下载了流。你的建议很有效。
我知道这个答案是旧的，但我会问，希望你还在这里徘徊。将 src 设置为 # 会停止 mjpeg 流而不进行硬刷新？
@moeiscool 它早在 2011 年就可以使用。您可能需要仔细检查网络检查器的网络选项卡，以确保一切正常。