How To Display Motion Jpeg Binary Data Stream With Angular/ionic/js?

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

Solution 1:

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

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.

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.

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