Qt音视频开发16-通用悬浮按钮工具栏的设计

liudianwu

## 一、前言
通用悬浮按钮工具栏这个功能经过了好几个版本的迭代，一开始设计的时候是写在视频控件widget窗体中，当时功能简单就放一排按钮在顶部悬浮widget中就好，随着用户需求的变化，用户需要自定义悬浮条的要求越发强烈，而且部分用户还希望悬浮条的位置能够指定，比如可以在顶部、底部、左侧、右侧位置。为了满足各种需求，特意将通用悬浮按钮工具栏单独成类BannerWidget，将所有悬浮条参数放到结构体BannerPara中，可以设置按钮的间距、边距、背景透明度、背景颜色、文本颜色、按下颜色、悬浮条位置等，每个按钮都对应有图标代码、名称标识、提示信息。这些信息都可以动态设置并立即应用，在最外层的视频控件窗体就提供了设置接口。


```cpp
//悬浮条位置
enum BannerPosition {
    BannerPosition_Top = 0,     //顶部
    BannerPosition_Bottom = 1,  //底部
    BannerPosition_Left = 2,    //左侧
    BannerPosition_Right = 3    //右侧
};


//悬浮条参数
#include <QMargins>
struct BannerPara {
    QMargins margin;            //边距
    int spacing;                //间距
    int bgAlpha;                //背景透明度


    QColor bgColor;             //背景颜色
    QColor textColor;           //文本颜色
    QColor pressColor;          //按下颜色
    BannerPosition position;    //悬浮条位置


    QList<int> icons;           //按钮图标代码集合
    QList<QString> names;       //按钮名称标识集合
    QList<QString> tips;        //按钮提示信息集合


    BannerPara() {
        margin = QMargins(5, 0, 3, 0);
        spacing = 2;
        bgAlpha = 200;


        bgColor = "#333333";
        textColor = "#FFFFFF";
        pressColor = "#5EC7D9";
        position = BannerPosition_Top;


        //采用iconfont图形字体
        icons = QList<int>() << 0xea1b << 0xeb15 << 0xe674 << 0xea36 << 0xe74c;
        //为了避免和其他控件重名建议前面加上前缀用来区分
        names = QList<QString>() << "banner_btnRecord" << "banner_btnSnap" << "banner_btnSound" << "banner_btnAlarm" << "banner_btnClose";
        tips = QList<QString>() << "录制" << "抓图" << "声音" << "警情" << "关闭";
    }
};
```


## 二、效果图



## 三、体验地址
1. 国内站点：[https://gitee.com/feiyangqingyun](https://gitee.com/feiyangqingyun)
2. 国际站点：[https://github.com/feiyangqingyun](https://github.com/feiyangqingyun)
3. 个人作品：[https://blog.csdn.net/feiyangqingyun/article/details/97565652](https://blog.csdn.net/feiyangqingyun/article/details/97565652)
4. 体验地址：[https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g](https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g) 提取码：01jf 文件名：bin_video_demo/bin_linux_video。


## 四、相关代码
```cpp
void BannerWidget::btnClicked()
{
    QPushButton *btn = (QPushButton *)sender();
    QString objName = btn->objectName();
    emit btnClicked(objName);


    //根据需要切换图标以及标识
    if (objName.endsWith("btnRecord")) {
        btn->setText((QChar)0xea1c);
        btn->setObjectName(objName.replace("Record", "Stop"));
    } else if (objName.endsWith("btnStop")) {
        btn->setText((QChar)0xea1b);
        btn->setObjectName(objName.replace("Stop", "Record"));
    } else if (objName.endsWith("btnSound")) {
        btn->setText((QChar)0xe667);
        btn->setObjectName(objName.replace("Sound", "Muted"));
    } else if (objName.endsWith("btnMuted")) {
        btn->setText((QChar)0xe674);
        btn->setObjectName(objName.replace("Muted", "Sound"));
    }
}


void BannerWidget::receivePlayFinsh()
{
    this->changeStatus("Stop", "Record", 0xea1b);
    this->changeStatus("Muted", "Sound", 0xe674);
}


void BannerWidget::receiveMuted(bool muted)
{
    if (muted) {
        this->changeStatus("Sound", "Muted", 0xe667);
    } else {
        this->changeStatus("Muted", "Sound", 0xe674);
    }
}


void BannerWidget::recorderStateChanged(const RecorderState &state, const QString &file)
{
    if (state == RecorderState_Recording) {
        this->isRecord = true;
        this->changeStatus("Record", "Stop", 0xea1c);
    } else if (state == RecorderState_Stopped) {
        this->isRecord = false;
        this->changeStatus("Stop", "Record", 0xea1b);
    }


    this->showInfo(text);
}


void BannerWidget::setBannerPara(const BannerPara &bannerPara)
{
    this->bannerPara = bannerPara;
}


void BannerWidget::initButton()
{
    //检查数量是否一致
    int iconCount = bannerPara.icons.size();
    int nameCount = bannerPara.names.size();
    if (iconCount == 0 || iconCount != nameCount) {
        return;
    }


    //清空之前的按钮对象
    qDeleteAll(btns);
    btns.clear();


    //如果之前存在布局则删除布局(居然只能用delete而不是deleteLater)
    if (this->layout()) {
        delete this->layout();
    }


    //识别当前用哪个布局
    bool vertical = (bannerPara.position == BannerPosition_Left || bannerPara.position == BannerPosition_Right);
    //实例化布局
    QBoxLayout *layout = 0;
    if (vertical) {
        layout = new QVBoxLayout;
        //插入弹簧并设置布局的边距间距
        layout->addStretch();
    } else {
        layout = new QHBoxLayout;
        //插入标签放置各种信息
        layout->addWidget(label);
    }


    layout->setContentsMargins(bannerPara.margin);
    layout->setSpacing(bannerPara.spacing);
    this->setLayout(layout);


    //有多种办法来设置图片,qt内置的图标+自定义的图标+图形字体
    //既可以设置图标形式,也可以直接图形字体设置文本
#if 0
    QList<QIcon> icons;
    icons << QApplication::style()->standardIcon(QStyle::SP_ComputerIcon);
    icons << QApplication::style()->standardIcon(QStyle::SP_FileIcon);
    icons << QApplication::style()->standardIcon(QStyle::SP_DirIcon);
    icons << QApplication::style()->standardIcon(QStyle::SP_DialogOkButton);
    icons << QApplication::style()->standardIcon(QStyle::SP_DialogCancelButton);
#endif


    //根据位置设置布局以及添加按钮(如果不需要按钮则只需要加一行 iconCount = 0)
    for (int i = 0; i < iconCount; ++i) {
        QPushButton *btn = new QPushButton;
        //绑定按钮单击事件,用来发出信号通知
        connect(btn, SIGNAL(clicked(bool)), this, SLOT(btnClicked()));
        //设置标识,用来区别按钮
        btn->setObjectName(bannerPara.names.at(i));
        //设置提示文字信息
        btn->setToolTip(bannerPara.tips.at(i));


        if (vertical) {
            //设置固定高度
            btn->setFixedHeight(20);
            //设置拉伸策略使得填充
            btn->setSizePolicy(QSizePolicy::Expanding, QSizePolicy:referred);
        } else {
            //设置固定宽度
            btn->setFixedWidth(20);
            //设置拉伸策略使得填充
            btn->setSizePolicy(QSizePolicy:referred, QSizePolicy::Expanding);
        }


        //设置焦点策略为无焦点,避免单击后焦点跑到按钮上
        btn->setFocusPolicy(Qt::NoFocus);


#if 0
        //设置图标大小和图标
        btn->setIconSize(QSize(16, 16));
        btn->setIcon(icons.at(i));
#else
        btn->setFont(iconFont);
        btn->setText((QChar)bannerPara.icons.at(i));
#endif


        //将按钮加到布局中
        layout->addWidget(btn);
        btns << btn;
    }
}


void BannerWidget::initStyle()
{
    //应用样式表
    QStringList list;
    QColor bgColor = bannerPara.bgColor;
    QString rgba = QString("rgba(%1,%2,%3,%4)").arg(bgColor.red()).arg(bgColor.green()).arg(bgColor.blue()).arg(bannerPara.bgAlpha);
    list << QString("#bannerWidget{background:%1;border:none;}").arg(rgba);
    list << QString("QLabel{margin:0px;padding:0px;}");
    list << QString("QPushButton,QLabel{color:%1;}").arg(bannerPara.textColor.name());
    list << QString("QPushButton:pressed{color:%1;}").arg(bannerPara.pressColor.name());
    list << QString("QPushButton{border:none;padding:0px;background:rgba(0,0,0,0);}");
    this->setStyleSheet(list.join(""));
}


void BannerWidget::showInfo(const QString &text)
{
    this->text = text;
    if (isRecord) {
        label->setText(text + " 录制中...");
    } else {
        label->setText(text);
    }
}


void BannerWidget::changeStatus(const QString &objNameSrc, const QString &objNameDst, int icon)
{
    foreach (QPushButton *btn, btns) {
        QString objName = btn->objectName();
        if (objName.endsWith(objNameSrc)) {
            btn->setObjectName(objName.replace(objNameSrc, objNameDst));
            btn->setText((QChar)icon);
            break;
        }
    }
}
```


## 五、功能特点
### 5.1 基础功能
1. 支持各种音频视频文件格式，比如mp3、wav、mp4、asf、rm、rmvb、mkv等。
2. 支持本地摄像头设备，可指定分辨率、帧率。
3. 支持各种视频流格式，比如rtp、rtsp、rtmp、http等。
4. 本地音视频文件和网络音视频文件，自动识别文件长度、播放进度、音量大小、静音状态等。
5. 文件可以指定播放位置、调节音量大小、设置静音状态等。
6. 支持倍速播放文件，可选0.5倍、1.0倍、2.5倍、5.0倍等速度，相当于慢放和快放。
7. 支持开始播放、停止播放、暂停播放、继续播放。
8. 支持抓拍截图，可指定文件路径，可选抓拍完成是否自动显示预览。
8. 支持录像存储，手动开始录像、停止录像，部分内核支持暂停录像后继续录像，跳过不需要录像的部分。
9. 支持无感知切换循环播放、自动重连等机制。
10. 提供播放成功、播放完成、收到解码图片、收到抓拍图片、视频尺寸变化、录像状态变化等信号。
11. 多线程处理，一个解码一个线程，不卡主界面。


### 5.2 特色功能
1. 同时支持多种解码内核，包括qmedia内核（Qt4/Qt5/Qt6）、ffmpeg内核（ffmpeg2/ffmpeg3/ffmpeg4/ffmpeg5）、vlc内核（vlc2/vlc3）、mpv内核（mpv1/mp2）、海康sdk、easyplayer内核等。
2. 非常完善的多重基类设计，新增一种解码内核只需要实现极少的代码量，就可以应用整套机制。
3. 同时支持多种画面显示策略，自动调整（原始分辨率小于显示控件尺寸则按照原始分辨率大小显示，否则等比例缩放）、等比例缩放（永远等比例缩放）、拉伸填充（永远拉伸填充）。所有内核和所有视频显示模式下都支持三种画面显示策略。
4. 同时支持多种视频显示模式，句柄模式（传入控件句柄交给对方绘制控制）、绘制模式（回调拿到数据后转成QImage用QPainter绘制）、GPU模式（回调拿到数据后转成yuv用QOpenglWidget绘制）。
5. 支持多种硬件加速类型，ffmpeg可选dxva2、d3d11va等，mpv可选auto、dxva2、d3d11va，vlc可选any、dxva2、d3d11va。不同的系统环境有不同的类型选择，比如linux系统有vaapi、vdpau，macos系统有videotoolbox。
6. 解码线程和显示窗体分离，可指定任意解码内核挂载到任意显示窗体，动态切换。
7. 支持共享解码线程，默认开启并且自动处理，当识别到相同的视频地址，共享一个解码线程，在网络视频环境中可以大大节约网络流量以及对方设备的推流压力。国内顶尖视频厂商均采用此策略。这样只要拉一路视频流就可以共享到几十个几百个通道展示。
8. 自动识别视频旋转角度并绘制，比如手机上拍摄的视频一般是旋转了90度的，播放的时候要自动旋转处理，不然默认是倒着的。
9. 自动识别视频流播放过程中分辨率的变化，在视频控件上自动调整尺寸。比如摄像机可以在使用过程中动态配置分辨率，当分辨率改动后对应视频控件也要做出同步反应。
10. 音视频文件无感知自动切换循环播放，不会出现切换期间黑屏等肉眼可见的切换痕迹。
11. 视频控件同时支持任意解码内核、任意画面显示策略、任意视频显示模式。
12. 视频控件悬浮条同时支持句柄、绘制、GPU三种模式，非绝对坐标移来移去。
13. 本地摄像头设备支持指定设备名称、分辨率、帧率进行播放。
14. 录像文件同时支持打开的视频文件、本地摄像头、网络视频流等。
15. 瞬间响应打开和关闭，无论是打开不存在的视频或者网络流，探测设备是否存在，读取中的超时等待，收到关闭指令立即中断之前的操作并响应。
16. 支持打开各种图片文件，支持本地音视频文件拖曳播放。
17. 视频控件悬浮条自带开始和停止录像切换、声音静音切换、抓拍截图、关闭视频等功能。
18. 音频组件支持声音波形值数据解析，可以根据该值绘制波形曲线和柱状声音条，默认提供了声音振幅信号。
19. 各组件中极其详细的打印信息提示，尤其是报错信息提示，封装的统一打印格式。针对现场复杂的设备环境测试极其方便有用，相当于精确定位到具体哪个通道哪个步骤出错。
20. 代码框架和结构优化到最优，性能强悍，持续迭代更新升级。
21. 源码支持Qt4、Qt5、Qt6，兼容所有版本。


### 5.3 视频控件
1. 可动态添加任意多个osd标签信息，标签信息包括名字、是否可见、字号大小、文本文字、文本颜色、标签图片、标签坐标、标签格式（文本、日期、时间、日期时间、图片）、标签位置（左上角、左下角、右上角、右下角、居中、自定义坐标）。
2. 可动态添加任意多个图形信息，这个非常有用，比如人工智能算法解析后的图形区域信息直接发给视频控件即可。图形信息支持任意形状，直接绘制在原始图片上，采用绝对坐标。
3. 图形信息包括名字、边框大小、边框颜色、背景颜色、矩形区域、路径集合、点坐标集合等。
4. 每个图形信息都可指定三种区域中的一种或者多种，指定了的都会绘制。
5. 内置悬浮条控件，悬浮条位置支持顶部、底部、左侧、右侧。
6. 悬浮条控件参数包括边距、间距、背景透明度、背景颜色、文本颜色、按下颜色、位置、按钮图标代码集合、按钮名称标识集合、按钮提示信息集合。
7. 悬浮条控件一排工具按钮可自定义，通过结构体参数设置，图标可选图形字体还是自定义图片。
8. 悬浮条按钮内部实现了录像切换、抓拍截图、静音切换、关闭视频等功能，也可以自行在源码中增加自己对应的功能。
9. 悬浮条按钮对应实现了功能的按钮，有对应图标切换处理，比如录像按钮按下后会切换到正在录像中的图标，声音按钮切换后变成静音图标，再次切换还原。
10. 悬浮条按钮单击后都用名称唯一标识作为信号发出，可以自行关联响应处理。
11. 悬浮条空白区域可以显示提示信息，默认显示当前视频分辨率大小，可以增加帧率、码流大小等信息。
12. 视频控件参数包括边框大小、边框颜色、焦点颜色、背景颜色（默认透明）、文字颜色（默认全局文字颜色）、填充颜色（视频外的空白处填充黑色）、背景文字、背景图片（如果设置了图片优先取图片）、是否拷贝图片、缩放显示模式（自动调整、等比例缩放、拉伸填充）、视频显示模式（句柄、绘制、GPU）、启用悬浮条、悬浮条尺寸（横向为高度、纵向为宽度）、悬浮条位置（顶部、底部、左侧、右侧）。


### 5.4 内核ffmpeg
1. 支持各种音视频文件、本地摄像头设备，各种视频流网络流。
2. 支持开始播放、暂停播放、继续播放、停止播放、设置播放进度、倍速播放。
3. 可设置音量、静音切换、抓拍图片、录像存储。
4. 自动提取专辑信息比如标题、艺术家、专辑、专辑封面，自动显示专辑封面。
5. 完美支持音视频同步和倍速播放。
6. 解码策略支持速度优先、质量优先、均衡处理、最快速度。
7. 支持手机视频旋转角度显示，比如一般手机拍摄的视频是旋转了90度的，解码显示的时候需要重新旋转90度才是正的。
8. 自动转换yuv420格式，比如本地摄像头是yuyv422格式，有些视频文件是xx格式，统一将非yuv420格式转换，然后再进行处理。
9. 支持硬解码dxva2、d3d11va等，性能极高尤其是大分辨率比如4K视频。
10. 视频响应极低延迟0.2s左右，极速响应打开视频流0.5s左右，专门做了优化处理。
11. 硬解码和GPU绘制组合，极低CPU占用，比海康大华等客户端更优。
12. 支持视频流中的各种音频格式，AAC、PCM、G.726、G.711A、G.711Mu、G.711ulaw、G.711alaw、MP2L2等都支持，推荐选择AAC兼容性跨平台性最好。
13. 视频存储支持yuv、h264、mp4多种格式，音频存储支持pcm、wav、aac多种格式。默认视频mp4格式、音频aac格式。
14. 支持分开存储音频视频文件，也支持合并到一个mp4文件，默认策略是无论何种音视频文件格式存储，最终都转成mp4及aac格式，然后合并成音视频一起的mp4文件。
15. 支持本地摄像头实时视频显示带音频输入输出，音视频录制合并到一个mp4文件。
16. 支持H264/H265编码（现在越来越多的监控摄像头是H265视频流格式）生成视频文件，内部自动识别切换编码格式。
17. 自动识别视频流动态分辨率改动，重新打开视频流。
18. 支持用户信息中包含特殊字符（比如用户信息中包含+#@等字符）的视频流播放，内置解析转义处理。
19. 纯qt+ffmpeg解码，非sdl等第三方绘制播放依赖，gpu绘制采用qopenglwidget，音频播放采用qaudiooutput。
20. 同时支持ffmpeg2、ffmpeg3、ffmpeg4、ffmpeg5版本，全部做了兼容处理。如果需要支持xp需要选用ffmpeg3及以下。