问题
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 ?
回答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
来源：https://stackoverflow.com/questions/44081667/how-to-display-motion-jpeg-binary-data-stream-with-angular-ionic-js