一、前言
通用悬浮按钮工具栏这个功能经过了好几个版本的迭代,一开始设计的时候是写在视频控件widget窗体中,当时功能简单就放一排按钮在顶部悬浮widget中就好,随着用户需求的变化,用户需要自定义悬浮条的要求越发强烈,而且部分用户还希望悬浮条的位置能够指定,比如可以在顶部、底部、左侧、右侧位置。为了满足各种需求,特意将通用悬浮按钮工具栏单独成类BannerWidget,将所有悬浮条参数放到结构体BannerPara中,可以设置按钮的间距、边距、背景透明度、背景颜色、文本颜色、按下颜色、悬浮条位置等,每个按钮都对应有图标代码、名称标识、提示信息。这些信息都可以动态设置并立即应用,在最外层的视频控件窗体就提供了设置接口。
//悬浮条位置
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>() << "录制" << "抓图" << "声音" << "警情" << "关闭";
}
};
二、效果图
三、体验地址
- 国内站点:https://gitee.com/feiyangqingyun
- 国际站点:https://github.com/feiyangqingyun
- 个人作品:https://blog.csdn.net/feiyangqingyun/article/details/97565652
- 体验地址:https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g 提取码:01jf 文件名:bin_video_demo/bin_linux_video。
四、相关代码
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::Preferred);
} else {
//设置固定宽度
btn->setFixedWidth(20);
//设置拉伸策略使得填充
btn->setSizePolicy(QSizePolicy::Preferred, 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 基础功能
- 支持各种音频视频文件格式,比如mp3、wav、mp4、asf、rm、rmvb、mkv等。
- 支持本地摄像头设备,可指定分辨率、帧率。
- 支持各种视频流格式,比如rtp、rtsp、rtmp、http等。
- 本地音视频文件和网络音视频文件,自动识别文件长度、播放进度、音量大小、静音状态等。
- 文件可以指定播放位置、调节音量大小、设置静音状态等。
- 支持倍速播放文件,可选0.5倍、1.0倍、2.5倍、5.0倍等速度,相当于慢放和快放。
- 支持开始播放、停止播放、暂停播放、继续播放。
- 支持抓拍截图,可指定文件路径,可选抓拍完成是否自动显示预览。
- 支持录像存储,手动开始录像、停止录像,部分内核支持暂停录像后继续录像,跳过不需要录像的部分。
- 支持无感知切换循环播放、自动重连等机制。
- 提供播放成功、播放完成、收到解码图片、收到抓拍图片、视频尺寸变化、录像状态变化等信号。
- 多线程处理,一个解码一个线程,不卡主界面。
5.2 特色功能
- 同时支持多种解码内核,包括qmedia内核(Qt4/Qt5/Qt6)、ffmpeg内核(ffmpeg2/ffmpeg3/ffmpeg4/ffmpeg5)、vlc内核(vlc2/vlc3)、mpv内核(mpv1/mp2)、海康sdk、easyplayer内核等。
- 非常完善的多重基类设计,新增一种解码内核只需要实现极少的代码量,就可以应用整套机制。
- 同时支持多种画面显示策略,自动调整(原始分辨率小于显示控件尺寸则按照原始分辨率大小显示,否则等比例缩放)、等比例缩放(永远等比例缩放)、拉伸填充(永远拉伸填充)。所有内核和所有视频显示模式下都支持三种画面显示策略。
- 同时支持多种视频显示模式,句柄模式(传入控件句柄交给对方绘制控制)、绘制模式(回调拿到数据后转成QImage用QPainter绘制)、GPU模式(回调拿到数据后转成yuv用QOpenglWidget绘制)。
- 支持多种硬件加速类型,ffmpeg可选dxva2、d3d11va等,mpv可选auto、dxva2、d3d11va,vlc可选any、dxva2、d3d11va。不同的系统环境有不同的类型选择,比如linux系统有vaapi、vdpau,macos系统有videotoolbox。
- 解码线程和显示窗体分离,可指定任意解码内核挂载到任意显示窗体,动态切换。
- 支持共享解码线程,默认开启并且自动处理,当识别到相同的视频地址,共享一个解码线程,在网络视频环境中可以大大节约网络流量以及对方设备的推流压力。国内顶尖视频厂商均采用此策略。这样只要拉一路视频流就可以共享到几十个几百个通道展示。
- 自动识别视频旋转角度并绘制,比如手机上拍摄的视频一般是旋转了90度的,播放的时候要自动旋转处理,不然默认是倒着的。
- 自动识别视频流播放过程中分辨率的变化,在视频控件上自动调整尺寸。比如摄像机可以在使用过程中动态配置分辨率,当分辨率改动后对应视频控件也要做出同步反应。
- 音视频文件无感知自动切换循环播放,不会出现切换期间黑屏等肉眼可见的切换痕迹。
- 视频控件同时支持任意解码内核、任意画面显示策略、任意视频显示模式。
- 视频控件悬浮条同时支持句柄、绘制、GPU三种模式,非绝对坐标移来移去。
- 本地摄像头设备支持指定设备名称、分辨率、帧率进行播放。
- 录像文件同时支持打开的视频文件、本地摄像头、网络视频流等。
- 瞬间响应打开和关闭,无论是打开不存在的视频或者网络流,探测设备是否存在,读取中的超时等待,收到关闭指令立即中断之前的操作并响应。
- 支持打开各种图片文件,支持本地音视频文件拖曳播放。
- 视频控件悬浮条自带开始和停止录像切换、声音静音切换、抓拍截图、关闭视频等功能。
- 音频组件支持声音波形值数据解析,可以根据该值绘制波形曲线和柱状声音条,默认提供了声音振幅信号。
- 各组件中极其详细的打印信息提示,尤其是报错信息提示,封装的统一打印格式。针对现场复杂的设备环境测试极其方便有用,相当于精确定位到具体哪个通道哪个步骤出错。
- 代码框架和结构优化到最优,性能强悍,持续迭代更新升级。
- 源码支持Qt4、Qt5、Qt6,兼容所有版本。
5.3 视频控件
- 可动态添加任意多个osd标签信息,标签信息包括名字、是否可见、字号大小、文本文字、文本颜色、标签图片、标签坐标、标签格式(文本、日期、时间、日期时间、图片)、标签位置(左上角、左下角、右上角、右下角、居中、自定义坐标)。
- 可动态添加任意多个图形信息,这个非常有用,比如人工智能算法解析后的图形区域信息直接发给视频控件即可。图形信息支持任意形状,直接绘制在原始图片上,采用绝对坐标。
- 图形信息包括名字、边框大小、边框颜色、背景颜色、矩形区域、路径集合、点坐标集合等。
- 每个图形信息都可指定三种区域中的一种或者多种,指定了的都会绘制。
- 内置悬浮条控件,悬浮条位置支持顶部、底部、左侧、右侧。
- 悬浮条控件参数包括边距、间距、背景透明度、背景颜色、文本颜色、按下颜色、位置、按钮图标代码集合、按钮名称标识集合、按钮提示信息集合。
- 悬浮条控件一排工具按钮可自定义,通过结构体参数设置,图标可选图形字体还是自定义图片。
- 悬浮条按钮内部实现了录像切换、抓拍截图、静音切换、关闭视频等功能,也可以自行在源码中增加自己对应的功能。
- 悬浮条按钮对应实现了功能的按钮,有对应图标切换处理,比如录像按钮按下后会切换到正在录像中的图标,声音按钮切换后变成静音图标,再次切换还原。
- 悬浮条按钮单击后都用名称唯一标识作为信号发出,可以自行关联响应处理。
- 悬浮条空白区域可以显示提示信息,默认显示当前视频分辨率大小,可以增加帧率、码流大小等信息。
- 视频控件参数包括边框大小、边框颜色、焦点颜色、背景颜色(默认透明)、文字颜色(默认全局文字颜色)、填充颜色(视频外的空白处填充黑色)、背景文字、背景图片(如果设置了图片优先取图片)、是否拷贝图片、缩放显示模式(自动调整、等比例缩放、拉伸填充)、视频显示模式(句柄、绘制、GPU)、启用悬浮条、悬浮条尺寸(横向为高度、纵向为宽度)、悬浮条位置(顶部、底部、左侧、右侧)。
5.4 内核ffmpeg
- 支持各种音视频文件、本地摄像头设备,各种视频流网络流。
- 支持开始播放、暂停播放、继续播放、停止播放、设置播放进度、倍速播放。
- 可设置音量、静音切换、抓拍图片、录像存储。
- 自动提取专辑信息比如标题、艺术家、专辑、专辑封面,自动显示专辑封面。
- 完美支持音视频同步和倍速播放。
- 解码策略支持速度优先、质量优先、均衡处理、最快速度。
- 支持手机视频旋转角度显示,比如一般手机拍摄的视频是旋转了90度的,解码显示的时候需要重新旋转90度才是正的。
- 自动转换yuv420格式,比如本地摄像头是yuyv422格式,有些视频文件是xx格式,统一将非yuv420格式转换,然后再进行处理。
- 支持硬解码dxva2、d3d11va等,性能极高尤其是大分辨率比如4K视频。
- 视频响应极低延迟0.2s左右,极速响应打开视频流0.5s左右,专门做了优化处理。
- 硬解码和GPU绘制组合,极低CPU占用,比海康大华等客户端更优。
- 支持视频流中的各种音频格式,AAC、PCM、G.726、G.711A、G.711Mu、G.711ulaw、G.711alaw、MP2L2等都支持,推荐选择AAC兼容性跨平台性最好。
- 视频存储支持yuv、h264、mp4多种格式,音频存储支持pcm、wav、aac多种格式。默认视频mp4格式、音频aac格式。
- 支持分开存储音频视频文件,也支持合并到一个mp4文件,默认策略是无论何种音视频文件格式存储,最终都转成mp4及aac格式,然后合并成音视频一起的mp4文件。
- 支持本地摄像头实时视频显示带音频输入输出,音视频录制合并到一个mp4文件。
- 支持H264/H265编码(现在越来越多的监控摄像头是H265视频流格式)生成视频文件,内部自动识别切换编码格式。
- 自动识别视频流动态分辨率改动,重新打开视频流。
- 支持用户信息中包含特殊字符(比如用户信息中包含+#@等字符)的视频流播放,内置解析转义处理。
- 纯qt+ffmpeg解码,非sdl等第三方绘制播放依赖,gpu绘制采用qopenglwidget,音频播放采用qaudiooutput。
- 同时支持ffmpeg2、ffmpeg3、ffmpeg4、ffmpeg5版本,全部做了兼容处理。如果需要支持xp需要选用ffmpeg3及以下。