干货 | 移动端使用OpenGL转场特效的音视频合成应用

这篇具有很好参考价值的文章主要介绍了干货 | 移动端使用OpenGL转场特效的音视频合成应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作者简介

jzg,携程资深前端开发工程师,专注Android开发;

zx,携程高级前端开发工程师,专注iOS开发;

zcc,携程资深前端开发工程师,专注iOS开发。

前言

近年来短视频的火爆,让内容创作类的APP获得了巨大的流量。用户通过这类工具编辑自己的短视频,添加各式各样的炫酷特效,从而呈现出更加丰富多彩的视频内容。本文将会介绍如何使用移动端原生API,将图片添加转场特效并且最终合成为视频的基本流程。

一、音视频基础知识

我们经常会和视频打交道,最常见的就是MP4格式的视频。这样的视频其实一般是由音频和视频组成的音视频容器。下面先会介绍音视频相关概念,为音视频技术的应用作一个铺垫,希望能对音视频频开发者提供一些帮助。

1.1 视频的基础知识

1.1.1 视频帧

视频中的一个基本概念就是帧,帧用来表示一个画面。视频的连续画面就是由一个个连续的视频帧组成。

1.1.2  帧率

帧率,FPS,全称Frames Per Second。指每秒传输的帧数,或者每秒显示的帧数。一般来说,帧率影响画面流畅度,且成正比:帧率越大,画面越流畅;帧率越小,画面越有跳动感。一个较权威的说法:当视频帧率不低于24FPS时,人眼才会觉得视频是连贯的,称为“视觉暂留”现象。16FPS可以达到一定的满意程度,但效果略差。因此,才有说法:尽管帧率越高越流畅,但在很多实际应用场景中24FPS就可以了(电影标准24FPS,电视标准PAL制25FPS)。

1.1.3 分辨率

分辨率,Resolution,也常被俗称为图像的尺寸或者图像的大小。指一帧图像包含的像素的多少,常见有1280x720(720P),1920X1080(1080P)等规格。分辨率影响图像大小,且与之成正比:分辨率越高,图像越大;反之,图像越小。

1.1.4 码率

码率,BPS,全称Bits Per Second。指每秒传送的数据位数,常见单位KBPS(千位每秒)和MBPS(兆位每秒)。码率是更广泛的(视频)质量指标:更高的分辨率,更高的帧率和更低的压缩率,都会导致码率增加。

1.1.5 色彩空间

通常说的色彩空间有两种:

RGB:RGB的颜色模式应该是我们最熟悉的一种,在现在的电子设备中应用广泛。通过R、G、B三种基础色,可以混合出所有的颜色。

YUV:YUV是一种亮度与色度分离的色彩格式,三个字母的意义分别为:

Y:亮度,就是灰度值。除了表示亮度信号外,还含有较多的绿色通道量。单纯的Y分量可以显示出完整的黑白图像。

U:蓝色通道与亮度的差值。

V:红色通道与亮度的差值。

其中,U、V分量分别表示蓝(blue)、红(red)分量信号,只含有色度信息,所以YUV也称为YCbCr,其中,Cb、Cr的含义等同于U、V,C可以理解为component或者color。

RGB和YUV的换算

YUV与RGB相互转换的公式如下(RGB取值范围均为0-255):

Y = 0.299R + 0.587G + 0.114BU = -0.147R - 0.289G + 0.436BV = 0.615R - 0.515G - 0.100B R = Y + 1.14VG = Y - 0.39U - 0.58VB = Y + 2.03U

1.2 音频的基础知识

音频数据的承载方式最常用的是脉冲编码调制,即PCM。

1.2.1 采样率和采样位数

采样率是将声音进行数字化的采样频率,采样位数与记录声波振幅有关,位数越高,记录的就越准确。

1.2.2 声道数

声道数,是指支持能不同发声(注意是不同声音)的音响的个数。

1.2.3 码率

码率,是指一个数据流中每秒钟能通过的信息量,单位bps(bit per second)。

码率 = 采样率 * 采样位数 * 声道数

上面介绍的音视频的数据还需要进行压缩编码,因为音视频的数据量都非常大,按照原始数据保存会非常的耗费空间,而且想要传输这样庞大的数据也很不方便。其实音视频的原始数据中包含大量的重复数据,特别是视频,一帧一帧的画面中包含大量的相似的内容。所以需要对音视频数据进行编码,以便于减小占用的空间,提高传输的效率。

1.3 视频编码

通俗地理解,例如一个视频中,前一秒画面跟当前的画面内容相似度很高,那么这两秒的数据是不是可以不用全部保存,只保留一个完整的画面,下一个画面看有哪些地方有变化了记录下来,拿视频去播放的时候就按这个完整的画面和其他有变化的地方把其他画面也恢复出来。记录画面不同然后保存下来这个过程就是数据编码,根据不同的地方恢复画面的过程就是数据解码。

一般常见的视频编码格式有H26x系列和MPEG系列。
H26x(1/2/3/4/5)系列由ITU(International Telecommunication Union)国际电传视讯联盟主导。
MPEG(1/2/3/4)系列由MPEG(Moving Picture Experts Group, ISO旗下的组织)主导。

H264是新一代的编码标准,以高压缩高质量和支持多种网络的流媒体传输著称。iOS 8.0及以上苹果开放了VideoToolbox框架来实现H264硬编码,开发者可以利用VideoToolbox框架很方便地实现视频的硬编码。

H264编码的优势:

  • 低码率

  • 高质量的图像 

  • 容错能力强

  • 网络适应性强

H264最大的优势,具有很高的数据压缩比率,在同等图像质量下,H264的压缩比是MPEG-2的2倍以上,MPEG-4的1.5~2倍。举例: 原始文件的大小如果为88GB,采用MPEG-2压缩标准压缩后变成3.5GB,压缩比为25∶1,而采用H.264压缩标准压缩后变为879MB,从88GB到879MB,H.264的压缩比达到惊人的102∶1。

1.4 音频编码

和视频编码一样,音频也有许多的编码格式,如:WAV、MP3、WMA、APE、FLAC等等。

AAC

  • AAC是目前比较热门的有损压缩编码技术,并且衍生了LC-AAC,HE-AAC,HE-AAC v2 三种主要编码格式

  • 特点:在小于128Kbit/s的码率下表现优异,并且多用于视频中的音频编码

  • 使用场合:128Kbit/s以下的音频编码,多用于视频中音频轨的编码

WAV

  • 在PCM数据格式的前面加上44字节,描述PCM的采样率、声道数、数据格式等信息,不会压缩

  • 特点:音质好,大量软件支持

  • 使用场合:多媒体开发的中间文件、保存音乐和音效素材

MP3

  • 使用LAME编码

  • 特点:音质在128kbit/s以上表现不错,压缩比较高,大量软件硬件都支持,兼容性好

  • 使用场合:高比特率(传输效率 bps, 这里的b是位,不是比特)对兼容性有要求的音乐欣赏

OGG

  • 特点:可以用比MP3更小的码率实现比MP3更好的音质,高中低码率下均有良好的表现

  • 不足:兼容性不够好,流媒体特性不支持

  • 适合场景:语音聊天的音频消息场景

APE

  • 无损压缩

FLAC

  • 专门针对PCM音频的特点设计的压缩方式,而且可以使用播放器直接播放FLAC压缩的文件

  • 免费,支持大多数操作系统

二、使用OpenGL的底层转场特效和原生平台硬编码进行图片、音乐、转场合成视频需要哪些 API

2.1 Android端和使用流程及相关API介绍

如果想要给图片添加转场特效并且合成为视频,需要使用OpenGL对图片进行渲染,搭配自定义的转场着色器,先让图片"动起来"。然后使用MediaCodec将画面内容进行编码,然后使用MediaMuxer将编码后的内容打包成一个音视频容器文件。

2.1.1 Mediacodec

MediaCodec是从API16后引入的处理音视频编解码的类,它可以直接访问Android底层的多媒体编解码器,通常与MediaExtractor,MediaSync, MediaMuxer,MediaCrypto,MediaDrm,Image,Surface,以及AudioTrack一起使用。

下面是官网提供的MediaCodec工作的流程图:

trackswithmediatype,音视频

我们可以看到左边是input,右边是output。这里要分两种情况来讨论:

1)利用MediaCodec进行解码的时候,输入input是待解码的buffer数据,输出output是解码好的buffer数据。

2)利用MediaCodec进行编码的时候,输入input是一个待编码的数据,输出output是编码好的buffer数据。

val width = 720
    val height = 1280
    val bitrate = 5000
    val encodeType = "video/avc"
    //配置用于编码的MediaCodec
    val mCodec = MediaCodec.createEncoderByType(encodeType)
    val outputFormat = MediaFormat.createVideoFormat(encodeType, width, height)
    outputFormat.setInteger(MediaFormat.KEY_BIT_RATE, bitrate)
    outputFormat.setInteger(MediaFormat.KEY_FRAME_RATE, DEFAULT_ENCODE_FRAME_RATE)
    outputFormat.setInteger(MediaFormat.KEY_I_FRAME_INTERVAL, 1)
    outputFormat.setInteger(MediaFormat.KEY_COLOR_FORMAT, MediaCodecInfo.CodecCapabilities.COLOR_FormatSurface)
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        outputFormat.setInteger(
            MediaFormat.KEY_BITRATE_MODE,
            MediaCodecInfo.EncoderCapabilities.BITRATE_MODE_CQ
        )
    }
    codec.configure(outputFormat, null, null, MediaCodec.CONFIGURE_FLAG_ENCODE)
    //这一步很关键,这一步得到的surface后面将会用到
    val mSurface = codec.createInputSurface()
    mCodec.start()
    val mOutputBuffers = mCodec.outputBuffers
    val mInputBuffers = mCodec.inputBuffers

以上是MediaCodec的作为编码器的基本配置,其中MediaCodec.createInputSurface()这个方法可以为我们创建一个用于向MediaCodec进行输入的surface。这样通过MediaCodec就能获取到编码后的数据了。用这样的方式编码我们不需要向MedaiCodec输入待编码的数据,MediaCodec会自动将输入到surface的数据进行编码。

2.1.2 EGL环境

OpenGL是一组用来操作GPU的API,但它并不能将绘制的内容渲染到设备的窗口上,这里需要一个中间层,用来作为OpenGL和设备窗口之间的桥梁,并且最好是跨平台的,这就是EGL,是由Khronos Group提供的一组平台无关的API。

OpenGL绘制的内容一般都是呈现在GLSurfaceView中的(GLSurfaceView的surface),如果我们需要将内容编码成视频,需要将绘制的内容渲染到MediaCodec提供的Surface中,然后获取MediaCodec输出的编码后的数据,封装到指定的音视频文件中。

创建EGL环境的主要步骤如下:

//1,创建 EGLDisplay
val mEGLDisplay = EGL14.eglGetDisplay(EGL14.EGL_DEFAULT_DISPLAY)
// 2,初始化 EGLDisplay
val version = IntArray(2)
EGL14.eglInitialize(mEGLDisplay, version, 0, version, 1)
// 3,初始化EGLConfig,EGLContext上下文
val config :EGLConfig? = null
if (mEGLContext === EGL14.EGL_NO_CONTEXT) {
    var renderableType = EGL14.EGL_OPENGL_ES2_BIT
        val attrList = intArrayOf(
            EGL14.EGL_RED_SIZE, 8,
            EGL14.EGL_GREEN_SIZE, 8,
            EGL14.EGL_BLUE_SIZE, 8,
            EGL14.EGL_ALPHA_SIZE, 8,
            EGL14.EGL_RENDERABLE_TYPE, renderableType,
            EGL14.EGL_NONE, 0,
            EGL14.EGL_NONE
        )
        //配置Android指定的标记
        if (flags and FLAG_RECORDABLE != 0) {
            attrList[attrList.size - 3] = EGL_RECORDABLE_ANDROID
            attrList[attrList.size - 2] = 1
        }
        val configs = arrayOfNulls<EGLConfig>(1)
        val numConfigs = IntArray(1)


        //获取可用的EGL配置列表
        if (!EGL14.eglChooseConfig(mEGLDisplay, attrList, 0,
                configs, 0, configs.size,
                numConfigs, 0)) {
            configs[0]
        }
    val attr2List = intArrayOf(EGL14.EGL_CONTEXT_CLIENT_VERSION, 2, EGL14.EGL_NONE)
    val context = EGL14.eglCreateContext(
        mEGLDisplay, config, sharedContext,
        attr2List, 0
    )
    mEGLConfig = config
    mEGLContext = context
}
//这里还需要创建一个EGL用于输出的surface,这里的参数就可以传入上一小节介绍的利用MeddiaCodec创建的Surface
 fun createWindowSurface(surface: Any): EGLSurface {
        val surfaceAttr = intArrayOf(EGL14.EGL_NONE)


        val eglSurface = EGL14.eglCreateWindowSurface(
                                        mEGLDisplay, mEGLConfig, surface,
                                        surfaceAttr, 0)


        if (eglSurface == null) {
            throw RuntimeException("Surface was null")
        }


        return eglSurface
    }

配置EGL环境后,还要一个surface作为输出,这里就是要利用MediaCodec创建的surface作为输出,即EGL的输出作为MediaCodec的输入。

2.1.3 MediaMuxer

MediaMuxer是Android平台的音视频合成工具,上面我们介绍了MediaCodec可以编码数据,EGL环境可以让OpenGL程序将绘制的内容渲染到MediaCodec中,MediaCodec将这些数据编码,最后这些编码后的数据需要使用MediaMuxer写入到指定的文件中。

MediaMuxer基本使用:

//创建一个MediaMuxer,需要指定输出保存的路径,和输出保存的格式。
val mediaMuxer = MediaMuxer(path, MediaMuxer.OutputFormat.MUXER_OUTPUT_MPEG_4)
//根据MediaFormat添加媒体轨道
mediaMuxer.addTrack(MediaFormat(...))
//将输入的数据,根据指定的轨道保存到指定的文件路径中。
muxer.writeSampleData(currentTrackIndex, inputBuffer, bufferInfo);
//结合上面的所说的使用MediaCodec获取到已编码的数据
//当前帧的信息
var mBufferInfo = MediaCodec.BufferInfo()
//编码输出缓冲区
var mOutputBuffers: Array<ByteBuffer>? = null
//获取到编码输出的索引,写到指定的保存路径
val index = mCodec.dequeueOutputBuffer(mBufferInfo, 1000)
muxer.writeSampleData(currentTrackIndex,mOutputBuffers[index],mBufferInfo)

2.1.4 MediaExtractor

MediaExtractor是Android平台的多媒体提取器,能够根据视频轨道或者音频轨道去提取对应的数据。在进行视频编辑时,可以利用MediaExtractor来提取指定的音频信息,封装到目标音视频文件中。

//根据指定文件路径创建MediaExtractor
 val mediaExtractor = MediaExtractor(...)
 //为MediaExtractor选择好对应的媒体轨道
 mediaExtractor.selectTrack(...)
 //读取一帧的数据
 val inputBuffer = ByteBuffer.allocate(...)
 mediaExtractor.readSampleData(inputBuffer, 0)
 //进入下一帧
 mediaExtractor.advance()
 //MediaExtractor读取到的音频数据可以使用MediaMuxer的writeSampleData方法写入到指定的文件中

以上就是利用Android平台的硬编码相关API,将OpenGL渲染到画面编码成视频的基本流程介绍。

三、iOS端合成流程及相关API使用

由于AVFoundation原生框架对于图层特效处理能力有限,无法直接生成和写入多张图片之间切换的转场效果,所以需要自行对图片和音乐按照时间线,去实现音视频数据从解码到转场特效应用,以及最终写入文件的整个流程。

那么在多张图片合成视频的过程中,核心的部分就是如何处理多张图片之间的转场效果。这个时候我们需要配合OpenGL底层的特效能力,自定义滤镜将即将要切换的2张图片通过片元着色器生成新的纹理。本质就是在这两个纹理对象上去实现纹理和纹理之间的切换,通过Mix函数混合两个纹理图像,使用time在[0,1]之间不停变化来控制第二个图片纹理混合的强弱变化从而实现渐变效果。接下来开始介绍合成的流程和具体API的使用。

3.1 音视频基础API

在合成的过程中,我们使用到了AVAssetWriter这个类。AVAssetWriter可以将多媒体数据从多个源进行编码(比如接下来的多张图片和一个BGM进行合成)并写入指定文件格式的容器中,比如我们熟知的MPEG-4文件。

3.1.1 AVAssetWriter 与AVAssetWriterInput

AVAssetWriter通常由一个或多个AVAssetWriterInput对象构成,将AVAssetWriterInput配置为可以处理指定的多媒体类型,比如音频或视频,用于添加将包含要写入容器的多媒体数据的CMSampleBufferRef对象。同时因为asset writer可以从多个数据源写入容器,因此必须要为写入文件的每个track(即音频轨道、视频轨道)创建一个对应的AVAssetWriterInput对象。

AVAssetWriterInput可以设置视频的主要参数如输出码率,帧率,最大帧间隔,编码方式,输出分辨率以及填充模式等。也可以设置音频的主要参数如采样率,声道,编码方式,输出码率等。

3.1.2 CMSampleBufferRef 与AVAssetWriterInputPixelBufferAdaptor

CMSampleBuffer是一个基础类,用于处理音视频管道传输中的通用数据。CMSampleBuffer中包含零个或多个某一类型如音频或者视频的采样数据。可以封装音频采集后、编码后、解码后的数据(PCM数据、AAC数据)以及视频编码后的数据(H.264数据)。而CMSampleBufferRef是对CMSampleBuffer的一种引用。在提取音频的时候,像如下的使用方式同步复制输出的下一个示例缓冲区。

CMSampleBufferRef sampleBuffer = [assetReaderAudioOutput copyNextSampleBuffer];

每个AVAssetWriterInput期望以CMSampleBufferRef对象形式接收数据,如果在处理视频样本的数据时,便要将CVPixelBufferRef类型对象(像素缓冲样本数据)添加到asset writer input,这个时候就需要使用AVAssetWriterInputPixelBufferAdaptor 这个专门的适配器类。这个类在附加被包装为CVPixelBufferRef对象的视频样本时提供最佳性能。

AVAssetWriterInputPixelBufferAdaptor它是一个输入的像素缓冲适配器,作为assetWriter的视频输入源,用于把缓冲池中的像素打包追加到视频样本上。在写入文件的时候,需要将CMSampleBufferRef转成CVPixelBuffer,而这个转换是在CVPixelBufferPool中完成的。AVAssetWriterInputPixelBufferAdaptor的实例提供了一个CVPixelBufferPool,可用于分配像素缓冲区来写入输出数据。使用它提供的像素缓冲池进行缓冲区分配通常比使用额外创建的缓冲区更加高效。

CVPixelBufferRef pixelBuffer = NULL;
    CVPixelBufferPoolCreatePixelBuffer(NULL, self.inputPixelBufferAdptor.pixelBufferPool,&pixelBuffer);

每个AVAssetWriterInputPixelBufferAdaptor都包含一个assetWriterInput,用于接收缓冲区中的数据,并且AVAssetWriterInput有一个很重要的属性readyForMoreMediaData,来标识现在缓冲区中的数据是否已经处理完成。通过判断这个属性,我们可以向AVAssetWriterInputPixelBufferAdaptor中添加数据(appendPixelBuffer:)以进行处理。

if(self.inputPixelBufferAdptor.assetWriterInput.isReadyForMoreMediaData) {
    BOOL success = [self.inputPixelBufferAdptor appendPixelBuffer:newPixelBuffer withPresentationTime:self.currentSampleTime];    


    if (success) {
        NSLog(@"append buffer success");
    }
}

3.1.3 设置输入输出参数,以及多媒体数据的采样

第一步:创建AVAssetWriter对象传入生成视频的路径和格式

AVAssetWriter *assetWriter = [[AVAssetWriter alloc] initWithURL:[NSURL fileURLWithPath:outFilePath] fileType:AVFileTypeMPEG4 error:&outError];

第二步:设置输出视频相关信息,如大小,编码格式H264,以及创建视频的输入类videoWriterInput,以便后续给assetReader添加videoWriterInput。

CGSize size = CGSizeMake(480, 960);


NSDictionary *videoSetDic = [NSDictionary dictionaryWithObjectsAndKeys:AVVideoCodecTypeH264,AVVideoCodecKey,
[NSNumber numberWithInt:size.width],AVVideoWidthKey,[NSNumber numberWithInt:size.height],AVVideoHeightKey,nil];


AVAssetWriterInput *videoWriterInput = [[AVAssetWriterInput alloc] initWithMediaType:AVMediaTypeVideo outputSettings:videoSetDic];


//将读取的图片内容添加到assetWriter                                              
if ([assetWriter canAddInput:videoWriterInput]) {
    [assetWriter addInput:videoWriterInput];
}

第三步:创建一个处理视频样本时专用的适配器对象,这个类在附加被包装为CVPixelBufferRef对象的视频样本时能提供最优性能。如果想要将CVPixelBufferRef类型对象添加到asset writer input,就需要使用AVAssetWriterInputPixelBufferAdaptor类。

NSDictionary *pixelBufferAttributes = [NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithInt:kCVPixelFormatType_32BGRA],kCVPixelBufferPixelFormatTypeKey,nil];


AVAssetWriterInputPixelBufferAdaptor *adaptor = [AVAssetWriterInputPixelBufferAdaptor assetWriterInputPixelBufferAdaptorWithAssetWriterInput:videoWriterInput pixelBufferAttributes:pixelBufferAttributes];

第四步:音频数据的采集、添加音频输入

//创建音频资源
AVURLAsset *audioAsset = [[AVURLAsset alloc] initWithURL:audioUrl options:nil];
//创建音频Track
AVAssetTrack *assetAudioTrack = [audioAsset tracksWithMediaType:AVMediaTypeAudio].firstObject;
//创建读取器 
AVAssetReader *assetReader = [[AVAssetReader alloc] initWithAsset:audioAsset error:&error];
//读取音频track中的数据
NSDictionary *audioSettings = @{AVFormatIDKey : [NSNumber numberWithUnsignedInt:kAudioFormatLinearPCM]};


AVAssetReaderTrackOutput *assetReaderAudioOutput = [AVAssetReaderTrackOutput assetReaderTrackOutputWithTrack:assetAudioTrack outputSettings: audioSettings];
//向接收器添加assetReaderAudioOutput输出
if ([assetReader canAddOutput:assetReaderAudioOutput]) {
    [assetReader addOutput:assetReaderAudioOutput];
}


//音频通道数据,设置音频的比特率、采样率的通道数
AudioChannelLayout acl;
bzero( &acl, sizeof(acl));
acl.mChannelLayoutTag = kAudioChannelLayoutTag_Stereo;


NSData *channelLayoutAsData = [NSData dataWithBytes:&acl length:offsetof(AudioChannelLayout, acl)];


NSDictionary *audioSettings = @{AVFormatIDKey:[NSNumber numberWithUnsignedInt:kAudioFormatMPEG4AAC],AVEncoderBitRateKey:[NSNumber numberWithInteger:128000], AVSampleRateKey:[NSNumber numberWithInteger:44100], AVChannelLayoutKey:channelLayoutAsData,AVNumberOfChannelsKey : [NSNumber numberWithUnsignedInteger:2]};
//创建音频的assetWriterAudioInput,将读取的音频内容添加到assetWriter
AVAssetWriterInput *assetWriterAudioInput = [AVAssetWriterInput assetWriterInputWithMediaType:[assetAudioTrack mediaType] outputSettings: audioSettings];


if ([assetWriter canAddInput:assetWriterAudioInput]) {
    [assetWriter addInput:assetWriterAudioInput];
}


//Writer开始进行写入流程
[assetWriter startSessionAtSourceTime:kCMTimeZero];

3.2 转场切换效果中的图片处理

上面介绍了音视频合成的大致流程,但是核心的部分是在于我们在合成视频时,如何去写入第一张和第二张图片展示间隙中的切换过程效果。这个时候就得引入GPUImage这个底层框架,而GPUImage是iOS端对OpenGL的封装。即我们通过继承GPUImageFilter去实现自定义滤镜,并重写片元着色器的效果,通过如下代理回调得到这个过程中返回的一系列处理好的纹理样本数据。

-(void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates;

然后转换成相应的pixelBuffer数据,通过调用appendPixelBuffer:添加到帧缓存中去,从而写入到文件中。

-(BOOL)appendPixelBuffer:(CVPixelBufferRef)pixelBuffer withPresentationTime:(CMTime)presentationTime;

3.2.1 如何自定义滤镜

在GPUImageFilter中默认的着色器程序比较简单,只是简单的进行纹理采样,并没有对像素数据进行相关操作。所以在自定义相关滤镜的时候,我们通常需要自定义片段着色器的效果来处理纹理效果从而达到丰富的转场效果。

我们通过继承GPUImageFilter来自定义我们转场效果所需的滤镜,首先是创建一个滤镜文件compositeImageFilter继承于GPUImageFilter,然后重写父类的方法去初始化顶点和片段着色器。

- (id)initWithVertexShaderFromString:(NSString *)vertexShaderString fragmentShaderFromString:(NSString *)fragmentShaderString;

这个时候需要传入所需的片元着色器代码,那么怎么自定义GLSL文件呢,以下便是如何编写具体的GLSL文件,即片元着色器实现代码。传入纹理的顶点坐标textureCoordinate、2张图片的纹理imageTexture、imageTexture2,通过mix函数混合两个纹理图像,使用time在[0,1]之间不停变化来控制第二个图片纹理混合的强弱变化从而实现渐变效果。

precision highp float;
varying highp vec2 textureCoordinate;
uniform sampler2D imageTexture;
uniform sampler2D imageTexture2;
uniform mediump vec4 v4Param1;
float progress = v4Param1.x;
void main()
{
    vec4 color1 = texture2D(imageTexture, textureCoordinate);
    vec4 color2 = texture2D(imageTextur2, textureCoordinate);
    gl_FragColor = mix(color1, color2, step(1.0-textureCoordinate.x,progress));
}

3.2.2 了解GPUImageFilter中重点API

在GPUImageFilter中有三个最重要的API,GPUImageFilter会将接收到的帧缓存对象经过特定的片段着色器绘制到即将输出的帧缓存对象中,然后将自己输出的帧缓存对象传给所有Targets并通知它们进行处理。方法被调用的顺序:

1)生成新的帧缓存对象

- (void)newFrameReadyAtTime:(CMTime)frameTime atIndex:(NSInteger)textureIndex;

2)进行纹理的绘制  

- (void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates;

3)绘制完成通知所有的target处理下一帧的纹理数据 

- (void)informTargetsAboutNewFrameAtTime:(CMTime)frameTime;

通过如上代理回调就可以得到这个过程中返回的一系列处理好的纹理样本数据。

按照方法调用顺序,我们一般先重写newFrameReadyAtTime方法,构建最新的顶点坐标,生成新的帧缓存对象。

- (void)newFrameReadyAtTime:(CMTime)frameTime atIndex:(NSInteger)textureIndex {
    static const GLfloat imageVertices[] = {
        -1.0f, -1.0f,
        1.0f, -1.0f,
        -1.0f,  1.0f,
        1.0f,  1.0f,
    };
    [self renderToTextureWithVertices:imageVertices textureCoordinates:[[self class] textureCoordinatesForRotation:inputRotation]];
}

然后在这个方法中调用renderToTextureWithVertices去绘制所需的纹理,并获取到最终的帧缓存对象。以下是部分核心代码:

- (void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates {
glClearColor(backgroundColorRed, backgroundColorGreen, backgroundColorBlue, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
glActiveTexture(GL_TEXTURE5);
glBindTexture(GL_TEXTURE_2D, [firstInputFramebuffer texture]);
glUniform1i(filterInputTextureUniform, 5);
glVertexAttribPointer(filterPositionAttribute, 2, GL_FLOAT, 0, 0, [self adjustVertices:vertices]);
glVertexAttribPointer(filterTextureCoordinateAttribute, 2, GL_FLOAT, 0, 0, textureCoordinates);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
glFinish();
CVPixelBufferRef pixel_buffer = NULL;
CVReturn status = CVPixelBufferPoolCreatePixelBuffer(NULL, [self.videoPixelBufferAdaptor pixelBufferPool], &pixel_buffer);
if ((pixel_buffer == NULL) || (status != kCVReturnSuccess)) {
    CVPixelBufferRelease(pixel_buffer);
    return;
} else {
    CVPixelBufferLockBaseAddress(pixel_buffer, 0);
    GLubyte *pixelBufferData = (GLubyte *)CVPixelBufferGetBaseAddress(pixel_buffer);
    glReadPixels(0, 0, self.sizeOfFBO.width, self.sizeOfFBO.height, GL_RGBA, GL_UNSIGNED_BYTE, pixelBufferData);
CVPixelBufferUnlockBaseAddress(pixel_buffer, 0);
        }
    }
}

3.2.3 pixel_buffer的写入

在上述的处理过程当中,我们便获取到了所需的帧缓存样本数据pixel_buffer。而这个数据便是合成转场切换过程中的数据,我们把它进行写入,自此便完成了第一张和第二张图片转场效果效果的写入。待转场效果写入之后,我们便可按照此流程根据时间的进度写入第二张图片以及后续的第二张图片和第三张图片的转场效果。依此类推,一直到写完所有的图片。

CVPixelBufferLockBaseAddress(pixelBuffer, 0);
if (self.assetWriter.status != AVAssetWriterStatusWriting) {
    [self.assetWriter startWriting];
}
[self.assetWriter startSessionAtSourceTime:frameTime];
if (self.assetWriter.status == AVAssetWriterStatusWriting) {
    if (CMTIME_IS_NUMERIC(frameTime) == NO)  {
        CVPixelBufferUnlockBaseAddress(pixelBuffer, 0);
        return;
    }
    //确定写操作是否已完成、失败或已取消
    if ([self.videoPixelBufferAdaptor appendPixelBuffer:pixelBufferwithPresentationTime:frameTime]) {                                                    
        NSLog(@"%f", CMTimeGetSeconds(frameTime));
    }
}else {
    NSLog(@"status:%d", self.assetWriter.status);
    }
CVPixelBufferUnlockBaseAddress(pixelBuffer, 0);

以上便是在iOS端处理音视频合成的具体步骤,难点在于如何使用GPUImage去实现复杂的转场效果并将其写到到容器中。

本文介绍了音视频相关的基本知识,让大家对音视频的关键概念有了一些理解。然后分别介绍了Android和iOS这两个移动平台音视频编解码API,利用这些平台自带的API,我们可以将OpenGL渲染的画面编码成音视频文件。鉴于篇幅限制,文中的流程只截取了部分关键步骤的代码,欢迎大家来交流音视频相关的知识。

【推荐阅读】

  • 瘦身50%-70%,携程 Taro 小程序样式 Size 缩减方案

  • Flutter 地图在携程的最佳实践

  • 携程火车票iOS项目开发体验优化实践

  • 携程机票App KMM iOS工程配置实践

trackswithmediatype,音视频

 “携程技术”公众号

  分享,交流,成长文章来源地址https://www.toymoban.com/news/detail-766760.html

到了这里,关于干货 | 移动端使用OpenGL转场特效的音视频合成应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 音视频-SDL的简单使用

    SDL(Simple DirectMedia Layer)是一套开放源代码的跨平台多媒体开发库,使用C语言写成。SDL提供了数种控制图像、声音、输出入的函数,让开发者只要用相同或是相似的代码就可以开发出跨多个平台(Linux、Windows、Mac OS X等)的应用软件。目前SDL多用于开发游戏、模拟器、媒体播

    2024年01月19日
    浏览(43)
  • 使用Qt进行音视频播放

      Qt对音视频的播放和控制,相机拍照,收音机等多媒体应用提供了强大的支持。Qt5使用了全新的Qt Multimedia模块来实现多媒体应用,而原来Qt4中用于实现多媒体功能的Phonon模块已经被移除。   新的Qt Multimedia模块提供了丰富的接口,使读者可以轻松地使用平台的多媒体功

    2024年02月03日
    浏览(42)
  • 使用Python采集某网站视频,实现音视频自动合成!

      开发环境 模块的使用 采集下破站视频数据 通过开发者工具进行抓包分析,分析破站视频数据的来源。 开发者工具的使用 打开方式: 鼠标右键点击检查选择Network F12 ctrl + shift + i 想要开发者工具中有数据加载, 需要 刷新网页。 通过元素(Element)面板,我们能查看到想抓取

    2024年02月06日
    浏览(60)
  • iOS使用AVCaptureSession实现音视频采集

    AVCaptureSession配置采集行为并协调从输入设备到采集输出的数据流。要执行实时音视频采集,需要实例化采集会话并添加适当的输入和输出。 AVCaptureSession:管理输入输出音视频流 AVCaptureDevice:相机硬件的接口,用于控制硬件特性,诸如镜头的位置(前后摄像头)、曝光、闪光灯

    2024年02月06日
    浏览(44)
  • WebRTC音视频通话-WebRTC本地视频通话使用ossrs服务搭建

    iOS开发-ossrs服务WebRTC本地视频通话服务搭建 之前开发中使用到了ossrs,这里记录一下ossrs支持的WebRTC本地服务搭建。 ossrs是什么呢? SRS(Simple Realtime Server)是一个简单高效的实时视频服务器,支持RTMP、WebRTC、HLS、HTTP-FLV、SRT等多种实时流媒体协议。 官网地址:https://ossrs.net/lt

    2024年02月12日
    浏览(41)
  • gstreamer中使用webrtc实现音视频对讲

    gstreamer官方源代码中有一个基于webrtc插件实现音视频通话的开源项目,下面介绍在Ubuntu系统中如何搭建环境并使用。 这里省略gstreamer安装,直接安装使用webrtcbin插件使用的相关库,参考官网。系统版本建议高于ubuntu18.04。 首先安装如下相关依赖库。 gstreamer项目编译官方建议

    2024年04月11日
    浏览(43)
  • 视频批量混剪剪辑软件类似剪映设计一个模板后, 视频,图片,文字,转场,音频,特效都可以系统随机

    随着自媒体时代的到来,越来越多的人加入到了视频创作行列。然而,视频剪辑是一项繁琐的任务,特别是当你需要批量处理多个视频时。为了提高效率,一款名为“视频闪闪”的批量剪辑软件应运而生。 www.shipinshanshan.com “视频闪闪”具备多种功能,如视频分割、合并、转

    2024年02月05日
    浏览(60)
  • 使用Sora部署实时音视频通信应用实战项目

              本项目将构建一个在线教学平台,实现教师与学生之间的实时音视频通信。 平台将提供教师上传课件、发起授课邀请,学生加入课堂、实时互动等功能。通过使用 Sora ,我们将确保音视频通信的稳定、流畅和低延迟。 目录 一、项目概述 二、准备工作 三、集成

    2024年02月20日
    浏览(54)
  • 如何使用Python进行可视化/音视频处理?

    要使用Python进行可视化和音视频处理,可以使用以下库: matplotlib:用于绘制各种类型的图表和图形,包括折线图、柱状图、散点图等。 seaborn:基于matplotlib的可视化库,提供更高级别的图表和样式,用于创建各种吸引人的统计图表。 plotly:用于创建交互式图表和数据可视化

    2024年02月09日
    浏览(65)
  • 5G时代音视频开发前景怎么样?音视频开发需要掌握哪些技术?(1),手把手教你5G时代Webview的正确使用姿势

    你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你

    2024年04月11日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包