如何使用Angular / Ionic / JS显示Motion JPEG二进制数据流?

时间:2017-05-20 03:38:53

标签: javascript angularjs ionic-framework streaming

我正在为设备编写应用程序,此类设备将收到POST请求,并发送回multipart/x-mixed-replace二进制数据流。我必须在我应用的主页的一个部分显示这样的流。

我搜索过,这种情况的资源非常有限。到目前为止,我发现如果从特定的URL发送Motion JPEG,那么也许可以使用iframe/img标签来显示它。但是,我的情况有所不同,似乎我必须解析这样的二进制流然后创建一个Observable来改变图像html标签上的img元素,一旦我从Motion JPEG二进制流中得到一个帧。

有更简单的方法吗?我找到https://gist.github.com/legege/5301477,我可以使用它吗?

1 个答案:

答案 0 :(得分:0)

我实际上是自己解决了这个问题,并在研究中学到了很多东西。

核心思想是使用xmlHTTP请求来获取motionJPEG数据It's about how to transfer binary data

然后使用Web worker处理二进制数据。

最后使用画布在离子页面上绘制图像。

由于前端JS延迟图像加载,这样的motionJPEG预览目前在我的实现中并不是那么顺利。但现在JS可以实现这一点。

请检查github https://github.com/makoto-unity/ThetaWifiStreaming