当前位置：首页 > news >正文

Qt音视频开发24-视频显示QOpenGLWidget方式（占用GPU）

news 文章来源：https://blog.csdn.net/feiyangqingyun/article/details/129610909 2025/1/11 19:43:36

一、前言

采用painter的方式绘制解码后的图片，方式简单易懂，巨大缺点就是占CPU，一个两个通道还好，基本上CPU很低，但是到了16个64个通道的时候，会发现CPU也是很吃紧（当然强劲的电脑配置另当别论），这就需要考虑用opengl来绘制了，采用opengl走的GPU，会占用很少的CPU（一般是部分运算），而且一般ffmpeg采集到的就是yuv数据，可以直接用opengl来绘制，并不需要转成rgb格式的图片，转换也会占用不少的CPU资源。在Qt中一般用QOpenGLWidget来绘制yuv数据，正常解码后的yuv420p格式以及硬解码后的NV12格式，这两种需要不同的代码去绘制，所以考虑可以分两个不同的QOpenGLWidget，也可以在一个widget中通过标志位设置是何种类型，然后再去调用对应的绘制代码。

其实QOpenGLWidget也可以绘制rgb数据，意味着采集到的qimage图片也可以将对应数据交给QOpenGLWidget来绘制，总体CPU占用比纯painter绘制低一些，但是比直接绘制yuv要高一些，毕竟采集到的数据默认是yuv，需要重新转换成rgb，这个转换过程又占用了一些CPU运算。至于为何会有这种需求？有一个原因是yuv有点色差，不知道什么原因，比如网上都是 rgb = mat3(1.0, 1.0, 1.0, 0.0, -0.39465, 2.03211, 1.13983, -0.58060, 0.0) * yuv; 或者 rgb = mat3(1.0, 1.0, 1.0, 0.0, -0.3455, 1.779, 1.4075, -0.7169, 0.0) * yuv; （推荐后者）里面这几个值慢慢调可以改变对应的颜色，但是始终调不到rgb的正确的颜色，所以对色差有严格要求的可以考虑这个折中的办法用QOpenGLWidget绘制rgb数据。

二、效果图

在这里插入图片描述

三、体验地址

国内站点：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。

四、相关代码

#include "yuvopenglwidget.h"
#include "openglinclude.h"YuvWidget::YuvWidget(QWidget *parent) : QOpenGLWidget(parent)
{//GLSL3.0版本后废弃了attribute/varying对应用in/out作为前置关键字QStringList list;list << "attribute vec4 vertexIn;";list << "attribute vec2 textureIn;";list << "varying vec2 textureOut;";list << "void main(void)";list << "{";list << "  gl_Position = vertexIn;";list << "  textureOut = textureIn;";list << "}";shaderVert = list.join("");list.clear();initFragment(list);list << "varying mediump vec2 textureOut;";list << "uniform sampler2D textureY;";list << "uniform sampler2D textureU;";list << "uniform sampler2D textureV;";list << "void main(void)";list << "{";list << "  vec3 yuv;";list << "  vec3 rgb;";//可以自行注释xyz以及调整差值看效果(把yz注释画面变成黑白)list << "  yuv.r = texture2D(textureY, textureOut).r;";list << "  yuv.g = texture2D(textureU, textureOut).r - 0.5;";list << "  yuv.b = texture2D(textureV, textureOut).r - 0.5;";//list << "  rgb = mat3(1.0, 1.0, 1.0, 0.0, -0.39465, 2.03211, 1.13983, -0.58060, 0.0) * yuv;";//list << "  rgb = mat3(1.0, 1.0, 1.0, 0.0, -0.3455, 1.779, 1.4075, -0.7169, 0.0) * yuv;";list << "  rgb = mat3(1.0, 1.0, 1.0, 0.0, -0.138, 1.816, 1.540, -0.459, 0.0) * yuv;";list << "  gl_FragColor = vec4(rgb, 1.0);";list << "}";shaderFrag = list.join("");yuyv = false;this->initData();//关联定时器读取文件connect(&timer, SIGNAL(timeout()), this, SLOT(read()));
}YuvWidget::~YuvWidget()
{makeCurrent();doneCurrent();
}void YuvWidget::setYuyv(bool yuyv)
{this->yuyv = yuyv;
}void YuvWidget::clear()
{this->initData();this->update();
}void YuvWidget::setFrameSize(int width, int height)
{this->width = width;this->height = height;
}void YuvWidget::updateTextures(quint8 *dataY, quint8 *dataU, quint8 *dataV, quint32 linesizeY, quint32 linesizeU, quint32 linesizeV)
{this->dataY = dataY;this->dataU = dataU;this->dataV = dataV;this->linesizeY = linesizeY;this->linesizeU = linesizeU;this->linesizeV = linesizeV;this->update();
}void YuvWidget::updateFrame(int width, int height, quint8 *dataY, quint8 *dataU, quint8 *dataV, quint32 linesizeY, quint32 linesizeU, quint32 linesizeV)
{this->setFrameSize(width, height);this->updateTextures(dataY, dataU, dataV, linesizeY, linesizeU, linesizeV);
}void YuvWidget::initializeGL()
{initializeOpenGLFunctions();glDisable(GL_DEPTH_TEST);//传递顶点和纹理坐标static const GLfloat ver[] = {-1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f};static const GLfloat tex[] = {0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f};//设置顶点,纹理数组并启用glVertexAttribPointer(0, 2, GL_FLOAT, 0, 0, ver);glEnableVertexAttribArray(0);glVertexAttribPointer(1, 2, GL_FLOAT, 0, 0, tex);glEnableVertexAttribArray(1);//初始化shaderthis->initShader();//初始化texturesthis->initTextures();//初始化颜色this->initColor();
}void YuvWidget::paintGL()
{if (!dataY || width == 0 || height == 0) {this->initColor();return;}glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, textureY);glPixelStorei(GL_UNPACK_ROW_LENGTH, linesizeY);glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, width, height, 0, GL_RED, GL_UNSIGNED_BYTE, dataY);glUniform1i(textureUniformY, 0);glActiveTexture(GL_TEXTURE1);glBindTexture(GL_TEXTURE_2D, textureU);glPixelStorei(GL_UNPACK_ROW_LENGTH, linesizeU);glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, width >> 1, yuyv ? height : height >> 1, 0, GL_RED, GL_UNSIGNED_BYTE, dataU);glUniform1i(textureUniformU, 1);glActiveTexture(GL_TEXTURE2);glBindTexture(GL_TEXTURE_2D, textureV);glPixelStorei(GL_UNPACK_ROW_LENGTH, linesizeV);glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, width >> 1, yuyv ? height : height >> 1, 0, GL_RED, GL_UNSIGNED_BYTE, dataV);glUniform1i(textureUniformV, 2);glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
}void YuvWidget::initData()
{width = height = 0;dataY = dataU = dataV = 0;linesizeY = linesizeU = linesizeV = 0;
}void YuvWidget::initColor()
{//取画板背景颜色QColor color = palette().window().color();//设置背景清理色glClearColor(color.redF(), color.greenF(), color.blueF(), color.alphaF());//清理颜色背景glClear(GL_COLOR_BUFFER_BIT);
}void YuvWidget::initShader()
{//加载顶点和片元脚本program.addShaderFromSourceCode(QOpenGLShader::Vertex, shaderVert);program.addShaderFromSourceCode(QOpenGLShader::Fragment, shaderFrag);//设置顶点位置program.bindAttributeLocation("vertexIn", 0);//设置纹理位置program.bindAttributeLocation("textureIn", 1);//编译shaderprogram.link();program.bind();//从shader获取地址textureUniformY = program.uniformLocation("textureY");textureUniformU = program.uniformLocation("textureU");textureUniformV = program.uniformLocation("textureV");
}void YuvWidget::initTextures()
{//创建纹理glGenTextures(1, &textureY);glBindTexture(GL_TEXTURE_2D, textureY);this->initParamete();glGenTextures(1, &textureU);glBindTexture(GL_TEXTURE_2D, textureU);this->initParamete();glGenTextures(1, &textureV);glBindTexture(GL_TEXTURE_2D, textureV);this->initParamete();
}void YuvWidget::initParamete()
{//具体啥意思 https://blog.csdn.net/d04421024/article/details/5089641//纹理过滤//GL_TEXTURE_MAG_FILTER: 放大过滤//GL_TEXTURE_MIN_FILTER: 缩小过滤//GL_LINEAR: 线性插值过滤,获取坐标点附近4个像素的加权平均值//GL_NEAREST: 最临近过滤,获得最靠近纹理坐标点的像素glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);//纹理贴图//GL_TEXTURE_2D: 操作2D纹理//GL_TEXTURE_WRAP_S: S方向上的贴图模式//GL_TEXTURE_WRAP_T: T方向上的贴图模式//GL_CLAMP: 将纹理坐标限制在0.0,1.0的范围之内,如果超出了会如何呢,不会错误,只是会边缘拉伸填充//GL_CLAMP_TO_EDGE: 超出纹理范围的坐标被截取成0和1,形成纹理边缘延伸的效果glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP);glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
}void YuvWidget::deleteTextures()
{glDeleteTextures(1, &textureY);glDeleteTextures(1, &textureU);glDeleteTextures(1, &textureV);
}void YuvWidget::read()
{qint64 len = (width * height * 3) >> 1;if (file.read((char *)dataY, len)) {this->update();} else {timer.stop();emit playFinsh();}
}void YuvWidget::play(const QString &fileName, int frameRate)
{//停止定时器并关闭文件if (timer.isActive()) {timer.stop();}if (file.isOpen()) {file.close();}file.setFileName(fileName);if (!file.open(QIODevice::ReadOnly)) {return;}//初始化对应数据指针位置dataY = new quint8[(width * height * 3) >> 1];dataU = dataY + (width * height);dataV = dataU + ((width * height) >> 2);//启动定时器读取文件数据timer.start(1000 / frameRate);
}void YuvWidget::stop()
{//停止定时器并关闭文件if (timer.isActive()) {timer.stop();}if (file.isOpen()) {file.close();}this->clear();emit playFinsh();
}

五、功能特点

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）、启用悬浮条、悬浮条尺寸（横向为高度、纵向为宽度）、悬浮条位置（顶部、底部、左侧、右侧）。