本編利用Qt實現一個網絡攝像頭功能，包含一個服務端和一個客戶端，服務端用于將USB攝像頭轉換為一個IP攝像頭，當有客戶端連接時，將其捕獲到的圖像通過TCP發送出去；客戶端運行在Linux板子上，用于查看攝像頭的實時畫面。

1 必備基礎知識

本篇需要編寫一個服務器和客戶端。

注意，Qt中對Socket的操作進行了進一步的封裝，其基本思想還是一樣的。

下面就來看一下Qt中如何實現TCP Socket通信。

1.1 QTcpSocket與QTcpServer

QTcpSocket，在Qt中，Socket被封裝成了QTcpSocket，可以用它實現TCP客戶端的功能，以及服務端接收到客戶端后，對客戶端的處理。

QTcpServer，對于TCP服務端的功能，可以使用QTcpServer來完成。

這里整理Qt中TCP Socket的使用方法，配合Qt的信號與槽機制，即可實現服務端/客戶端數據的收發處理。

1.2 QCamera相關

QCamer，獲取當前系統可用的攝像頭 類似獲取串口

QCamerInfo，獲取當前系統可用的攝像頭 類似獲取串口

QCameraViewfinder，取景框類，攝像頭的實時畫面顯示到這個里面

QCameraImageCapture，圖像錄制類，與QCamer 配合使用可進行拍照

2 Win平臺上測試

首先在Windows平臺上用Qt Creator編寫服務端和客戶端程序，并運行測試。

2.1 服務器端

先來看下服務器端的最終效果：

左側是攝像頭的顯示界面

可以切換不同的攝像頭作為視頻源(筆記本自帶的攝像頭與USB外接的攝像頭)

可以切換攝像頭的顯示分辨率

可以選擇開啟或關閉攝像頭的IP服務

2.1.1 攝像頭畫面顯示

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    QComboBox *pCamType = new QComboBox();
    m_pComboBox = ui->cbBox_resolution;
    pCamType = ui->cbBox_cameras;
    pCamType->clear();

    cameraList = QCameraInfo::availableCameras();
    foreach(const QCameraInfo &cameraInfo, cameraList)
    {
        qDebug() << "CameraInfo:" << cameraInfo;
        pCamType->addItem(cameraInfo.description());
    }

    m_pCamViewFind = new QCameraViewfinder(this);
    m_pCamViewFind->setGeometry(10, 10, W, H);
    m_pCamViewFind->show();

    m_pCam = new QCamera(this);
    m_pCam->setViewfinder(m_pCamViewFind);
    m_pCam->start();
}

2.1.2 創建Socket服務

void Widget::on_btn_IPServer_toggled(bool checked)
{
    if (checked)
    {
        m_pServer = new QTcpServer(this);
        if (!m_pServer->listen(QHostAddress::Any, 12345))
        {
            QMessageBox::critical(this, "error", "listen port failed");
            exit(0);
        }
        qDebug() << "start IP server";

        m_pTimer = new QTimer(this);
        connect(m_pServer, SIGNAL(newConnection()), this, SLOT(new_client()));
        connect(m_pTimer, SIGNAL(timeout()), this, SLOT(timer_slot()));
        m_pTimer->start(100);

        ui->btn_IPServer->setText("關閉IP服務");
    }
    else
    {
        qDebug() << "stop IP server";
        m_pServer->close();
        delete m_pServer;

        ui->btn_IPServer->setText("開啟IP服務");
    }
}

2.1.3 讀取圖像并發送給客戶端

先定義一下圖像傳送結構體和傳送狀態：

enum TransStatus{
    TS_IDLE,       //空閑(圖像數據可以更新)
    TS_RUNNING,    //圖像數據傳輸中(還不可以更新圖像數據)
    TS_FIRST_DATA, //需要發出圖像數據的第一部分
};

class ImgData {
public:
    char data[LEN] = {0}; //圖像數據
    int  totalLen = 0; //圖像大小
    int  hasSentLen = 0; //已發出的數據長度
    TransStatus  stats = TS_IDLE; //工作狀態
};

具體的實現過程：

void Widget::read_data()
{
    QString str = m_pClient->readAll();
    ImgData *pData = (ImgData*)m_pClient->userData(0);
    QString s("newImage:%1");

    if (str == "new_request")
    {
        qDebug() << "read_data, new_request, d->len:" << pData->totalLen << "d->stats:" << pData->stats;
        if ((pData->totalLen > 0) && (pData->stats==TS_IDLE)) //圖像大小不為0，表示已更新圖像數據了
        {
            pData->stats = TS_RUNNING;
            m_pClient->write(s.arg(pData->totalLen).toUtf8());
            pData->hasSentLen = 0;
        }
        else //圖像數據還沒有更新
        {
            pData->stats = TS_FIRST_DATA; //在定時器的槽函數里發出"newImage..."
        }
    }
    else if (str == "ack")
    {
        int len_send = P_LEN; //本次需要發送的長度

        if (pData->hasSentLen >= pData->totalLen) //如果圖像已傳輸完畢
        {
            qDebug() << "read_data, send done! lenSent:" << pData->hasSentLen << "len" << pData->totalLen;
            return;
        }

        // 最后1包數據(不滿P_LEN)
        if ((pData->hasSentLen + P_LEN) > pData->totalLen)
        {
            len_send = pData->totalLen - pData->hasSentLen;
        }

        qDebug() << "read_data, ack, write len:" << len_send;

        // 發送數據
        pData->hasSentLen += m_pClient->write(pData->data + pData->hasSentLen, len_send);
        if (pData->hasSentLen >= pData->totalLen)
        {
            pData->stats = TS_IDLE; //傳輸完畢后，把狀態改為可更新
            pData->totalLen = 0;
        }
    }
}

需要注意的是，圖像是需要分包傳送的，最后一包一般都不是設定的最大長度，需要計算一下最后一包的數據長度。

2.2 客戶端

先來看下客戶端的最終效果：

右側是攝像頭畫面的顯示框

可以修改要連接的服務端的IP地址

可以選擇開啟或關閉網絡攝像頭

2.2.1 創建Socket連接

void Widget::on_pushButton_toggled(bool checked)
{
    if (checked)
    {
        QString ip = ui->lineEdit->text();
        m_pSocket->connectToHost(ip, 12345);
        if (!m_pSocket->waitForConnected(1000))
        {
            QMessageBox::critical(this, "error", "server connection failed");
            return;
        }

        ui->pushButton->setText("關閉");
        m_iRecvLen = 0;
        m_pSocket->write("new_request");
        qDebug("on_bnt_connect_clicked, new_request");
    }
    else
    {
        m_pSocket->close();
        ui->pushButton->setText("打開");
    }
}

2.3.2 接收服務端的圖像

void Widget::read_data()
{
    int ret;
    QTime qTime;
    static int i = 0;

    ret = m_pSocket->read(m_pData + m_iRecvLen, P_LEN);
    if (0 == strncmp("newImage", m_pData + m_iRecvLen, 8))
    {
        m_iImgLen = atoi(m_pData + m_iRecvLen + 9);
        i++;
    }
    else
    {
        m_iRecvLen += ret;
        if (m_iRecvLen >= m_iImgLen)
        {
            QString timestamp = QString::number(QDateTime::currentMSecsSinceEpoch());
            update();

            return;
        }
    }

    //圖像傳輸完畢
    m_pSocket->write("ack");
}

2.3.3 將圖像顯示出來

void Widget::paintEvent(QPaintEvent *event)
{
    QPixmap map;

    if ((m_iRecvLen >= m_iImgLen) && (m_iImgLen > 0))
    {
        map.loadFromData((uchar *)m_pData, m_iImgLen);
        QPainter p(this);
        p.drawPixmap(140, 0, 640, 480, map);
        m_pSocket->write("new_request");
        m_iRecvLen = 0;
    }
}

3 嵌入式Linux平臺上測試

3.1 交叉編譯

將客戶端程序的源代碼拷貝到Ubunu中進行交叉編譯，具體編譯過程可參考之前的文章：

嵌入式Qt-動手編寫并運行自己的第1個ARM-Qt程序

本篇的實驗環境，繼續使用的是燒錄了野火i.MX6ULL自帶的系統固件Linux板子，需要通過SSH的方式將編譯的程序再發送到板子中，SSH傳輸文件的操作可參考上篇文章：

嵌入式Qt-控制硬件：滑動條控制RGB燈

3.2 實驗演示

https://www.bilibili.com/video/BV12G4y1a7za

4 總結

本篇介紹了如何用Qt實現一個網絡攝像頭功能，通過服務端將USB攝像頭轉換為一個IP攝像頭，Linux板子中的客戶端來連接服務器，將攝像頭的實時畫面顯示出來。

審核編輯：湯梓紅