简体   繁体   English

如何将openCV视频流式传输到HTML网页?

[英]How do I stream an openCV video to an HTML webpage?

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. 我在Python中编写了一个简单的测试脚本(我最终将转向C ++,我选择的语言),它可以从我的网络摄像头获取流,然后从那里做任何我需要的。 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. 我已经运行了一个网络服务器,我可以用HTML编写基本代码来托管文件中的视频,所有这些都可以。

To summarize: Is openCV2 in Python and/or C++ capable of livestreaming video using only openCV? 总结一下:Python和/或C ++中的openCV2是否能够仅使用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? 如果没有,你会建议我尝试使用CV捕获对象或Mat对象并将其写入我可以放在网页上的流中的库? In HTML, is the tag a good idea to stream video with? 在HTML中,标签是流媒体视频的好主意吗?

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! 如果您需要澄清/代码发布/解释比我给出的更多,请询问,我会这样做!

The issue of streaming frames out of OpenCV and Python has been addressed in the following thread: Pipe raw OpenCV images to FFmpeg 以下线程解决了OpenCV和Python之外的流帧问题:将原始OpenCV图像管道传输到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. 它在我的情况下不起作用的原因似乎是对于某些输出帧,添加或丢失了额外的字节,介于capture.py的输出到stdout和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. 我使用的是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. 我还尝试使用cv2修改了capture.py版本,但由于同样的原因失败了。

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. 所以基本上你必须使用OpenCV捕获帧并将它们打包成适合流协议的特定格式,然后从你的服务器使用HTML5将它放在页面上。 You may need to use VLC or FFMepg to pack your cv::Mat. 您可能需要使用VLC或FFMepg来打包您的cv :: Mat。 Hope this will be helpful. 希望这会有所帮助。

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. 您似乎处于实验室条件下,因此有一个简单但可用的解决方案,只需使用Websockets在Base64中流式传输PNG。 On the client side (web browser) you just receive the base64 images and directly load them into the src of an <img> . 在客户端(Web浏览器),您只需接收base64图像并直接将它们加载到<img>src中。 It works for lab scenarios very well, albeit slow. 它非常适用于实验室场景,虽然速度很慢。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM