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
– tomriddle_1234, Commented May 20, 2017 at 5:13
Why have you not tried to implement a solution to your Question? See stackoverflow.com/help/how-to-ask, stackoverflow.com/help/mcve — guest271314
– guest271314, Commented May 20, 2017 at 5:24
I figured it out, it is possible to do it with low level xmlHTTPRequest with responseText trick. — tomriddle_1234
– tomriddle_1234, Commented Jun 1, 2017 at 15:00

tomriddle_1234 · Accepted Answer · 2017-06-06 14:09:36Z

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

answered Jun 6, 2017 at 14:09

tomriddle_1234

3,2236 gold badges44 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related