How do I stream an openCV video to an HTML webpage

Question

I am making a robot that will have a webcam on it to provide some simple object detection. For right now, I would like to simply stream the video to a webpage hosted on the robot and be able to view it from another device. I have written a simple test script in Python ( I will eventually move to C++, my language of choice) which can get a stream from my webcam, and then do whatever I need with it from there. The problem then, is that I can't write the video to a file while the app is running, it only writes the file after I quit the script. I already have a webserver running, and I can write the basic code in HTML to host a video from a file as well, and all of that works.

To summarize: Is openCV2 in Python and/or C++ capable of livestreaming video using only openCV? If not, what library would you recommend that I try to take a CV capture object or Mat object and write it to a stream that I can then put on a webpage? In HTML, is the tag a good idea to stream video with?

Thank you very much for the advice, I can use all the pointers* I can get!

If you need something clarified/code posted/explanations further than what I have given, please ask and I will do so!

Answer 1

Try to read this and this .

So basically you have to use OpenCV capture the frames and pack them into specific formats that fit the streaming protocol, then from your server use HTML5 to put it on the page. You may need to use VLC or FFMepg to pack your cv::Mat. Hope this will be helpful.

Answer 2

Under lab conditions you send full images

You seem to be under lab conditions, so there is a simplistic, yet usable solution, just stream PNG's in Base64 using Websockets. On the client side (web browser) you just receive the base64 images and directly load them into the src of an <img>. It works for lab scenarios very well, albeit slow.

Answer 3

The issue of streaming frames out of OpenCV and Python has been addressed in the following thread: Pipe raw OpenCV images to FFmpeg

This didn't work for me, but they claim it did for them.

The reason for it not working in my case seems to be that for some output frames additional bytes were added or lost, somewhere between the output to stdout in capture.py and the input to FFMPEG. Therefore, the number of bytes doesn't correspond to the number of frames. I am not sure why this is the case. I used Windows 7.

I will be curious to hear what is your experience if you try this. I also tried a modified version of capture.py using cv2, and failed for the same reasons.