1、写在后面

上一篇咱们曾经把握了 Qml 中动态创建 & 销毁组件的技巧。

当初, 咱们要利用这个技巧来动态创建视频容器。

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

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

2、注释开始

咱们实现的外围容器组件命名为 VideoContainer.qml

当然，须要为动态创建的实例辨别类型, 这里应用了 Qml 的新个性 enum

    enum VideoType {        None = 1,        PanoVideo,        BallVideo    }

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

而后，咱们实现实现要害的动静加载：

//VideoContainer.qmlimport QtQuick 2.15Item {    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