Qt) QWebEngineView를 이용한 웹캠 스트리밍

이전 글 : Ubuntu | Rpi ) 웹캠 스트리밍 - mjpg-streamer

이전 글에서 Windows에서 웹캠 동작을 확인하고, Ubuntu와 Raspberry Pi 환경에서 각각 mjpg-streamer를 빌드하여 브라우저에서 스트리밍을 테스트하였습니다.
이번 글에서는 Raspberry Pi에 웹캠을 연결하여 스트리밍을 실행하고, Ubuntu 환경의 Qt 애플리케이션에서 해당 스트림을 화면에 출력하는 과정을 정리하였습니다.

---

1. Raspberry Pi에서 스트리밍 실행

Raspberry Pi에 USB 웹캠을 연결한 후 mjpg-streamer를 실행합니다.

웹캠 장치 번호를 확인합니다.

v4l2-ctl --list-devices

스트리밍을 시작합니다.

export LD_LIBRARY_PATH=.
./mjpg_streamer -o "output_http.so -w ./www -l 0.0.0.0 -p 8080" -i "input_uvc.so -d /dev/video0"

Raspberry Pi의 IP를 확인합니다.

ip addr | grep inet

스트림 URL은 아래 형식으로 구성됩니다.

http://라즈베리파이_IP:8080/?action=stream

---

2. Qt에서 스트리밍 화면 출력

Ubuntu 환경에서 Qt 프로젝트를 생성하고 QWebEngineView를 사용하여 스트림을 출력합니다.

CMakeLists.txt에 WebEngineWidgets 모듈을 추가합니다.

find_package(Qt6 6.5 REQUIRED COMPONENTS Core Widgets WebEngineWidgets)
target_link_libraries(프로젝트명 PRIVATE Qt6::Widgets Qt6::WebEngineWidgets)

2-1. URL 연결 테스트 (Naver)

스트림 주소를 연결하기 전에 QWebEngineView가 정상적으로 동작하는지 네이버 URL로 먼저 테스트합니다.

mainwidget.h

#ifndef MAINWIDGET_H
#define MAINWIDGET_H

#include <QWidget>
#include <QWebEngineView>

QT_BEGIN_NAMESPACE
namespace Ui {
class MainWidget;
}
QT_END_NAMESPACE

class MainWidget : public QWidget
{
    Q_OBJECT

public:
    explicit MainWidget(QWidget *parent = nullptr);
    ~MainWidget() override;

private:
    Ui::MainWidget *ui;
    QWebEngineView *pQWebEngineView;
};
#endif // MAINWIDGET_H

mainwidget.cpp

#include "mainwidget.h"
#include "ui_mainwidget.h"

MainWidget::MainWidget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::MainWidget)
{
    ui->setupUi(this);
    pQWebEngineView = new QWebEngineView(this);
    pQWebEngineView->load(QUrl("http://www.naver.com"));
    ui->verticalLayout_1->addWidget(pQWebEngineView);
}

MainWidget::~MainWidget()
{
    delete ui;
}

Qt 위젯 안에 네이버 페이지가 정상적으로 로드되면 QWebEngineView가 올바르게 동작하는 것입니다.

---

3. 웹캠 스트리밍 (단일 화면)

네이버 URL 대신 Raspberry Pi의 mjpg-streamer 스트림 주소를 로드합니다.

mainwidget.cpp

#include "mainwidget.h"
#include "ui_mainwidget.h"

MainWidget::MainWidget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::MainWidget)
{
    ui->setupUi(this);
    pQWebEngineView = new QWebEngineView(this);
    pQWebEngineView->load(QUrl("http://10.10.16.65:8080/?action=stream"));
    ui->verticalLayout_1->addWidget(pQWebEngineView);
}

MainWidget::~MainWidget()
{
    delete ui;
}

---

4. 웹캠 스트리밍 (4분할 화면)

UI를 Qt Designer에서 4분할 레이아웃으로 구성한 후 QWebEngineView를 각 영역에 배치합니다.

Qt Designer에서 QVBoxLayout 4개를 2x2 그리드로 배치합니다.
각 레이아웃의 이름을 verticalLayout_1 ~ verticalLayout_4 로 지정합니다.

mainwidget.h

private:
    Ui::MainWidget *ui;
    QWebEngineView *pQWebEngineView_1;
    QWebEngineView *pQWebEngineView_2;
    QWebEngineView *pQWebEngineView_3;
    QWebEngineView *pQWebEngineView_4;

mainwidget.cpp

#include "mainwidget.h"
#include "ui_mainwidget.h"

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

    pQWebEngineView_1 = new QWebEngineView(this);
    pQWebEngineView_1->load(QUrl("http://10.10.16.65:8080/?action=stream"));
    ui->verticalLayout_1->addWidget(pQWebEngineView_1);

    pQWebEngineView_2 = new QWebEngineView(this);
    pQWebEngineView_2->load(QUrl("http://10.10.16.65:8080/?action=stream"));
    ui->verticalLayout_2->addWidget(pQWebEngineView_2);

    pQWebEngineView_3 = new QWebEngineView(this);
    pQWebEngineView_3->load(QUrl("http://10.10.16.65:8080/?action=stream"));
    ui->verticalLayout_3->addWidget(pQWebEngineView_3);

    pQWebEngineView_4 = new QWebEngineView(this);
    pQWebEngineView_4->load(QUrl("http://10.10.16.65:8080/?action=stream"));
    ui->verticalLayout_4->addWidget(pQWebEngineView_4);
}

MainWidget::~MainWidget()
{
    delete ui;
}

---

전체 흐름 요약

Raspberry Pi에 웹캠 연결 → mjpg-streamer 실행
    ↓
Ubuntu Qt에서 QWebEngineView URL 테스트 (naver.com)
    ↓
스트림 주소로 변경하여 단일 화면 출력
    ↓
UI 4분할 레이아웃 구성 (Qt Designer)
    ↓
QWebEngineView 4개 생성 및 각 레이아웃에 배치
    ↓
4분할 화면 동시 스트리밍 확인