基于C++(QT框架)设计的网络摄像头项目(支持跨平台运行)-阿里云开发者社区

一、运行效果展示

1.1 windows系统运行效果展示

网络摄像头项目(Windows系统运行效果)

1.2 Android系统运行效果展示

网络摄像头项目(Android系统运行效果)

1.3 Linux系统运行效果展示

网络摄像头项目(Linux系统运行效果)

二、功能简介

2.1 功能介绍

这是基于C++(QT框架)设计的网络摄像头项目，本篇文章介绍的网络摄像头项目并不是采用RTMP或者RTSP推流编码的网络摄像头产品，而是采用HTTP协议推送图片流的方式，采用浏览器访问查看摄像头画面。

项目源码下载地址: https://download.csdn.net/download/xiaolong1126626497/21232910

这是软件运行截图:

这是浏览器访问截图:

项目运行的效果：

软件打开之后，先点击刷新信息，程序会扫描当前设备的摄像头和IP地址信息；并将访问的地址打印了出来，然后点击开启摄像头，界面就实时显示选择的摄像头画面。在局域网内，其他设备打开浏览器，输入下面提示的地址访问，输入用户名和密码，即可查看到摄像头画面。程序里处理浏览器的请求是采用多线程方式，可以支持多个浏览器同时访问。

代码思路

代码采用的是C++(QT框架)编写，代码本身主要是分为两个部分：

1. 绑定指定端口号，创建TCP服务器，用来响应客户端的请求(浏览器)

2. 摄像头画面采集部分，摄像头数据采集采用单独的线程，采集之后将图像传递给界面刷新显示，并将图像填充到全局缓冲区，方便客户端处理线程将图像再传递给浏览器。

每当有新的浏览器访问进来，就会单独开辟一个线程，去处理这个浏览器接下来的通信交互，浏览器断开连接之后，线程自动销毁；图像缓冲区是一个公共的缓冲区，摄像头图像采集线程向该缓冲区填充数据，与浏览器通信的线程就从这个缓冲区读取数据，采用的是条件变量+互斥锁同步访问。

项目里用到的知识点主要是摄像头采集，线程处理、网络编程，HTTP协议等知识点。

如果是搞QT开发，都可以当做入门学习参考；如果想要用其他语言实现，思路搞清楚也很容易。标准C语言。

在Linux下如果不需要界面，可以直接使用C语言完成项目效果，摄像头采集采用Linux下标准V4L2框架，线程就采用pthread_create创建，互斥锁、条件变量这些Linux都有，只要把程序思路搞清楚，实现起来还是很容易。

2.2 跨平台运行

代码是采用QT框架编写，所以支持跨平台编译运行；目前代码在Android、Linux、windows系统上都编译运行通过，达到相同效果；由于身边没有苹果设备，暂时未做测试。

不同系统间代码上还是有少许区别，代码里通过宏的方式区分了，不同的系统运行不同的部分代码。

如果要编译QT的代码在Android设备上运行，得先搭建对应的开发环境；如果不会环境搭建，可以参考下面链接。

(1). Linux(ubuntu)下搭建QT Android开发环境

https://blog.csdn.net/xiaolong1126626497/article/details/117256660

(2). windows(win10 64bit)下搭建QT Android开发环境

https://blog.csdn.net/xiaolong1126626497/article/details/117254453

(3). windows下Qt + VS2017 环境安装

https://blog.csdn.net/xiaolong1126626497/article/details/112402861

2.3 项目源码运行环境

QT版本: 5.12.6

编译器: MinGW 32

系统: Win10 Ubuntu18.04

2.4 代码运行介绍

程序运行时，需要用到一些资源文件，这些资源文件在程序的源码目录下，名称是: www。

如果是windows、Linux系统环境，需要把资源目录拷贝到程序运行的同级目录下。

如果是Android系统，这些资源文件需要在编译的时候打包进APK里，在工程目录下的Android目录里创建一个assets目录，将资源文件全部拷贝到assets目录下；程序编译的时候会自动将assets目录打包进apk，到时候Android程序运行时就可以直接去assets目录下获取资源文件。

当apk生成之后，可以解压出来看看，assets目录打包成功没有。

检查了下，打包成功的，这样Android程序运行时，访问的路径就没有问题。

2.5 Linux系统运行摄像头无法读取数据问题说明

由于我测试的环境是在虚拟机里运行ubuntu系统，要在ubuntu里访问摄像头，需要先把摄像头挂载到虚拟机，才能访问。如果打开虚拟机发现右下角托盘里摄像头图标都没有，说明托盘程序可能被360、电脑管家之类的安全软件禁止了，需要开启自动启动，重启VM虚拟机软件再测试。

直接挂载进来可能遇到摄像头打开了，但是图像无法获取的情况，这个问题可能是USB协议版本引起的。

可以在这里切换USB协议测试，我的笔记本电脑是USB3.0才可以正常使用。

三、代码分析

3.1 初始化代码(构造函数)

代码开发时，主要是针对在windows平台运行的，所有程序里很多都是偏向于windows环境的设计。

构造函数里去除了系统原窗口标题栏，自定义了自己的标题；QT隐藏标题栏之后，是不能拖动拉伸的，需要自己实现，我这里采用的是GitHUB上开源的一个示例代码实现的这部分功能，效果不错，达到了想要的效果。剩下代码里初始化了托盘系统，方便程序最小化时，隐藏在windows系统的托盘图标栏里，其他的代码就是做写基本的初始化，信号槽的连接，IP地址、摄像头信息刷新等。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //自定义标题栏
    FramelessHelper *pHelper = new FramelessHelper(this);
    setWindowFlags(Qt::FramelessWindowHint);
    pHelper->activateOn(this);  //激活当前窗体
    //pHelper->setTitleHeight(m_pTitleBar->height());  //设置窗体的标题栏高度
    pHelper->setWidgetMovable(true);  //设置窗体可移动
    pHelper->setWidgetResizable(true);  //设置窗体可缩放
   // pHelper->setRubberBandOnMove(true);  //设置橡皮筋效果-可移动
   // pHelper->setRubberBandOnResize(true);  //设置橡皮筋效果-可缩放
    /*基本设置*/
    this->setWindowIcon(QIcon(":/log.ico")); //设置图标
    this->setWindowTitle("网络摄像头");
    //打开的窗口在屏幕中间
    QDesktopWidget *widget= QApplication::desktop();
    move((widget->width()-this->width())/2,(widget->height()-this->height())/2);
    //刷新摄像头与IP地址信息
    on_pushButton_config_clicked();
    //刷新在线人数
    timer = new QTimer(this);
    connect(timer, SIGNAL(timeout()), this, SLOT(timer_update()));
    timer->start(1000);
    tray= new QSystemTrayIcon(this);//初始化托盘对象tray
    connect(tray,SIGNAL(activated(QSystemTrayIcon::ActivationReason)),this,SLOT(show_Widget(QSystemTrayIcon::ActivationReason)));
    tray->setIcon(QIcon(QPixmap(":/log.png")));//设定托盘图标，引号内是自定义的png图片路径
    tray->setToolTip("网络摄像头"); //提示文字
    restoreAction = new QAction("打开", this);
    connect(restoreAction, SIGNAL(triggered()), this, SLOT(show()));
    quitAction = new QAction("退出", this);
    connect(quitAction, SIGNAL(triggered()), qApp, SLOT(quit()));
    trayMenu = new QMenu(this);
    trayMenu->addAction(restoreAction);
    trayMenu->addSeparator();
    trayMenu->addAction(quitAction);
    tray->setContextMenu(trayMenu);
    work_class=new VideoReadThread_0;
    work_thread=new QThread;
    //启动摄像头的信号
    connect(this,SIGNAL(StartWorkThread()),work_class,SLOT(run()));
    //释放资源-释放摄像头
    connect(this,SIGNAL(Stop_VideoAudioEncode_0()),work_class,SLOT(stop()));
    //连接摄像头采集信号,在主线程实时显示视频画面
    connect(work_class,SIGNAL(VideoDataOutput(QImage)),this,SLOT(VideoDataDisplay_0(QImage)));
    //将类移动到子线程工作
    work_class->moveToThread(work_thread);
}

3.2 摄像头采集部分

摄像头采集采用的是QCamera + QVideoProbe实现。

初始化代码示例：初始化代码里完成摄像头的一些参数，捕获模式，槽函数关联等设置。

初始化代码默认设置输出的图像格式是YUYV，在windows和Linux系统上是支持的，这个可能与摄像头有关，实际需要测试调整；Android系统上只支持NV21格式，如果是Android系统上运行，要记得修改格式。

void VideoReadThread_0::Camear_Init()
{
    /*创建摄像头对象，根据选择的摄像头打开*/
    camera = new QCamera(videoaudioencode_0.camera);
    m_pProbe = new QVideoProbe;
    if(m_pProbe != nullptr)
    {
        m_pProbe->setSource(camera); // Returns true, hopefully.
        connect(m_pProbe, SIGNAL(videoFrameProbed(QVideoFrame)),this, SLOT(slotOnProbeFrame(QVideoFrame)), Qt::QueuedConnection);
    }
    else
    {
           qDebug()<<"m_pProbe == nullptr";
    }
    /*配置摄像头捕    QCamera *camera;
    QVideoProbe *m_pProbe;获模式为帧捕获模式*/
     camera->setCaptureMode(QCamera::CaptureVideo);  //如果在Linux系统下运行就这样设置
     //camera->setCaptureMode(QCamera::CaptureVideo);//如果在android系统下运行就这样设置
    /*设置摄像头的采集帧率和分辨率*/
    QCameraViewfinderSettings settings;
    settings.setPixelFormat(QVideoFrame::Format_YUYV); //设置像素格式  Android上只支持NV21格式
    settings.setResolution(QSize(VIDEO_WIDTH,VIDEO_HEIGHT)); //设置摄像头的分辨率
    camera->setViewfinderSettings(settings);
    /*启动摄像头*/
    camera->start();
}

捕获到摄像头的图像数据之后，QVideoProbe会发出videoFrameProbed信号，在关联的槽函数里完成数据处理。

处理代码如下：

void VideoReadThread_0::slotOnProbeFrame(const QVideoFrame &frame)
{
//    qDebug()<<"开始采集.";
   QVideoFrame cloneFrame(frame);
   cloneFrame.map(QAbstractVideoBuffer::ReadOnly);
//    qDebug()<<"height:"<<cloneFrame.height();
//    qDebug()<<"width:"<<cloneFrame.width();
//    qDebug()<<"bytesPerLine:"<<cloneFrame.bytesPerLine();
//    qDebug()<<"mappedBytes:"<<cloneFrame.mappedBytes();
//    qDebug()<<"pixelFormat:"<<cloneFrame.pixelFormat();
   unsigned char rgb_buffer[VIDEO_WIDTH*VIDEO_HEIGHT*3];
   if(cloneFrame.pixelFormat()==QVideoFrame::Format_YUYV)
   {
       yuyv_to_rgb(cloneFrame.bits(),rgb_buffer,cloneFrame.width(),cloneFrame.height());
   }
   else if(cloneFrame.pixelFormat()==QVideoFrame::Format_NV21)
   {
        NV21_TO_RGB24(cloneFrame.bits(),rgb_buffer,cloneFrame.width(),cloneFrame.height());
   }
   else
   {
       qDebug()<<"当前格式编码为%1,暂时不支持转换.\n";
       return;
   }
    cloneFrame.unmap();
    //加载图片数据
    QImage image(rgb_buffer,
                       cloneFrame.width(),
                       cloneFrame.height(),
                       QImage::Format_RGB888);
    //绘制图片水印
    QDateTime dateTime(QDateTime::currentDateTime());
    //时间效果: 2020-03-05 16:25::04 周一
    QString qStr="";
    qStr+=dateTime.toString("yyyy-MM-dd hh:mm:ss ddd");
    QPainter pp(&image);
    QPen pen = QPen(Qt::white);
    pp.setPen(pen);
    pp.setFont(QFont("宋体",20));
    pp.drawText(QPointF(0,40),qStr);
    mutex.lock();
    QBuffer buff;
    image.save(&buff,"jpg",80); // 30表示压宿率，值从0 – 100, 值越小表示编码出来的图像文件就越小，当然也就越不清晰
    lcd_image_data=buff.data();
    cond_wait.wakeAll();
    mutex.unlock();
    emit VideoDataOutput(image); //发送信号
}

代码里区分了数据格式，如果是YUYV就调用对应的转换函数将数据转为RGB格式，如果是NV21也是一样，调用对应的转换函数将数据转为RGB格式后续再做其他处理。

图像格式转换的代码如下：

/*
函数功能: 将YUV数据转为RGB格式
函数参数:
unsigned char *yuv_buffer: YUV源数据
unsigned char *rgb_buffer: 转换之后的RGB数据
int iWidth,int iHeight   : 图像的宽度和高度
*/
void yuyv_to_rgb(unsigned char *yuv_buffer,unsigned char *rgb_buffer,int iWidth,int iHeight)
{
    int x;
    int z=0;
    unsigned char *ptr = rgb_buffer;
    unsigned char *yuyv= yuv_buffer;
    for (x = 0; x < iWidth*iHeight; x++)
    {
        int r, g, b;
        int y, u, v;
        if (!z)
        y = yuyv[0] << 8;
        else
        y = yuyv[2] << 8;
        u = yuyv[1] - 128;
        v = yuyv[3] - 128;
        r = (y + (359 * v)) >> 8;
        g = (y - (88 * u) - (183 * v)) >> 8;
        b = (y + (454 * u)) >> 8;
        *(ptr++) = (r > 255) ? 255 : ((r < 0) ? 0 : r);
        *(ptr++) = (g > 255) ? 255 : ((g < 0) ? 0 : g);
        *(ptr++) = (b > 255) ? 255 : ((b < 0) ? 0 : b);
        if(z++)
        {
            z = 0;
            yuyv += 4;
        }
    }
}
void NV21_TO_RGB24(unsigned char *yuyv, unsigned char *rgb, int width, int height)
{
    const int nv_start = width * height ;
    int  index = 0, rgb_index = 0;
    uint8_t y, u, v;
    int r, g, b, nv_index = 0,i, j;
    for(i = 0; i < height; i++){
        for(j = 0; j < width; j ++){
            //nv_index = (rgb_index / 2 - width / 2 * ((i + 1) / 2)) * 2;
            nv_index = i / 2  * width + j - j % 2;
            y = yuyv[rgb_index];
            u = yuyv[nv_start + nv_index ];
            v = yuyv[nv_start + nv_index + 1];
            r = y + (140 * (v-128))/100;  //r
            g = y - (34 * (u-128))/100 - (71 * (v-128))/100; //g
            b = y + (177 * (u-128))/100; //b
            if(r > 255)   r = 255;
            if(g > 255)   g = 255;
            if(b > 255)   b = 255;
            if(r < 0)     r = 0;
            if(g < 0)     g = 0;
            if(b < 0)     b = 0;
            index = rgb_index % width + (height - i - 1) * width;
            //rgb[index * 3+0] = b;
            //rgb[index * 3+1] = g;
            //rgb[index * 3+2] = r;
            //颠倒图像
            //rgb[height * width * 3 - i * width * 3 - 3 * j - 1] = b;
            //rgb[height * width * 3 - i * width * 3 - 3 * j - 2] = g;
            //rgb[height * width * 3 - i * width * 3 - 3 * j - 3] = r;
            //正面图像
            rgb[i * width * 3 + 3 * j + 0] = b;
            rgb[i * width * 3 + 3 * j + 1] = g;
            rgb[i * width * 3 + 3 * j + 2] = r;
            rgb_index++;
        }
    }
}

图像格式转换完成之后，下面就加载到QImage里，绘制上时间水印，将数据填充到缓冲区，然后再唤醒等待的线程，最后在传递一份数据给UI界面完成渲染显示。

如果使用过程中，摄像头支持的是其他格式，那么这里需要自己增加对应的转换函数。

3.3 浏览器交互线程

这里是TCP客户端处理数据的线程，每当连接一个新的客户端，就会开辟一个新的线程独立运行。

线程里完成浏览器请求的处理，回应，交互。

完整的响应代码如下：

void TcpServerThread::run()
{
    qDebug()<<"TcpServerThread_子线程run槽函数的ID:"<<QThread::currentThreadId();
   QTcpSocket *tcpSocket;
    tcpSocket=new QTcpSocket;
    /*使用socketDescriptor套接字初始化QAbstractSocket*/
    if(!tcpSocket->setSocketDescriptor(socketDescriptor))
    {
        return;
    }
    //读取接收的数据
    QString text;
    if(tcpSocket->waitForReadyRead())
    {
        text=tcpSocket->readAll();
    }
    //处理浏览器的请求
    if(text.contains("GET / HTTP/1.1", Qt::CaseInsensitive))
    {
        //如果是Android系统
#ifdef Q_OS_ANDROID
        text="assets:/login.html";
#else
         text=QCoreApplication::applicationDirPath();
         text+="/www/login.html";
#endif
        SendFileData(buff,text,"text/html",tcpSocket);
    }
    else if(text.contains("GET /image.jpg HTTP/1.1", Qt::CaseInsensitive))
    {
        SendImageData(buff,tcpSocket);
    }
    else if(text.contains("GET /favicon.ico HTTP/1.1", Qt::CaseInsensitive))
    {
#ifdef Q_OS_ANDROID
        text="assets:/logo.ico";
#else
        text=QCoreApplication::applicationDirPath();
        text+="/www/logo.ico";
#endif
        SendFileData(buff,text,"image/x-icon",tcpSocket);
    }
    else if(text.contains("GET /three.min.js", Qt::CaseInsensitive))
    {
#ifdef Q_OS_ANDROID
        text="assets:/three.min.js";
#else
        text=QCoreApplication::applicationDirPath();
        text+="/www/three.min.js";
#endif
        SendFileData(buff,text,"application/x-javascript",tcpSocket);
    }
    else if(text.contains("GET /style.css", Qt::CaseInsensitive))
    {
#ifdef Q_OS_ANDROID
        text="assets:/style.css";
#else
        text=QCoreApplication::applicationDirPath();
        text+="/www/style.css";
#endif
        SendFileData(buff,text,"text/css",tcpSocket);
    }
    else if(text.contains("GET /Stats.min.js", Qt::CaseInsensitive))
    {
#ifdef Q_OS_ANDROID
        text="assets:/Stats.min.js";
#else
        text=QCoreApplication::applicationDirPath();
        text+="/www/Stats.min.js";
#endif
        SendFileData(buff,text,"application/x-javascript",tcpSocket);
    }
    else if(text.contains("GET /logo.png HTTP/1.1", Qt::CaseInsensitive))
    {
#ifdef Q_OS_ANDROID
        text="assets:/logo.png";
#else
        text=QCoreApplication::applicationDirPath();
        text+="/www/logo.png";
#endif
        SendFileData(buff,text,"image/png",tcpSocket);
    }
    else if(text.contains("userName=admin&passWord=12345678", Qt::CaseInsensitive))
    {   
#ifdef Q_OS_ANDROID
        text="assets:/index.html";
#else
        text=QCoreApplication::applicationDirPath();
        text+="/www/index.html";
#endif
        SendFileData(buff,text,"text/html",tcpSocket);
    }
    //卸载连接的套接字
    fd_list.Del_fd(socketDescriptor);
    //关闭连接
    tcpSocket->close();
    delete  tcpSocket;
}
/**
 * 向浏览器响应请求数据
 */
int TcpServerThread::SendFileData(char *buff, QString file_path, const char *type, QTcpSocket *tcpSocket)
{
    qint64 size=0;
    /*1. 读取文件*/
    QFile file(file_path);
    if(file.open(QIODevice::ReadOnly)!=true)
    {
        qDebug()<<"文件不存在:"<<file_path<<endl;
        return -1;
    }
    size=file.size(); //得到文件大小
    QByteArray byte=file.readAll(); //读取所有数据
    file.close();//关闭文件
    /*2. 构建响应格式字符串*/
    sprintf(buff,"HTTP/1.1 200 OK\r\n"
                 "Content-type:%s\r\n"
                 "Content-Length:%lld\r\n"
                 "\r\n",type,size);
    /*3. 向客户端发送响应请求*/
    if(tcpSocket->write(buff,strlen(buff))<=0)return -2;
    tcpSocket->waitForBytesWritten();  //等待写
    /*4. 向客户端发送响应实体数据*/
    if(tcpSocket->write(byte)<=0)return -3;
    tcpSocket->waitForBytesWritten();  //等待写
    return 0;
}
/*
向客户端循环发送图片数据流
*/
int TcpServerThread::SendImageData(char *buff, QTcpSocket *tcpSocket)
{
    /*1. 构建响应格式字符串*/
    sprintf(buff,"HTTP/1.0 200 OK\r\n"
                "Server: wbyq\r\n"
                "Content-Type:multipart/x-mixed-replace;boundary=boundarydonotcross\r\n"
                "\r\n"
                "--boundarydonotcross\r\n");
    /*2. 向客户端发送响应请求*/
    if(tcpSocket->write(buff,strlen(buff))<=0)return -2;
    tcpSocket->waitForBytesWritten();  //等待写
    /*3. 循环发送数据*/
    while(thread_run_flag)
    {
        //从全局缓冲区取数据
        mutex.lock();
        cond_wait.wait(&mutex);
        QByteArray image_data; //保存一帧图像数据
        image_data=lcd_image_data;
        mutex.unlock();
//        QBuffer data_buff;
//        QPixmap pixmap;
//        QScreen *screen = QGuiApplication::primaryScreen();
//        pixmap=screen->grabWindow(0); //获取当前屏幕的图像
//        //缩放图像
//        pixmap = pixmap.scaled(lcd_image_w,lcd_image_h, Qt::KeepAspectRatio);
//        pixmap.save(&data_buff,"jpg",image_val);
//        QByteArray image_data1=data_buff.data();
        /*4. 向浏览器发送响应头*/
        sprintf(buff,"Content-type:image/jpeg\r\n"
                     "Content-Length:%d\r\n"
                     "\r\n",image_data.size());
        if(tcpSocket->write(buff,strlen(buff))<=0)break;
        tcpSocket->waitForBytesWritten();  //等待写
        /*5. 发送实体数据*/
         if(tcpSocket->write(image_data)<=0)break;
         tcpSocket->waitForBytesWritten();  //等待写
        /*6. 发送边界符*/
        sprintf(buff,"\r\n--boundarydonotcross\r\n");
        if(tcpSocket->write(buff,strlen(buff))<=0)break;
        tcpSocket->waitForBytesWritten();  //等待写
        //等待一段时间
        msleep(5);
    }
    return 0;
}