关于图像识别: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