Qt QML VideoOutput 显示自定义的 YUV420P 数据流

在一些传统应用中,如果想使用 Qt 在 QWidget 或者 QML 中显示自定义的视频数据流,需要引入 OpenGL 来实现。而实际 Qt 已经准备了 VideoOutput 类型可以很方便的调用系统摄像头和使用自定义数据流。在 Qt 官网中,VideoOutput 的介绍中说明,source 属性可以是一个自定义派生于 QObject 的子类,并提供一个类型为 QMediaObject 的属性命名为 mediaObject,或者是一个派生与 QObject 的子类并提供一个类型为 QAbstractVideoSurface 的属性命名为 videoSurface。其中任意一个方法都可以实现自定义视频数据流的播放,本文介绍第二种方法。参考资料:https://stackoverflow.com/questions/43854589/custom-source-property-for-videooutput-qml

从 QObject 继承并提供 videoSurface 属性给 QML

像 Stackoverflow 中的介绍,你需要这样一个类,该类用 Q_PROPERTY 宏提供了一个名字为 videoSurface 的属性(符合 source 属性的第二个要求)

#include <QObject>
#include <QAbstractVideoSurface>
#include <QVideoSurfaceFormat>

class FrameProvider : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QAbstractVideoSurface *videoSurface READ videoSurface WRITE setVideoSurface)


public:
    QAbstractVideoSurface* videoSurface() const { return m_surface; }

private:
    QAbstractVideoSurface *m_surface = NULL;
    QVideoSurfaceFormat m_format;

public:


    void setVideoSurface(QAbstractVideoSurface *surface)
    {
        if (m_surface && m_surface != surface  && m_surface->isActive()) {
            m_surface->stop();
        }

        m_surface = surface;

        if (m_surface && m_format.isValid())
        {
            m_format = m_surface->nearestFormat(m_format);
            m_surface->start(m_format);

        }
    }

    void setFormat(int width, int heigth, int format)
    {
        QSize size(width, heigth);
        QVideoSurfaceFormat format(size, format);
        m_format = format;

        if (m_surface) 
        {
            if (m_surface->isActive())
            {
                m_surface->stop();
            }
            m_format = m_surface->nearestFormat(m_format);
            m_surface->start(m_format);
        }
    }

public slots:
    void onNewVideoContentReceived(const QVideoFrame &frame)
    {
        if (m_surface)
            m_surface->present(frame);
    }
};

将对象注入到全局 Context 提供 QML 使用

Stackoverflow 的方法是将 FrameProvider 注册成一个 QML 可以使用的类型,这种方法也可以,但是你可以看到在 main 函数中需要去从 QML 中搜索该类实例化的对象句柄,然后再绑定信号和槽,这个相对麻烦一些。我们换一种方式就是先 new 对象然后绑定信号和槽函数,最后再把对象注入到全局上下文中,让 QML 在任意位置都可以访问这个对象。方法如下:

FrameProvider* provider = new FrameProvider();
CustomFramesource source;

// Set the correct format for the video surface (Make sure your selected format is supported by the surface)
provider->setFormat(source.width,source.height, source.format);

// Connect your frame source with the provider
QObject::connect(&source, SIGNAL(newFrameAvailable(const QVideoFrame &)), provider, SLOT(onNewVideoContentReceived(const QVideoFrame &)));

QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("frameProvider", frameProvider);

// .... Other code

QML 中引用

由于全局注入了 frameProvider 类型,在 VideoOutput 中直接指定给 source 属性就可以了。

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.2
import QtMultimedia 5.4

ApplicationWindow {
    objectName: "mainWindow"
    visible: true
    width: 640
    height: 480

    VideoOutput {
        id: display
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: parent.width
        source: frameProvider
    }
}

构造数据源

当你收到一帧 YUV 数据的时候(上面代码中 CustomFramesource 类要做的事情),你需要把这一帧数据转换为 QVideoFrame 并发送信号 newFrameAvailable,这样 frameProvider 类收到信号后就会将这一帧的数据通知给 QML 来显示。具体转换的代码如下:

QVideoFrame f(size, QSize(width, height), width, QVideoFrame::Format_YUV420P);
if (f.map(QAbstractVideoBuffer::WriteOnly)) {
    memcpy(f.bits(), data, size);
    f.setStartTime(0);
    f.unmap();
    emit newFrameAvailable(f);
}

代码中使用了 QVideoFrame 的第二个构造函数,先根据视频数据大小创建一个空闲位置,然后 map 这块位置到内存,拷贝数据进去,最后 unmap 并发送信号给 provider 使用。这里如果考虑性能问题,可以将 QVideoFrame 使用智能指针传递,这样可以减少数据的拷贝过程。

发表评论