老
孟
一个
有态度
的程序员
为什么要使用OpenGL ES播放视频
我们都知道Android中有VideoView控件可以直接播放视频，既简单又实用，那么为什么我们还要用OpenGL ES来播放视频呢？那是因为使用OpenGL ES可以做更多的酷炫的动效，比如旋转视频、双指缩放视频、视频的截图、视频的录制、直播、换脸，还有类似“激萌”App里面的特效等这些都是VideoView所无法实现的，而通过OpenGL ES则可以实现这些酷炫的效果，当然这篇文章不会介绍如何这些实现这些效果，如果想了解这些动效请关注我，后面的文章会一一介绍。
开始我们的表演，No 图 No Code，先来欣赏下效果图吧：
shader
首先我们先创建顶点和片段shader，顶点shader代码如下：
代码语言：javascript复制attribute vec4 a_Position;
attribute vec2 a_TexCoordinate;
varying vec2 v_TexCoord;
void main()
{
v_TexCoord = a_TexCoordinate;
gl_Position = a_Position;
}片段shader代码如下：
代码语言：javascript复制#extension GL_OES_EGL_image_external : require
precision mediump float;
uniform samplerExternalOES u_Texture;
varying vec2 v_TexCoord;
void main()
{
gl_FragColor = texture2D(u_Texture, v_TexCoord);
}注意：顶点和片段shader是单独的文件，分别是video_vs.glsl和video_fs.glsl，存放于assets/glsl目录下。
片段shader中u_Texture是纹理，注意它的类型是samplerExternalOES，并不是sampler2D，sampler2D是2D纹理，用于显示图片，而samplerExternalOES是Android特有的类型，用于绘制视频和相机。
program
shader创建好后，我们编译shader并链接到program，然后获取其中参数的句柄，代码如下：
代码语言：javascript复制override fun onSurfaceCreated(p0: GL10?, p1: EGLConfig?) {
createProgram()
//获取vPosition索引
vPositionLoc = GLES20.glGetAttribLocation(mProgramHandle, "a_Position")
texCoordLoc = GLES20.glGetAttribLocation(mProgramHandle, "a_TexCoordinate")
textureLoc = GLES20.glGetUniformLocation(mProgramHandle, "u_Texture")
...
}
private fun createProgram() {
var vertexCode =
AssetsUtils.readAssetsTxt(
context = context,
filePath = "glsl/video_vs.glsl"
)
var fragmentCode =
AssetsUtils.readAssetsTxt(
context = context,
filePath = "glsl/video_fs.glsl"
)
mProgramHandle = GLTools.createAndLinkProgram(vertexCode, fragmentCode)
}创建texture
视频纹理的创建和2D纹理的创建略有不同，代码如下：
代码语言：javascript复制fun createOESTextureId(): Int {
val textures = IntArray(1)
GLES20.glGenTextures(1, textures, 0)
glCheck("texture generate")
GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, textures[0])
glCheck("texture bind")
GLES20.glTexParameterf(
GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
GLES20.GL_TEXTURE_MIN_FILTER,
GLES20.GL_LINEAR.toFloat()
)
GLES20.glTexParameterf(
GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
GLES20.GL_TEXTURE_MAG_FILTER,
GLES20.GL_LINEAR.toFloat()
)
GLES20.glTexParameteri(
GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
GLES20.GL_TEXTURE_WRAP_S,
GLES20.GL_CLAMP_TO_EDGE
)
GLES20.glTexParameteri(
GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
GLES20.GL_TEXTURE_WRAP_T,
GLES20.GL_CLAMP_TO_EDGE
)
return textures[0]
}不同之处在于
代码语言：javascript复制GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, textures[0]),GLES20.glTexParameterf函数的相关参数说明可以参照OpenGL ES 纹理过滤模式-glTexParameteri。
纹理创建成功后返回纹理id，然后创建SurfaceTexture->Surface，将Surface设置给MediaPlayer，代码如下：
代码语言：javascript复制override fun onSurfaceCreated(p0: GL10?, p1: EGLConfig?) {
...
textureId = GLTools.createOESTextureId()
var surfaceTexture = SurfaceTexture(textureId)
surfaceTexture.setOnFrameAvailableListener(frameAvailableListener)
...
}这里要说下frameAvailableListener，当surfaceTexture有新的一帧数据时将会回调frameAvailableListener，这个时候我们就会更新数据并绘制，在前面的文章我们介绍过在RenderMode=GLSurfaceView.RENDERMODE_WHEN_DIRTY模式下重新绘制需要调用glSurfaceView.requestRender(),因此我们在Activity中实现了frameAvailableListener，并将此实现传递给Renderer，代码如下：
代码语言：javascript复制class VideoActivity : AppCompatActivity(), SurfaceTexture.OnFrameAvailableListener {
override fun onFrameAvailable(surfaceTexture: SurfaceTexture?) {
glSurfaceView.queueEvent {
surfaceTexture?.updateTexImage()
glSurfaceView.requestRender()
}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.surface)
glSurfaceView.setEGLContextClientVersion(2)
glSurfaceView.setRenderer(MyRenderer(context = baseContext, frameAvailableListener = this))
glSurfaceView.renderMode = GLSurfaceView.RENDERMODE_CONTINUOUSLY
}
...
}初始化MediaPlayer并播放视频
这里我们使用Android API自带的MediaPlayer，我个人建议如果是商业项目请使用[ijkplayer（github开源)](https://github.com/bilibili/ijkplayer)，不管是自带的MediaPlayer和ijkplayer完成的是视频编解码工作，ijkplayer性能更加稳定、播放的格式更加全面。
MediaPlayer初始化及视频播放代码如下：
代码语言：javascript复制override fun onSurfaceCreated(p0: GL10?, p1: EGLConfig?) {
...
textureId = GLTools.createOESTextureId()
var surfaceTexture = SurfaceTexture(textureId)
surfaceTexture.setOnFrameAvailableListener(frameAvailableListener)
mediaPlayer = MediaPlayer()
mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC)
val surface = Surface(surfaceTexture)
mediaPlayer.setSurface(surface)
startVideo()
}
fun startVideo() {
try {
mediaPlayer.reset()
val fd = context.assets.openFd("video/lion_chroma.mp4")
mediaPlayer.setDataSource(fd.fileDescriptor,fd.startOffset,fd.length)
mediaPlayer.prepare()
mediaPlayer.start()
} catch (e: Exception) {
Log.e("mqd","$e")
}
}lion_chroma.mp4视频文件我们存放在assets/video目录下，当然你可以播放SD上或者在线视频。
创建顶点坐标、纹理坐标、顶点索引数据
顶点坐标初始化如下：
代码语言：javascript复制var vertexBuffer = GLTools.array2Buffer(
floatArrayOf(
-1.0f, 1.0f, 0.0f, // top left
-1.0f, -1.0f, 0.0f, // bottom left
1.0f, -1.0f, 0.0f, // bottom right
1.0f, 1.0f, 0.0f // top right
)
)纹理坐标初始化如下：
代码语言：javascript复制var texBuffer = GLTools.array2Buffer(
floatArrayOf(
0.0f, 0.0f,
0.0f, 1.0f,
1.0f, 1.0f,
1.0f, 0.0f
)
)顶点索引初始化如下：
代码语言：javascript复制var index = shortArrayOf(3, 2, 0, 0, 1, 2)
val indexBuffer = GLTools.array2Buffer(index)绘制
所有准备工作完成后，开始绘制，代码如下：
代码语言：javascript复制override fun onDrawFrame(p0: GL10?) {
GLES20.glUseProgram(mProgramHandle)
//设置顶点数据
vertexBuffer.position(0)
GLES20.glEnableVertexAttribArray(vPositionLoc)
GLES20.glVertexAttribPointer(vPositionLoc, 3, GLES20.GL_FLOAT, false, 0, vertexBuffer)
//设置纹理顶点数据
texBuffer.position(0)
GLES20.glEnableVertexAttribArray(texCoordLoc)
GLES20.glVertexAttribPointer(texCoordLoc, 2, GLES20.GL_FLOAT, false, 0, texBuffer)
//设置纹理
GLES20.glActiveTexture(GLES20.GL_TEXTURE0)
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId)
GLES20.glUniform1i(textureLoc, 0)
GLES20.glDrawElements(
GLES20.GL_TRIANGLES,
index.size,
GLES20.GL_UNSIGNED_SHORT,
indexBuffer
)
}到此我们的表演就结束了，运行起来就可以看到开始的效果图了，不过这里有一个小小的瑕疵，如果视频的比例和GLSurfaceView（绘制窗口）的比例不一样的话就会出现视频拉伸的现象，后面的文章我们将会解决这个问题，敬请期待。
