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

一、前言

采用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数据。

二、效果图

三、体验地址

1. 国内站点：https://gitee.com/feiyangqingyun
2. 国际站点：https://github.com/feiyangqingyun
3. 个人作品：https://blog.csdn.net/feiyangqingyun/article/details/97565652
4. 体验地址：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);

    //初始化shader
    this->initShader();
    //初始化textures
    this->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);
    //编译shader
    program.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 基础功能

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. 支持抓拍截图，可指定文件路径，可选抓拍完成是否自动显示预览。
9. 支持录像存储，手动开始录像、停止录像，部分内核支持暂停录像后继续录像，跳过不需要录像的部分。
10. 支持无感知切换循环播放、自动重连等机制。
11. 提供播放成功、播放完成、收到解码图片、收到抓拍图片、视频尺寸变化、录像状态变化等信号。
12. 多线程处理，一个解码一个线程，不卡主界面。

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