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