Qt Qml 实现多屏、低延时播放超高清8K直播

Qt Qml 实现多屏、低延时播放超高清8K直播

之前一篇写了如何实现实时视频播放。

借助 ​​VideoFrameProvider​​​ 和 ​​VideoOutput​​，将其实现为一个组件.

这里简单称为 ​​VideoItem​​：

Item {
     width: 800
     height: 600
     
     property alias source: provider.source

     VideoFrameProvider { 
         id: provider
     }

     VideoOutput {
         id: videoOutput
         anchors.fill: parent
         source: provider
     }
 }

现在要实现多屏就相当容易：

• 我们可以使用 ​​Row / Column / Grid​​​ + ​​Repeater​​ 的组合:

Grid {
    rows: 3
    columns: 3
    
    Repeater {
        model: 9
        delegate: VideoItem {
            width: 300
            height 300
            source: "rtsp://192.168.0.33/channel=" + index
        }
    }
}

这样就非常简单的实现了九路播放 rtsp 直播视频。

当然，也可以使用 ​​ListView / GridView​​，原理实际上是一样的。

• 在 ​​SkeyeARS​​​ 中，我们的做法是直接使用 ​​VideoItem​​​，然后使用 ​​anchor​​ 进行布局。

这样的做是为了实现多种布局，并且能够借助 ​​AnchorChanges​​​ + ​​Transition​​ 插入平滑的动画，提升体验。

Item {
    id: root
    state: "layout1"
    states: [
        State {
            name: "layout1"
            AnchorChanges { 
                target: video2
                anchors.left: video1.right
                anchors.top: undefined
                anchors.horizontalCenter: undefined
            }
        },
        State {
            name: "layout2"
            AnchorChanges { 
                target: video2 
                anchors.left: undefined
                anchors.top: video1.bottom
                anchors.horizontalCenter: video1.horizontalCenter 
            }
        }
    ]
    transitions: [
        Transition {
            from: "*"
            to: "*"
            AnchorAnimation { duration: 450; easing.type: Easing.InOutQuad }
        }
    ]
            
    VideoItem {
        id: video1
        source: "rtsp://192.168.0.33/channel=1"
    }
    
    VideoItem {
        id: video2
        source: "rtsp://192.168.0.33/channel=2"
        anchors.horizontalCenter: video1.horizontalCenter
    }
}

现在有了两种布局：

​​layout1​​​ 为左右布局，​​layout2​​ 为上下布局，

如果想要切换布局，我们只需简单设置 ​​state = "layout1"​​​ 或 ​​state = "layout2"​​ 即可。

来看一下 ​​SkeyeARS​​ 中的最终效果：

另一方面，如何实现低延时播放超高清8K直播，有几个思路：

• 减小原始视频帧缓存
• 减小解码视频帧缓存
• 针对不同场景适当降低码率
• 选择适当的 GoP Size
• 等等

而我们的 ​​SkeyeARS​​​ + ​​SkeyePlayerPro​​​ 能够做到 ​​8K 100 ~ 300ms​​ 以内的超低延时。

关于SkeyeARS

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

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