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

How do I stream an openCV video to an HTML webpage?

本文关键字：传输 HTML 网页 openCV 视频      更新时间：2023-10-16

我正在制作一个机器人，上面有一个网络摄像头，可以提供一些简单的物体检测。目前，我只想将视频流式传输到机器人上的网页上，并能够从另一台设备上观看。我用Python写了一个简单的测试脚本（我最终会转到C++，我选择的语言），它可以从我的网络摄像头中获取流，然后用它做我需要的任何事情。那么，问题是，我不能在应用程序运行时将视频写入文件，它只能在我退出脚本后写入文件。我已经有一个网络服务器在运行，我可以用HTML编写基本代码来托管文件中的视频，所有这些都可以。

总结如下：Python和/或C++中的openCV2是否能够仅使用openCV进行视频直播？如果不是，你建议我使用哪个库来获取CV捕获对象或Mat对象，并将其写入流中，然后放在网页上？在HTML中，使用标签流式传输视频是个好主意吗？

非常感谢你的建议，我可以使用我能得到的所有指针！

如果你需要澄清/发布代码/解释比我给出的内容更深入，请询问，我会这样做的！

OpenCV和Python流式传输帧的问题已在以下线程中解决：将原始OpenCV图像管道传输到FFmpeg

这对我不起作用，但他们声称这对他们起了作用。

在我的情况下，它不起作用的原因似乎是，对于一些输出帧，在capture.py中stdout的输出和FFMPEG的输入之间添加或丢失了额外的字节。因此，字节数与帧数不对应。我不知道为什么会这样。我用的是Windows7。

如果你尝试一下，我很想听听你的经历。我还尝试了使用cv2的capture.py的修改版本，但由于同样的原因失败了。

在实验室条件下，您可以发送完整的图像

您似乎处于实验室条件下，所以有一个简单但可用的解决方案，只需使用Websockets在Base64中流式传输PNG即可。在客户端（web浏览器），您只需接收base64图像，然后直接将它们加载到<img>的src中。它在实验室场景中工作得很好，尽管速度很慢。

试着阅读这个和这个。

因此，基本上，你必须使用OpenCV捕获帧，并将其打包为符合流媒体协议的特定格式，然后从你的服务器使用HTML5将其放在页面上。您可能需要使用VLC或FFMepg来包装您的简历：：Mat。希望这会有所帮助。

我可能有点晚了，但由于我在StackOverflow中没有找到一个完全更新的C++和mjpeg解决方案，我想写一个新的答案。

现在有一些好的、简单的库可以用于C++（C++mjpg流到html）中的任务

https://github.com/nadjieb/cpp-mjpeg-streamer

https://github.com/jacksonliam/mjpg-streamer

https://github.com/codewithpassion/mjpg-streamer/tree/master/mjpg-streamer

我发现第一个非常简单。您需要在系统中安装CMake和make。

git clone https://github.com/nadjieb/cpp-mjpeg-streamer.git;
cd cpp-mjpeg-streamer;
mkdir build && cd build;
cmake ../;
make;
sudo make install;
  • 请确保安装了正确版本的OpenCV

现在，写入拖缆：

mjpeg_server.cc

#include <opencv2/opencv.hpp>
#include <nadjieb/mjpeg_streamer.hpp>
// for convenience
using MJPEGStreamer = nadjieb::MJPEGStreamer;
int main()
{
    cv::VideoCapture cap;
    cap.open("demo.mp4"); 
    if (!cap.isOpened())
    {
        std::cerr << "VideoCapture not openedn";
        exit(EXIT_FAILURE);
    }
    std::vector<int> params = {cv::IMWRITE_JPEG_QUALITY, 90};
    MJPEGStreamer streamer;
    // By default 1 worker is used for streaming
    // if you want to use 4 workers:
    //      streamer.start(8080, 4);
    streamer.start(8000);
    // Visit /shutdown or another defined target to stop the loop and graceful shutdown
    while (streamer.isAlive())
    {
        cv::Mat frame;
        cap >> frame;
        if (frame.empty())
        {
            std::cerr << "frame not grabbedn";
            //continue;
            exit(EXIT_FAILURE);
        }
        // http://localhost:8080/bgr
        std::vector<uchar> buff_bgr;
        cv::imencode(".jpg", frame, buff_bgr, params);
        streamer.publish("/bgr", std::string(buff_bgr.begin(), buff_bgr.end()));
        cv::Mat hsv;
        cv::cvtColor(frame, hsv, cv::COLOR_BGR2HSV);
        // http://localhost:8080/hsv
        std::vector<uchar> buff_hsv;
        cv::imencode(".jpg", hsv, buff_hsv, params);
        streamer.publish("/hsv", std::string(buff_hsv.begin(), buff_hsv.end()));
        // std::cout<< "published" << std::endl;
    }
    streamer.stop();
}

写入CMakeLists.txt

cmake_minimum_required(VERSION 3.1)
project(mjpeg_streamer CXX)
find_package(OpenCV 4.2 REQUIRED)
find_package(nadjieb_mjpeg_streamer REQUIRED)
include_directories(${OpenCV_INCLUDE_DIRS})
add_executable(stream_test
  "mjpeg_server.cc")
target_compile_features(stream_test PRIVATE cxx_std_11)
target_link_libraries(stream_test PRIVATE nadjieb_mjpeg_streamer::nadjieb_mjpeg_streamer
                     ${OpenCV_LIBS})


| --- mjpeg_server.cc
| --- CMakeLists.txt
| --- ...
| --- build  
      | --- demo.mp4
      | --- ...

现在，我们可以建造拖缆了。

mkdir build && cd build;
cmake ../;
make;
./stream_test

现在，如果转到"http://ip_address:port/bgr"或"http://ip_address:port/hsv"，您应该能够看到流。在我的例子中，ip=192.168.1.7/本地主机，端口=8000。

如果你想用另一台服务器获取流

index.html

<html>
  <body>
    <img src="http://localhost:8000/bgr">
    <img src="http://localhost:8000/hsv">
  </body>
</html>

serve.py

import http.server
import socketserver
class MyHttpRequestHandler(http.server.SimpleHTTPRequestHandler):
    def do_GET(self):
        if self.path == '/':
            self.path = 'index.html'
        return http.server.SimpleHTTPRequestHandler.do_GET(self)
# Create an object of the above class
handler_object = MyHttpRequestHandler
PORT = 8080
my_server = socketserver.TCPServer(("", PORT), handler_object)
# Star the server
my_server.serve_forever()

python3 serve.py

最后，尽管它非常简单，但并不安全。

相关文章：