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

【问题标题】：How to display Motion JPEG binary data stream with Angular/Ionic/JS?如何使用 Angular/Ionic/JS 显示 Motion JPEG 二进制数据流？
【发布时间】：2017-05-20 03:38:53
【问题描述】：

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

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

有没有更简单的方法来做到这一点？我找到了https://gist.github.com/legege/5301477，我可以用这个吗？

【问题讨论】：

您在当前实施过程中遇到了什么问题？
还没有实现这个，我在处理来自 POST 请求的响应时遇到了问题。我想我可以自己获取二进制数据，我应该用JS解析它吗？将数据拆分成帧，然后数据将帧绑定到img标签？
您为什么不尝试为您的问题实施解决方案？见stackoverflow.com/help/how-to-ask、stackoverflow.com/help/mcve
我会尝试 Node.js stream2，研究进展中。
我想通了，可以使用带有 responseText 技巧的低级 xmlHTTPRequest 来做到这一点。

标签： javascript angularjs ionic-framework streaming

【解决方案1】：

其实我自己解决了这个问题，在研究中学到了很多。

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

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

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

由于前端 JS 对图像加载的延迟，目前在我的实现中，这种motionJPEG 预览不会那么流畅。但是现在有了 JS 就可以了。

请查看githubhttps://github.com/makoto-unity/ThetaWifiStreaming

【讨论】：