如何在QML应用中显示OpenCV处理后的摄像头实时画面？

三个报错对应三个实现错误：

• myImageProvider is not defined：通过engine.addImageProvider()注册的图像提供者仅用于响应image://前缀的资源请求，不会自动注册为QML可直接访问的上下文对象，QML中直接写target: myImageProvider无法获取实例，自然无法绑定信号。
• Failed to get image from provider：原requestImage方法没有正确返回摄像头帧的逻辑，且摄像头线程在图像提供者初始化时就启动，和页面加载状态完全脱节。
• 信号handler不匹配：本质是找不到target对象的连锁问题，同时定义的imageChanged信号没有绑定到QML可访问的实例上。

• 图像提供者仅负责缓存最新帧、响应QML的图像请求，不要在其初始化逻辑中直接启动摄像头线程；线程启停和动态加载的视频页生命周期绑定，页面加载时启动采集，页面卸载时停止线程释放摄像头，避免空耗资源、占用摄像头设备。
• 实例化ImageProvider后将其单独保存，通过setContextProperty暴露给QML上下文，供Connections绑定信号。
• 修正OpenCV帧转QImage的格式问题：OpenCV默认输出BGR格式帧，需先转成RGB格式再构造QImage，否则画面会出现蓝红色调反转。
• 删掉重复的engine加载逻辑，原代码中重复加载了FieldProcessingPage.qml和main.qml，会导致多余的窗口创建。

main.py #

import os
import sys
import cv2
from time import sleep
from pathlib import Path
from PyQt5.QtGui import QGuiApplication, QImage
from PyQt5.QtQml import QQmlApplicationEngine
from PyQt5.QtCore import Qt, QObject, pyqtSignal, pyqtSlot, QUrl, QThread
from PyQt5.QtQuick import QQuickImageProvider

# 替换成自定义的OpenCV处理类即可
class FieldProcessor:
    def __init__(self):
        self.cap = None

    def init_cap(self):
        # 0表示默认摄像头，可根据实际情况替换为设备号/视频流地址
        self.cap = cv2.VideoCapture(0)

    def frame_capture(self):
        ret, frame = self.cap.read()
        if ret:
            # 此处插入自定义OpenCV处理逻辑
            return cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
        return None

    def release(self):
        if self.cap and self.cap.isOpened():
            self.cap.release()


class CamFeedWorker(QThread):
    image_update = pyqtSignal(QImage)

    def __init__(self):
        super().__init__()
        self.processor = FieldProcessor()
        self.thread_active = False

    def run(self):
        self.thread_active = True
        self.processor.init_cap()

        while self.thread_active:
            img = self.processor.frame_capture()
            if img is not None:
                qt_img = QImage(img.data,
                                img.shape[1],
                                img.shape[0],
                                img.strides[0],  # 指定步长避免内存对齐问题
                                QImage.Format_RGB888
                                )
                # 拷贝一份避免OpenCV侧内存回收导致花屏
                self.image_update.emit(qt_img.copy())
            # 约30帧，降低CPU占用
            sleep(0.03)

    def stop(self):
        self.thread_active = False
        self.wait(2000)  # 等待线程正常退出
        self.processor.release()


class ImageProvider(QQuickImageProvider):
    imageChanged = pyqtSignal(QImage)

    def __init__(self):
        super().__init__(QQuickImageProvider.Image)
        self.latest_frame = QImage(300, 300, QImage.Format_RGBA8888)
        self.latest_frame.fill(Qt.black)
        self.cam_worker = CamFeedWorker()
        self.cam_worker.image_update.connect(self.update_image)

    def requestImage(self, id, size, requestedSize):
        if size is not None:
            size.setWidth(self.latest_frame.width())
            size.setHeight(self.latest_frame.height())
        return self.latest_frame.copy()

    def update_image(self, img):
        self.latest_frame = img
        self.imageChanged.emit(img)

    # 暴露启停方法给QML调用
    @pyqtSlot()
    def start_camera(self):
        if not self.cam_worker.isRunning():
            self.cam_worker.start()

    @pyqtSlot()
    def stop_camera(self):
        if self.cam_worker.isRunning():
            self.cam_worker.stop()


class MainWindow(QObject):
    def __init__(self):
        super().__init__()


if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()

    main = MainWindow()
    engine.rootContext().setContextProperty("backend", main)

    # 实例化图像提供者，同时注册到上下文和引擎
    cam_provider = ImageProvider()
    engine.rootContext().setContextProperty("camProvider", cam_provider)
    engine.addImageProvider("MyImageProvider", cam_provider)

    # 仅加载主页面
    engine.load(QUrl.fromLocalFile(os.fspath(Path(__file__).resolve().parent / "./qml/main.qml")))

    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

FieldProcessingPage.qml #

import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    id: fieldProcessingPage

    Rectangle {
        id: pageRectangle
        anchors.fill: parent
        implicitWidth: 800
        implicitHeight: 600
        color: "black"

        Image {
            id: feedImage
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit
            cache: false // 必须关闭缓存，否则不会刷新新帧
            source: "image://MyImageProvider/frame"
            property bool frameToggle: false

            function refreshFrame() {
                frameToggle = !frameToggle
                source = "image://MyImageProvider/frame?t=" + frameToggle
            }
        }
    }

    // 绑定到上下文暴露的camProvider实例
    Connections {
        target: camProvider

        function onImageChanged() {
            feedImage.refreshFrame()
        }
    }

    // 页面加载时启动摄像头，销毁时停止
    Component.onCompleted: {
        camProvider.start_camera()
    }
    Component.onDestruction: {
        camProvider.stop_camera()
    }
}

• 如果出现画面撕裂、花屏，确认构造QImage时传入了img.strides[0]作为步长参数，且emit前对QImage做了copy操作，避免OpenCV的Mat内存被回收后Qt访问野指针。
• 摄像头采集线程不要直接操作任何QML/Qt GUI相关对象，所有UI更新都通过信号槽传递，避免跨线程GUI操作导致崩溃。
• 如果OpenCV处理逻辑耗时较长，适当调整线程里的sleep时间匹配实际处理帧率即可，不要无循环空跑占满CPU。

内容的提问来源于stack exchange，提问作者Arsany Samuel