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
获取更多信息
QQ交流群:102644504
SkeyeVSS综合安防互联网无插件播放解决方案
SkeyeARS全景AR增强监视系统解决方案
SkeyeIVMS集群式视频云管控平台解决方案
Copyright © OpenSKEYE Team 2018-2022