Qt Qml 中动态创建 & 销毁视频容器技巧(二)-CFANZ编程社区

Qt Qml 中动态创建 & 销毁视频容器技巧(二)

1、写在前面

上一篇我们已经掌握了 Qml 中动态创建 & 销毁组件的技巧。

现在, 我们要利用这个技巧来动态创建视频容器。

先来看看效果图 (来自 SkeyeARS ) ：

全景视频容器
球机(相机) 视频容器

2、正文开始

我们实现的核心容器组件命名为 VideoContainer.qml

当然，需要为动态创建的实例区分类型, 这里使用了 Qml 的新特性 enum

enum VideoType {
        None = 1,
        PanoVideo,
        BallVideo
    }

其中，PanoVideo 为全景， BallVideo 为球机。

然后，我们实现完成关键的动态加载：

//VideoContainer.qml
import QtQuick 2.15

Item {
    id: container
    
    enum VideoType {
        None = 1,
        PanoVideo,
        BallVideo
    }
    
    property var videoType: VideoContainer.VideoType.None
    property alias instance: contentLoader.item
    property bool finished: contentLoader.status === Loader.Ready
    
    function destoryContent() {
        contentLoader.source = "";
    }

    //更改VideoType时触发加载
    onVideoTypeChanged: {
        if (finished) {
            if (videoType === VideoContainer.VideoType.PanoVideo) {
                if (instance.objectName !== "PanoVideo" ) {
                    contentLoader.source = "PanoVideoComponent.qml";
                }
            } else if (videoType === VideoContainer.VideoType.BallVideo) {
                if (instance.objectName !== "BallVideo" ) {
                    contentLoader.source = "BallVideoComponent.qml";
                }
            } else {
                container.destoryContent();
            }
        } else {
            if (videoType === VideoContainer.VideoType.PanoVideo) {
                contentLoader.source = "PanoVideoComponent.qml";
            } else if (videoType === VideoContainer.VideoType.BallVideo) {
                contentLoader.source = "BallVideoComponent.qml";
            }
        }
    }
    
    function loadVideo() {
        if (instance == undefined) return;

        if (videoType === VideoContainer.VideoType.BallVideo) {
            //这里进行一些球机的初始化
            instance.cameraIp = cameraIp;
            instance.cameraPort = cameraPort;
            instance.username = username;
            instance.password = password;
            instance.initialize();
        } else if (videoType === VideoContainer.VideoType.PanoVideo) {
            //这里进行一些全景的初始化
            instance.channel = 1;
        }
    }
    
    Loader {
        id: contentLoader
        asynchronous: false //不使用异步，立即创建
        anchors.fill: parent

        //更改VideoType时触发加载，加载完成后处理
        onLoaded: {
            if (videoType !== VideoContainer.VideoType.None) {
                container.loadVideo();
            }
        }
    }

接着我们需要实现两个对应的组件 PanoVideoComponent.qml 和 BallVideoComponent.qml：

//PanoVideoComponent.qml

    import QtQuick 2.15
    
    Item {
        id: root
        clip: true
        objectName: "PanoVideo"
        
        VideoFrameProvider { 
            id: provider
            //这是一个全景流
            source: "rtsp://192.168.0.33:8554/channel=1"
        }
    
        VideoOutput {
            id: videoOutput
            anchors.fill: parent
            source: provider
        }
        
        //这里放全景相关的一些组件等等
        .....
    }

//BallVideoComponent.qml

    import QtQuick 2.15
    
    Item {
        id: root
        clip: true
        objectName: "BallVideo"
        
        VideoFrameProvider { 
            id: provider
            //这是一个安讯士的相机
            source: "rtsp://admin:12345@192.168.0.33:6003/axis-media/media.amp"
        }
    
        VideoOutput {
            id: videoOutput
            anchors.fill: parent
            source: provider
        }
        
        //这里放球机(云台)相关的一些组件等等
        .....
    }

最后，如何使用：

例如，我们想要实例化一个 全景视频:

VideoContainer {
    videoType: VideoContainer.VideoType.PanoVideo
}

又或者，想要实例化一个 球机视频:

VideoContainer {
    videoType: VideoContainer.VideoType.BallVideo
}

如果想要销毁：

VideoContainer {
    videoType: VideoContainer.VideoType.None
}

实在是简单方便且实用~

关于SkeyeARS

SkeyeARS全景AR增强监视系统，是视开科技开发的一款基于宽场景多路视频无缝拼接、视频实时增强、监视目标增强显示、目标自动跟踪、视频存储回放、远程数据传输和多通道全景视频同步显示等功能的综合视频AR增强监视系统，广泛应用于智慧交通、智慧城市、智慧机场等大场景智能监控领域。

详细说明：http://www.openskeye.cn/web/product/ars