如何使用Angular/Ionic/JS显示Motion JPEG二进制数据流? [英] How to display Motion JPEG binary data stream with Angular/Ionic/JS?

问题描述

我正在为设备编写应用程序，该设备将接收POST请求，并发送回multipart/x-mixed-replace二进制数据流.我必须在应用程序主页的某一部分上显示此类流.

I'm coding an app for a device, such device will receive a POST request, and send back a multipart/x-mixed-replace binary data stream. I must display such stream on one section of my app's home page.

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

I searched through, there's very limited resource on such case. So far, I found that if the Motion JPEG is sent from a specific URL, then maybe it's possible to use iframe/img tag to display it. However, my case is different, it seems I have to parse such binary stream then create an Observable to alter the img element on an image html tag once I get a frame from the Motion JPEG binary stream.

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

Is there a simpler way to do that ? I found https://gist.github.com/legege/5301477, can I use this ?

推荐答案

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

I actually solved this by myself, and learned a lot in the research.

核心思想是使用xmlHTTP请求来获取motionJPEG数据，

The core idea is to use a xmlHTTP request to fetch the motionJPEG data, It's about how to transfer binary data.

然后使用网络工作者处理二进制数据.

Then use a web worker to process the binary data.

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

And finally use canvas to draw the image on ionic page.

由于前端JS在图像加载方面的延迟，因此在我的实现中，这种motionJPEG预览当前不会那么流畅.但这现在可以用JS实现.

Due to the front end JS delay on image loading, such motionJPEG preview would not be so smooth currently in my implementation. But this is possible now with JS.

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

Please check github https://github.com/makoto-unity/ThetaWifiStreaming

这篇关于如何使用Angular/Ionic/JS显示Motion JPEG二进制数据流?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！