How to display Motion JPEG binary data stream with Angular/Ionic/JS?

Question

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.

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.

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

Haven't implement this yet, I 'm having issue on dealing with the response from the POST request. I think I can get the binary data itself, should I parse it with JS? Split the data into frames, then data bind the frames to img tag? — tomriddle_1234, May 20 '17 at 05:13
Why have you not tried to implement a solution to your Question? See https://stackoverflow.com/help/how-to-ask, https://stackoverflow.com/help/mcve — guest271314, May 20 '17 at 05:24
I figured it out, it is possible to do it with low level xmlHTTPRequest with responseText trick. — tomriddle_1234, Jun 01 '17 at 15:00

score 1 · Accepted Answer · answered Jun 06 '17 at 14:09

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

How to display Motion JPEG binary data stream with Angular/Ionic/JS?

1 Answers1

Linked