FFmpeg开发XPlay2.0播放器-04 Qt音频及OpenGLShader显示YUV

1 QT 音频

生成pcm文件；

s16le 是双字节  小端对齐

使用ffplay -ar 44100 -ac 2 -f s16le -i out.pcm 命令可以播放pcm，验证pcm文件是否有问题。其中-ar 44100是采样率，在上图可以看到  -ac是通道数   -f 是字节

新建qt工程

一直next,到该页后 加入multimedia

#include <QtCore/QCoreApplication>
#include <QAudioFormat>
#include <QAudioOutput>
#include <QThread>

/*
out.pcm音频数据信息：
采样率:44100
通道数:2
样本字节数：小端对齐2字节
*/
int main(int argc, char *argv[])
{
  QCoreApplication a(argc, argv);

  QAudioFormat fmt;
  fmt.setSampleRate(44100);
  fmt.setSampleSize(16);
  fmt.setChannelCount(2);
  fmt.setCodec("audio/pcm");
  fmt.setByteOrder(QAudioFormat::LittleEndian);
  fmt.setSampleType(QAudioFormat::UnSignedInt);
  QAudioOutput *out = new QAudioOutput(fmt);
  QIODevice *io = out->start(); //开始播放

  int size = out->periodSize();
  char *buf = new char[size];

  FILE *fp = fopen("../../res/out.pcm", "rb");
  while (!feof(fp))
  {
    if (out->bytesFree() < size)
    {
      QThread::msleep(1);
      continue;
    }
    int len = fread(buf, 1, size, fp);
    if (len <= 0)break;
    io->write(buf, len);
  }
  fclose(fp);
  delete buf;
  buf = 0;

  return a.exec();
}

 

QAudioOutput： 
start(); //开始播放
periodSize();//返回以字节为单位的周期大小。这是每个周期所需的数据量，以防止缓冲区不足，并确保不间断播放。注意：建议在每次写入操作中至少提供足够的数据以供整个周期使用。

代码资源：https://download.csdn.net/download/LIJIWEI0611/18355558

2  QT  opengl编程

 

yuv的数据如果直接用QImage显示，单显示就会耗费20/30ms。用opengl显示只会耗费2到3毫秒。同时用QImage显示，yuv转rgba耗费时间也比较大。

1 QOpenGLWidget

为什么用QT的opengl.如果直接用opengl,考虑到刷新频率同步：界面的控件显示与opengl的显示，是两个刷新线程，频率不同，出现闪烁现象。

void paintGL();//具体绘制
void initializeGL();
void resizeGL(int width,int height);//窗口发生变化时
QOpenGLFunctions  opengl的函数

2 QGLShaderProgram

编译运行shader

addShaderFromSourceCode  把sharder的代码传给显卡

bindAtributeLocation 设置传入的变量

uniformLocation 获取变量

 

Program GLSL  顶点和片元（如果与显卡交互）

• 顶点着色器是针对每个顶点执行一次，用于确定顶点的位置；片元着色器是针对每个片元（可以理解为每个像素）执行一次，用于确定每个片元（像素）的颜色
• 顶点着色器->画一个矩形；片元着色器->图像的显示，传入yuv数据，显卡底层也不支持yuv的显示，通过slarder转换
• GLSL的基本语法与C基本相同
• 完美的支持向量和矩阵操作
• GLSL提供了大量的内置函数来提供丰富的扩展功能
• 它是通过限定符操作来管理输入输出类型的

顶点着色器

片元着色器：

顶点信息

z坐标轴为0；方向如图所示，1->2->3 确定一个三角形，再画到4 形成另外一个三角形；矩形的大小为1，不影响材质的显示

材质坐标信息

材质坐标信息全部在第一象限，都是正数；

传入顶点和材质坐标

 

三种GLSL变量类型

varying 顶点与片元共享
attribute 顶点使用，由bindAttributeLocation传入
uniform 程序传入 uniformLocation获取地址 glUniform1i(tetureUniformY,0);设置

顶点shader

 

片元shader

 

材质 Texture (如何写入ffmpeg数据)

创建纹理对象——》绑定纹理对象——》分配内存空间——》设置图片格式——》绑定到帧对象

unsigned int texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 800, 600, 0, GL_RGB, GL_UNSIGNED_BYTE, NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);  
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture, 0); 

写入和绘制材质

glTexImage2D

 

QT工程

提升opengGL Widget,新建一个XVideoWidget

vs：项目-> add Qt class

准备yuv数据：

ffmpeg -i ../../res/test.mp4 -t 10 -s 240x128 -pix_fmt yuv420p  out240x128.yuv

通过-s来设置yuv数据的分辨率；
通过-pix_fmt来设置yuv数据的具体格式

-t 指定截取时间

用ffmpeg播放yuv：

ffplay   -f  rawvideo  -video_size   240x128 -pix_fmt  yuv420p out240x128.yuv

其中-video_size来制定yuv的分辨率，-pix_fmt指定具体格式 

 

工程：https://download.csdn.net/download/LIJIWEI0611/18360089

XVideoWidget cpp

 #include "XVideoWidget.h"
#include <QDebug>
#include <QTimer>
//自动加双引号
#define GET_STR(x) #x
#define A_VER 3
#define T_VER 4

FILE *fp = NULL;

//顶点shader
const char *vString = GET_STR(
  attribute vec4 vertexIn;
  attribute vec2 textureIn;
  varying vec2 textureOut;
  void main(void)
  {
    gl_Position = vertexIn;
    textureOut = textureIn;
  }
);

//片元shader
const char *tString = GET_STR(
  varying vec2 textureOut;
  uniform sampler2D tex_y;
  uniform sampler2D tex_u;
  uniform sampler2D tex_v;
  void main(void)
  {
    vec3 yuv;
    vec3 rgb;
    yuv.x = texture2D(tex_y, textureOut).r;
    yuv.y = texture2D(tex_u, textureOut).r - 0.5;
    yuv.z = texture2D(tex_v, textureOut).r - 0.5;
    rgb = mat3(1.0, 1.0, 1.0,
      0.0, -0.39465, 2.03211,
      1.13983, -0.58060, 0.0) * yuv;
      gl_FragColor = vec4(rgb, 1.0);
   }
);



//准备yuv数据
// ffmpeg -i v1080.mp4 -t 10 -s 240x128 -pix_fmt yuv420p  out240x128.yuv
XVideoWidget::XVideoWidget(QWidget *parent)
  : QOpenGLWidget(parent)
{
}

XVideoWidget::~XVideoWidget()
{
}

//初始化opengl
void XVideoWidget::initializeGL()
{
  qDebug() << "initializeGL";

  //初始化opengl （QOpenGLFunctions继承）函数 
  initializeOpenGLFunctions();

  //program加载shader（顶点和片元）脚本
  //片元（像素）
  qDebug() << program.addShaderFromSourceCode(QGLShader::Fragment, tString);
  //顶点shader
  qDebug() << program.addShaderFromSourceCode(QGLShader::Vertex, vString);

  //设置顶点坐标的变量
  program.bindAttributeLocation("vertexIn", A_VER);

  //设置材质坐标
  program.bindAttributeLocation("textureIn", T_VER);

  //编译shader
  qDebug() << "program.link() = " << program.link();

  qDebug() << "program.bind() = " << program.bind();

  //传递顶点和材质坐标:设置成静态常量，在程序运行中都不会释放，一直使用
  //顶点：三维坐标，最后一个值不传，默认为0
  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
  };

  //顶点               位置索引 每个顶点2个值
  glVertexAttribPointer(A_VER, 2, GL_FLOAT, 0, 0, ver);
  glEnableVertexAttribArray(A_VER);

  //材质
  glVertexAttribPointer(T_VER, 2, GL_FLOAT, 0, 0, tex);
  glEnableVertexAttribArray(T_VER);


  //从shader获取材质
  unis[0] = program.uniformLocation("tex_y");
  unis[1] = program.uniformLocation("tex_u");
  unis[2] = program.uniformLocation("tex_v");

  //创建材质
  glGenTextures(3, texs);

  //Y
  glBindTexture(GL_TEXTURE_2D, texs[0]);
  //放大缩小过滤，线性插值   GL_NEAREST(效率高，但马赛克严重)
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  //创建材质显卡空间
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, width, height, 0, GL_RED, GL_UNSIGNED_BYTE, 0);

  //U
  glBindTexture(GL_TEXTURE_2D, texs[1]);
  //放大缩小过滤，线性插值
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  //创建材质显卡空间
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, width / 2, height / 2, 0, GL_RED, GL_UNSIGNED_BYTE, 0);

  //V
  glBindTexture(GL_TEXTURE_2D, texs[2]);
  //放大缩小过滤，线性插值
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  //创建材质显卡空间
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, width / 2, height / 2, 0, GL_RED, GL_UNSIGNED_BYTE, 0);

  ///分配材质内存空间
  datas[0] = new unsigned char[width*height];		//Y
  datas[1] = new unsigned char[width*height / 4];	//U
  datas[2] = new unsigned char[width*height / 4];	//V

  fp = fopen("../../res/out240x128.yuv", "rb");
  if (!fp)
  {
    qDebug() << "out240x128.yuv file open failed!";
  }


  //启动定时器
  QTimer *ti = new QTimer(this);
  connect(ti, SIGNAL(timeout()), this, SLOT(update()));//定时器刷新->引起 paintGL的调用
  ti->start(40);
}

//刷新显示
void XVideoWidget::paintGL()
{
  //如果到达文件结尾，移动到开头，循环播放
  if (feof(fp))
  {
    fseek(fp, 0, SEEK_SET);
  }
  fread(datas[0], 1, width*height, fp);
  fread(datas[1], 1, width*height / 4, fp);
  fread(datas[2], 1, width*height / 4, fp);

  glActiveTexture(GL_TEXTURE0);
  glBindTexture(GL_TEXTURE_2D, texs[0]); //0层绑定到Y材质
  //修改材质内容(复制内存内容)
  glTexSubImage2D(GL_TEXTURE_2D, 0, 0, 0, width, height, GL_RED, GL_UNSIGNED_BYTE, datas[0]);
  //与shader uni遍历关联
  glUniform1i(unis[0], 0);


  glActiveTexture(GL_TEXTURE0 + 1);
  glBindTexture(GL_TEXTURE_2D, texs[1]); //1层绑定到U材质
                       //修改材质内容(复制内存内容)
  glTexSubImage2D(GL_TEXTURE_2D, 0, 0, 0, width / 2, height / 2, GL_RED, GL_UNSIGNED_BYTE, datas[1]);
  //与shader uni遍历关联
  glUniform1i(unis[1], 1);


  glActiveTexture(GL_TEXTURE0 + 2);
  glBindTexture(GL_TEXTURE_2D, texs[2]); //2层绑定到V材质
                       //修改材质内容(复制内存内容)
  glTexSubImage2D(GL_TEXTURE_2D, 0, 0, 0, width / 2, height / 2, GL_RED, GL_UNSIGNED_BYTE, datas[2]);
  //与shader uni遍历关联
  glUniform1i(unis[2], 2);

  glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
  qDebug() << "paintGL";
}


// 窗口尺寸变化
void XVideoWidget::resizeGL(int width, int height)
{
  qDebug() << "resizeGL " << width << ":" << height;
}

XVideoWidget.h

#pragma once

#include <QOpenGLWidget>
#include <QOpenGLFunctions>
#include <QGLShaderProgram>
class XVideoWidget : public QOpenGLWidget, protected QOpenGLFunctions
{
  Q_OBJECT

public:
  XVideoWidget(QWidget *parent);
  ~XVideoWidget();
protected:
  //刷新显示
  void paintGL();

  //初始化gl
  void initializeGL();

  // 窗口尺寸变化
  void resizeGL(int width, int height);
private:
  //shader程序
  QGLShaderProgram program;

  //shader中yuv变量地址
  GLuint unis[3] = { 0 };
  //openg的 texture地址
  GLuint texs[3] = { 0 };

  //材质内存空间
  unsigned char *datas[3] = { 0 };

  int width = 240;
  int height = 128;

};

效果：