QML进阶(十三) 音视频操作

目录

视频播放

音频播放

摄像头视频流输出

---

音视频模块并不是QML的核心模块，QML通过提供一个独立的模块来实现了基本的音视频操作。在使用模块之前，我们需要导入对应的音视频模块，导入操作如下:

import QtMultimedia 5.5

下面介绍一下音视频模块的一些常见用法

视频播放

使用QML播放视频和图片的话，主要用到两个元素分别是MediaPlayer 和VideoOutput ，MediaPlayer负责播放的管理，VideoOutput负责视频和图片的呈现。下面的例子介绍了两个元素的使用方法:

import QtQuick 2.8
import QtMultimedia 5.5
import QtQuick.Window 2.0

Window {
    id: root
    width: 1024
    height: 600
    visible: true
    color: "white"

    //播放显示图片
    MediaPlayer {
        id: imagePlayer
        //指定图片的地址
        source: "qrc:/qt.jpg"
        autoPlay: true
    }
    //播放显示视频
    MediaPlayer {
        id: videoPlayer
        //指定视频的地址
        source: "file:///C:/Users/86133/MultiMedia/test.avi"
        //音量范围从0到1
        volume: 0.1
        //视频是否自动播放
        autoPlay: true
    }
    Row{
        //图片输出控件
        VideoOutput {
            id:imageOutput
            width: 300
            height: 300
            source: imagePlayer
        }

        //视频输出窗口
        Column{
            anchors.left: imageOutput.right
            VideoOutput{
                id:videoOutput
                width: 300
                height: 200
                source: videoPlayer
            }

            //进度条用来控制视频的进度
            Rectangle {
                id: progressBar
                anchors.left: videoOutput.left
                anchors.right: videoOutput.right
                anchors.top: videoOutput.bottom
                height: 20
                width: videoOutput.width
                color: "black"

                Rectangle {
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    width: videoPlayer.duration>0?parent.width*videoPlayer.position/videoPlayer.duration:0
                    color: "darkGray"
                }
                //拖动来控制播放进度
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        if (videoPlayer.seekable) {
                            videoPlayer.seek(videoPlayer.duration * mouse.x/width);
                        }
                    }
                }
            }
        }
    }
    //通过修改更新的时间间隔,提升视频交互的平滑性
    Connections {
            target: videoPlayer
            onMediaObjectChanged: {
                if (videoPlayer.mediaObject) {
                    videoPlayer.mediaObject.notifyInterval = 50;
                }
            }
        }


}

显示效果如下图所示:

在测试视频播放的时候，发现有几点需要注意:

首先，我测试使用的视频是从网上下载的标准视频所以没有问题，如果使用本地压缩过的视频可能会出现花屏的问题，这点需要注意。如果是专业的视频播放，建议采用专业的影音视频播放库。

其次，这个MediaPlayer不仅支持普通的图片显示，还支持gif动图，我们可以用它来播放gif动图。为了方便对播放器的播放状态进行管理，我们需要对播放元素的状态进行监控，状态是一个枚举值，对应的值的状态列表描述如下:

MediaStatus
QMediaPlayer::UnknownMediaStatus  未知状态
QMediaPlayer::NoMedia             没有添加对应的媒体文件
QMediaPlayer::LoadingMedia        正在加载媒体文件
QMediaPlayer::LoadedMedia         媒体文件加载成功
QMediaPlayer::StalledMedia        由于缓冲不足当前媒体的播放已暂停。播放器处于播放状态或暂停状态。                   
QMediaPlayer::BufferingMedia      播放器正在缓冲数据，但有足够的数据缓冲以供播放，以便在不久的将来继续播放。播放器处于播放状态或暂停状态。
QMediaPlayer::BufferedMedia       播放器已经充分缓存
QMediaPlayer::EndOfMedia          播放器结束播放
QMediaPlayer::InvalidMedia       无效的媒体

通过检测MediaPlayer的状态，我们就可以确定当前的播放控制元素处于什么状态了。

音频播放

QML通过SoundEffect元素来播放音频，播放音频的用例如下:

需要注意的是SoundEffect只能用来播放wav格式的音频，对于一些常见的mp3则无法播放。如果有对应的需求建议采用更专业的音频播放库。

import QtQuick 2.8
import QtMultimedia 5.5
import QtQuick.Window 2.0

Window {
    id: root
    width: 1024
    height: 600
    visible: true
    color: "white"

    SoundEffect {
        id: player
        //循环播放的次数
        loops: 5
        //音量值 取值范围0.0到1.0
        volume: 0.2
        source: "file:///C:/Users/86133/MultiMedia/test.wav"
    }
    Rectangle {
        id: button
        anchors.centerIn: parent
        width: 200
        height: 100
        color: "red"
        MouseArea {
            anchors.fill: parent
            onClicked:
            {
                if(player.playing)
                {
                    player.stop();
                }
                else
                {
                    player.play();
                }
            }
        }
    }
}

感觉QML提供的音频播放挺鸡肋的，食之无味弃之可惜，根据自己的业务需要来判断吧，基本功能还是OK的。

摄像头视频流输出

通过组合使用QML的Camera元素和VideoOutput元素，我们可以捕获电脑摄像头的图像输入。同时Camera元素的imageCapture对象提供了摄像头截图功能，通过调用对应的方法我们可以将摄像头的图像输入截图保存到本地。

import QtQuick 2.8
import QtMultimedia 5.5
import QtQuick.Window 2.0
import QtQuick.Controls 2.0

Window {
    id: root
    width: 1024
    height: 600
    visible: true
    color: "white"
    //图片输出元素
    VideoOutput {
        anchors.fill: parent
        source: camera
    }
    //摄像头元素
    Camera {
        id: camera
    }
    //点击截图的按钮
    Button {
        id: shotButton
        text: "截图"
        width: 150
        height: 40
        anchors.right: parent.ri
        onClicked: {
            camera.imageCapture.capture();
        }
    }
    
    //关联对应的信号和槽函数，将图编保存地址输出出来
    Connections {
        target: camera.imageCapture
        onImageSaved: {
            //打印出图标保存地址
            console.log(path)
        }
    }
}