备案控制台
开发者社区 阿里云视频云 文章 正文

FFmpeg 开发(08)：FFmpeg 播放器视频渲染优化

2021-02-22 520
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前文中，我们已经利用 FFmpeg + OpenGLES + OpenSLES 实现了一个多媒体播放器，本文将在视频渲染方面对播放器进行优化。

作者：字节流动

来源：https://blog.csdn.net/Kennethdroid/article/details/108737936


FFmpeg 开发系列连载：

前文中，我们已经利用 FFmpeg + OpenGLES + OpenSLES 实现了一个多媒体播放器，本文将在视频渲染方面对播放器进行优化。

视频渲染优化

前文中，我们都是将解码的视频帧通过 swscale 库转换为 RGBA 格式，然后在送给 OpenGL 渲染，而视频帧通常的格式是 YUV420P/YUV420SP ，所以大部分情况下都需要 swscale 进行格式转换。

当视频尺寸比较大时，再用 swscale 进行格式转化的话，就会存在性能瓶颈，所以本文将 YUV 到 RGBA 的格式转换放到 shader 里，用 GPU 来实现格式转换，提升渲染效率。

image.png

本文视频渲染优化，实质上是对 OpenGLRender 视频渲染器进行改进，使其支持 YUV420P 、 NV21 以及 NV12 这些常用格式图像的渲染。

我们在前文一文掌握 YUV 的图像处理中知道，YUV420P 格式的图像在内存中有 3 个平面，YUV420SP （NV21、NV12）格式的图像在内存中有 2 个平面，而 RGBA 格式的图像只有一个平面。

image.pngimage.png

所以，OpenGLRender 视频渲染器要兼容 YUV420P、 YUV420SP 以及 RGBA 格式，需要创建 3 个纹理存储待渲染的数据，渲染 YUV420P 格式的图像需要用到 3 个纹理，渲染 YUV420SP 格式的图像只需用到 2 个纹理即可，而渲染 RGBA 格式图像只需一个纹理。

判断解码后视频帧的格式，AVFrame 是解码后的视频帧。

void VideoDecoder::OnFrameAvailable(AVFrame *frame) {
    LOGCATE("VideoDecoder::OnFrameAvailable frame=%p", frame);
    if(m_VideoRender != nullptr && frame != nullptr) {
        NativeImage image;
    //YUV420P
    if(GetCodecContext()->pix_fmt == AV_PIX_FMT_YUV420P || GetCodecContext()->pix_fmt == AV_PIX_FMT_YUVJ420P) {
            image.format = IMAGE_FORMAT_I420;
            image.width = frame->width;
            image.height = frame->height;
            image.pLineSize[0] = frame->linesize[0];
            image.pLineSize[1] = frame->linesize[1];
            image.pLineSize[2] = frame->linesize[2];
            image.ppPlane[0] = frame->data[0];
            image.ppPlane[1] = frame->data[1];
            image.ppPlane[2] = frame->data[2];
            if(frame->data[0] && frame->data[1] && !frame->data[2] && frame->linesize[0] == frame->linesize[1] && frame->linesize[2] == 0) {
                // on some android device, output of h264 mediacodec decoder is NV12 兼容某些设备可能出现的格式不匹配问题
                image.format = IMAGE_FORMAT_NV12;
            }
        } else if (GetCodecContext()->pix_fmt == AV_PIX_FMT_NV12) { //NV12
            image.format = IMAGE_FORMAT_NV12;
            image.width = frame->width;
            image.height = frame->height;
            image.pLineSize[0] = frame->linesize[0];
            image.pLineSize[1] = frame->linesize[1];
            image.ppPlane[0] = frame->data[0];
            image.ppPlane[1] = frame->data[1];
        } else if (GetCodecContext()->pix_fmt == AV_PIX_FMT_NV21) { //NV21
            image.format = IMAGE_FORMAT_NV21;
            image.width = frame->width;
            image.height = frame->height;
            image.pLineSize[0] = frame->linesize[0];
            image.pLineSize[1] = frame->linesize[1];
            image.ppPlane[0] = frame->data[0];
            image.ppPlane[1] = frame->data[1];
        } else if (GetCodecContext()->pix_fmt == AV_PIX_FMT_RGBA) { //RGBA
            image.format = IMAGE_FORMAT_RGBA;
            image.width = frame->width;
            image.height = frame->height;
            image.pLineSize[0] = frame->linesize[0];
            image.ppPlane[0] = frame->data[0];
        } else {  //其他格式由　swscale 转换为 RGBA                
            sws_scale(m_SwsContext, frame->data, frame->linesize, 0,
                      m_VideoHeight, m_RGBAFrame->data, m_RGBAFrame->linesize);
            image.format = IMAGE_FORMAT_RGBA;
            image.width = m_RenderWidth;
            image.height = m_RenderHeight;
            image.ppPlane[0] = m_RGBAFrame->data[0];
        }
    //将图像传递给渲染器进行渲染
        m_VideoRender->RenderVideoFrame(&image);
    }
}

创建 3 个纹理，但是不指定要加载图像的格式。

// TEXTURE_NUM = 3
glGenTextures(TEXTURE_NUM, m_TextureIds);
for (int i = 0; i < TEXTURE_NUM ; ++i) {
    glActiveTexture(GL_TEXTURE0 + i);
    glBindTexture(GL_TEXTURE_2D, m_TextureIds[i]);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glBindTexture(GL_TEXTURE_2D, GL_NONE);
}

加载不同格式的数据到纹理。

switch (m_RenderImage.format)
{   
    //加载 RGBA 类型的数据
    case IMAGE_FORMAT_RGBA:
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, m_TextureIds[0]);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, m_RenderImage.width, m_RenderImage.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, m_RenderImage.ppPlane[0]);
        glBindTexture(GL_TEXTURE_2D, GL_NONE);
        break;
  //加载 YUV420SP 类型的数据
    case IMAGE_FORMAT_NV21:
    case IMAGE_FORMAT_NV12:
        //upload Y plane data
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, m_TextureIds[0]);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, m_RenderImage.width,
                     m_RenderImage.height, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE,
                     m_RenderImage.ppPlane[0]);
        glBindTexture(GL_TEXTURE_2D, GL_NONE);
        //update UV plane data
        glActiveTexture(GL_TEXTURE1);
        glBindTexture(GL_TEXTURE_2D, m_TextureIds[1]);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE_ALPHA, m_RenderImage.width >> 1,
                     m_RenderImage.height >> 1, 0, GL_LUMINANCE_ALPHA, GL_UNSIGNED_BYTE,
                     m_RenderImage.ppPlane[1]);
        glBindTexture(GL_TEXTURE_2D, GL_NONE);
        break;
  //加载 YUV420P 类型的数据
    case IMAGE_FORMAT_I420:
        //upload Y plane data
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, m_TextureIds[0]);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, m_RenderImage.width,
                     m_RenderImage.height, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE,
                     m_RenderImage.ppPlane[0]);
        glBindTexture(GL_TEXTURE_2D, GL_NONE);
        //update U plane data
        glActiveTexture(GL_TEXTURE1);
        glBindTexture(GL_TEXTURE_2D, m_TextureIds[1]);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, m_RenderImage.width >> 1,
                     m_RenderImage.height >> 1, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE,
                     m_RenderImage.ppPlane[1]);
        glBindTexture(GL_TEXTURE_2D, GL_NONE);
        //update V plane data
        glActiveTexture(GL_TEXTURE2);
        glBindTexture(GL_TEXTURE_2D, m_TextureIds[2]);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, m_RenderImage.width >> 1,
                     m_RenderImage.height >> 1, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE,
                     m_RenderImage.ppPlane[2]);
        glBindTexture(GL_TEXTURE_2D, GL_NONE);
        break;
    default:
        break;
}

对应的顶点着色器和片段着色器，其中重要的是，片段着色器需要针对不同的图像格式采用不用的采样策略。

//顶点着色器
#version 300 es
layout(location = 0) in vec4 a_Position;
layout(location = 1) in vec2 a_texCoord;
out vec2 v_texCoord;
void main()
{
    gl_Position = a_Position;
    v_texCoord = a_texCoord;
}
//片段着色器
#version 300 es
precision highp float;
in vec2 v_texCoord;
layout(location = 0) out vec4 outColor;
uniform sampler2D s_texture0;
uniform sampler2D s_texture1;
uniform sampler2D s_texture2;
uniform int u_ImgType;// 1:RGBA, 2:NV21, 3:NV12, 4:I420
void main()
{
    if(u_ImgType == 1) //RGBA
    {
        outColor = texture(s_texture0, v_texCoord);
    }
    else if(u_ImgType == 2) //NV21
    {
        vec3 yuv;
        yuv.x = texture(s_texture0, v_texCoord).r;
        yuv.y = texture(s_texture1, v_texCoord).a - 0.5;
        yuv.z = texture(s_texture1, v_texCoord).r - 0.5;
        highp vec3 rgb = mat3(1.0,       1.0,     1.0,
        0.0,  -0.344,   1.770,
        1.403,  -0.714,     0.0) * yuv;
        outColor = vec4(rgb, 1.0);
    }
    else if(u_ImgType == 3) //NV12
    {
        vec3 yuv;
        yuv.x = texture(s_texture0, v_texCoord).r;
        yuv.y = texture(s_texture1, v_texCoord).r - 0.5;
        yuv.z = texture(s_texture1, v_texCoord).a - 0.5;
        highp vec3 rgb = mat3(1.0,       1.0,     1.0,
        0.0,  -0.344,   1.770,
        1.403,  -0.714,     0.0) * yuv;
        outColor = vec4(rgb, 1.0);
    }
    else if(u_ImgType == 4) //I420
    {
        vec3 yuv;
        yuv.x = texture(s_texture0, v_texCoord).r;
        yuv.y = texture(s_texture1, v_texCoord).r - 0.5;
        yuv.z = texture(s_texture2, v_texCoord).r - 0.5;
        highp vec3 rgb = mat3(1.0,       1.0,     1.0,
                              0.0,  -0.344,   1.770,
                              1.403,  -0.714,     0.0) * yuv;
        outColor = vec4(rgb, 1.0);
    }
    else
    {
        outColor = vec4(1.0);
    }
}

其中片段着色器 u_ImgType 变量用于设置待渲染图像的格式类型，从而采用不同的采样转换策略。

需要注意的是，YUV 格式图像 UV 分量的默认值分别是 127 ，Y 分量默认值是 0 ，8 个 bit 位的取值范围是 0 ~ 255，由于在 shader 中纹理采样值需要进行归一化，所以 UV 分量的采样值需要分别减去 0.5 ，确保 YUV 到 RGB 正确转换。

联系与交流

技术交流/获取源码可以添加我的微信：Byte-Flow


「视频云技术」你最值得关注的音视频技术公众号，每周推送来自阿里云一线的实践技术文章，在这里与音视频领域一流工程师交流切磋。

阿里云视频云@凡科快图.png

文章标签：
Android开发
计算机视觉
数据可视化
异构计算
存储
关键词：
ffmpeg开发
ffmpeg视频
ffmpeg优化
ffmpeg播放器
ffmpeg播放器优化
视频云技术
目录
相关文章
aqi00
|
1天前
|
编解码 Linux iOS开发
FFmpeg开发笔记（二十三）使用OBS Studio开启RTMP直播推流
OBS（Open Broadcaster Software）是一款开源、跨平台的直播和和Linux。官网为<https://obsproject.com/>。要使用OBS进行直播，需执行四步：1) 下载并安装OBS Studio（<https://obsproject.com/download>），2) 启动流媒体服务器如MediaMTX，生成RTMP推流地址，3) 打开OBS Studio，设置直播服务为自定义RTMP服务器（127.0.0.1:1935/stream），调整视频分辨率，4) 添加视频来源并开始直播。同时，通过FFmpeg的拉流程序验证直播功能正常。
aqi00
10 4
FFmpeg开发笔记（二十三）使用OBS Studio开启RTMP直播推流
aqi00
|
6天前
FFmpeg开发笔记（二十二）FFmpeg中SAR与DAR的显示宽高比
《FFmpeg开发实战》书中指出，视频宽高处理需考虑采样宽高比(SAR)，像素宽高比(PAR)和显示宽高比(DAR)。SAR对应AVCodecParameters的sample_aspect_ratio，PAR为width/height。当SAR的num与den不为1时，需计算DAR以正确显示视频。书中提供了转换公式和代码示例，通过SAR或DAR调整视频尺寸。在修正后的playsync2.c程序中，成功调整了meg.vob视频的比例，实现了正确的画面显示。
aqi00
33 0
FFmpeg开发笔记（二十二）FFmpeg中SAR与DAR的显示宽高比
aqi00
|
7天前
|
编解码 5G Linux
FFmpeg开发笔记（二十一）Windows环境给FFmpeg集成AVS3解码器
AVS3是中国首个8K及5G视频编码标准，相比AVS2和HEVC性能提升约30%。解码器libuavs3d支持8K/60P视频实时解码，兼容多种平台。《FFmpeg开发实战》书中介绍了在Windows环境下如何集成libuavs3d到FFmpeg。集成步骤包括下载源码、使用Visual Studio 2022编译、调整配置、安装库文件和头文件，以及重新配置和编译FFmpeg以启用libuavs3d。
aqi00
25 0
FFmpeg开发笔记（二十一）Windows环境给FFmpeg集成AVS3解码器
aqi00
|
14天前
|
编解码 Linux 5G
FFmpeg开发笔记（二十）Linux环境给FFmpeg集成AVS3解码器
AVS3，中国制定的第三代音视频标准，是首个针对8K和5G的视频编码标准，相比AVS2和HEVC性能提升约30%。uavs3d是AVS3的解码器，支持8K/60P实时解码，且在各平台有优秀表现。要为FFmpeg集成AVS3解码器libuavs3d，需从GitHub下载最新源码，解压后配置、编译和安装。之后，重新配置FFmpeg，启用libuavs3d并编译安装，通过`ffmpeg -version`确认成功集成。
aqi00
29 0
FFmpeg开发笔记（二十）Linux环境给FFmpeg集成AVS3解码器
aqi00
|
15天前
|
存储 缓存 调度
FFmpeg开发笔记（十九）FFmpeg开启两个线程分别解码音视频
《FFmpeg开发实战》第10章示例playsync.c在处理音频流和视频流交错的文件时能实现同步播放，但对于分开存储的格式，会出现先播放全部声音再快速播放视频的问题。为解决此问题，需改造程序，增加音频处理线程和队列，以及相关锁，先将音视频帧读入缓存，再按时间戳播放。改造包括声明新变量、初始化线程和锁、修改数据包处理方式等。代码修改后在playsync2.c中，编译运行成功，控制台显示日志，SDL窗口播放视频并同步音频，证明改造有效。
aqi00
25 0
FFmpeg开发笔记（十九）FFmpeg开启两个线程分别解码音视频
aqi00
|
18天前
FFmpeg开发笔记（十八）FFmpeg兼容各种音频格式的播放
《FFmpeg开发实战》一书中，第10章示例程序playaudio.c原本仅支持mp3和aac音频播放。为支持ogg、amr、wma等非固定帧率音频，需进行三处修改：1）当frame_size为0时，将输出采样数量设为512；2）遍历音频帧时，计算实际采样位数以确定播放数据大小；3）在SDL音频回调函数中，确保每次发送len字节数据。改进后的代码在chapter10/playaudio2.c，可编译运行播放ring.ogg测试，成功则显示日志并播放铃声。
aqi00
21 1
FFmpeg开发笔记（十八）FFmpeg兼容各种音频格式的播放
aqi00
|
18天前
|
算法 Linux Windows
FFmpeg开发笔记（十七）Windows环境给FFmpeg集成字幕库libass
在Windows环境下为FFmpeg集成字幕渲染库libass涉及多个步骤，包括安装freetype、libxml2、gperf、fontconfig、fribidi、harfbuzz和libass。每个库的安装都需要下载源码、配置、编译和安装，并更新PKG_CONFIG_PATH环境变量。最后，重新配置并编译FFmpeg以启用libass及相关依赖。完成上述步骤后，通过`ffmpeg -version`确认libass已成功集成。
aqi00
30 1
FFmpeg开发笔记（十七）Windows环境给FFmpeg集成字幕库libass
xiaowang_lj
|
18天前
|
编解码 C语言
FFMPEG 获取视频PTS
FFMPEG 获取视频PTS
xiaowang_lj
15 0
aqi00
|
18天前
|
安全 Linux Android开发
FFmpeg开发笔记（十六）Linux交叉编译Android的OpenSSL库
该文介绍了如何在Linux服务器上交叉编译Android的FFmpeg库以支持HTTPS视频播放。首先，从GitHub下载openssl源码，解压后通过编译脚本`build_openssl.sh`生成64位静态库。接着，更新环境变量加载openssl，并编辑FFmpeg配置脚本`config_ffmpeg_openssl.sh`启用openssl支持。然后，编译安装FFmpeg。最后，将编译好的库文件导入App工程的相应目录，修改视频链接为HTTPS，App即可播放HTTPS在线视频。
aqi00
36 3
FFmpeg开发笔记（十六）Linux交叉编译Android的OpenSSL库
aqi00
|
18天前
|
Web App开发 Windows
FFmpeg开发笔记（十五）详解MediaMTX的推拉流
MediaMTX是开源轻量级流媒体服务器，提供RTSP, RTMP, HLS, WebRTC和SRT服务。启动后，它在不同端口监听。通过FFmpeg的推拉流测试，证明了MediaMTX成功实现HLS流媒体转发，但HLS播放兼容性问题可能因缺少音频流导致。推流地址为rtsp://127.0.0.1:8554/stream，RTMP地址为rtmp://127.0.0.1:1935/stream，HLS播放地址为http://127.0.0.1:8888/stream（Chrome）和http://127.0.0.1:8888/stream/index.m3u8（其他播放器可能不支持）。
aqi00
62 2
FFmpeg开发笔记（十五）详解MediaMTX的推拉流