草庐IT

IOS技术分享| 在iOS WebRTC 中添加美颜滤镜

anyRTC 2023-03-28 原文
在使用WebRTC的时候，对视频进行美颜处理一般有两种方式：替换WebRTC中的采集模块和对视频数据进行美颜。

一、替换WebRTC中的采集模块

替换WebRTC中的采集模块，相对比较简单，使用GPUImageVideoCamera替换WebRTC中的视频采集，得到经过GPUImage添加美颜处理后的图像，发送给WebRTC的OnFrame方法。

参考基于WebRTC框架开发的全平台推拉流SDK：Github

设置美颜

- (void)setBeautyFace:(BOOL)beautyFace{ if(_beautyFace == beautyFace) return; _beautyFace = beautyFace; [_emptyFilter removeAllTargets]; [_filter removeAllTargets]; [_videoCamera removeAllTargets]; if(_beautyFace){ _filter = [[GPUImageBeautifyFilter alloc] init]; _emptyFilter = [[GPUImageEmptyFilter alloc] init]; }else{ _filter = [[GPUImageEmptyFilter alloc] init]; } __weak typeof(self) _self = self; [_filter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) { [_self processVideo:output]; }]; [_videoCamera addTarget:_filter]; if (beautyFace) { [_filter addTarget:_emptyFilter]; if(_gpuImageView) [_emptyFilter addTarget:_gpuImageView]; } else { if(_gpuImageView) [_filter addTarget:_gpuImageView]; } }

格式转换

GPUImage处理后的Pixel格式为BGRA,当处理完成后需要转换为I420格式，用于内部处理和渲染。

WebRTC 在编码的时候使用的是NV12格式的Pixel，所以在编码的时候会进行二次格式转换

-(void) processVideo:(GPUImageOutput *)output{ rtc::CritScope cs(&cs_capture_); if (!_isRunning) { return; } @autoreleasepool { GPUImageFramebuffer *imageFramebuffer = output.framebufferForOutput; size_t width = imageFramebuffer.size.width; size_t height = imageFramebuffer.size.height; uint32_t size = width * height * 3 / 2; if(self.nWidth != width || self.nHeight != height) { self.nWidth = width; self.nHeight = height; if(_dst) delete[] _dst; _dst = NULL; } if(_dst == NULL) { _dst = new uint8_t[size]; } uint8_t* y_pointer = (uint8_t*)_dst; uint8_t* u_pointer = (uint8_t*)y_pointer + width*height; uint8_t* v_pointer = (uint8_t*)u_pointer + width*height/4; int y_pitch = width; int u_pitch = (width + 1) >> 1; int v_pitch = (width + 1) >> 1; libyuv::ARGBToI420([imageFramebuffer byteBuffer], width * 4, y_pointer, y_pitch, u_pointer, u_pitch, v_pointer, v_pitch, width, height); if(self.bVideoEnable) libyuv::I420Rect(y_pointer, y_pitch, u_pointer, u_pitch, v_pointer, v_pitch, 0, 0, width, height, 32, 128, 128); if(_capturer != nil) _capturer->CaptureYUVData(_dst, width, height, size); } }

美颜后的数据发送给WebRTC的OnFrame方法

GPUImageVideoCapturer 类为GPUImage 封装的摄像头类，跟WebRTC中的采集类功能保持一致，继承 cricket::VideoCapturer 类，便可以往WebRTC中塞入采集的音视频流。

namespace webrtc { // 继承cricket::VideoCapturer class GPUImageVideoCapturer : public cricket::VideoCapturer { ... } } void GPUImageVideoCapturer::CaptureYUVData(const webrtc::VideoFrame& frame, int width, int height) { VideoCapturer::OnFrame(frame, width, height); }

二、对视频数据进行美颜

对视频数据美颜的思路就是传统的第三方美颜SDK的做法，对内部采集的音视频数据进行处理：内部采集的数据（CVPixelBufferRef）-》转换为纹理（GLuint）-》对纹理进行音视频的美颜-》美颜的纹理转换为iOS的采集数据（CVPixelBufferRef）-》返回给WebRTC内部进行渲染编码和传输。

同步线程

内部处理的一般都是使用同步线程，这样能够保证数据线性流动，参阅GPUImage中的代码片段

runSynchronouslyOnVideoProcessingQueue(^{ // 美颜处理 });

把CVPixelBufferRef 数据转换为纹理（GLuint）

RGB格式类型的转换方式
  • CoreVideo框架的方法：使用此方法可以创建CVOpenGLESTextureRef纹理，并通过CVOpenGLESTextureGetName(texture)获取纹理id。

    - (GLuint)convertRGBPixelBufferToTexture:(CVPixelBufferRef)pixelBuffer { if (!pixelBuffer) { return 0; } CGSize textureSize = CGSizeMake(CVPixelBufferGetWidth(pixelBuffer), CVPixelBufferGetHeight(pixelBuffer)); CVOpenGLESTextureRef texture = nil; CVReturn status = CVOpenGLESTextureCacheCreateTextureFromImage(nil, [[GPUImageContext sharedImageProcessingContext] coreVideoTextureCache], pixelBuffer, nil, GL_TEXTURE_2D, GL_RGBA, textureSize.width, textureSize.height, GL_BGRA, GL_UNSIGNED_BYTE, 0, &texture); if (status != kCVReturnSuccess) { NSLog(@"Can't create texture"); } self.renderTexture = texture; return CVOpenGLESTextureGetName(texture); }
  • OpenGL的方法：创建纹理对象，使用glTexImage2D方法上传CVPixelBufferRef中图像数据data到纹理对象中。

    glBindTexture(GL_TEXTURE_2D, [outputFramebuffer texture]); glTexImage2D(GL_TEXTURE_2D, 0, _pixelFormat==GPUPixelFormatRGB ? GL_RGB : GL_RGBA, (int)uploadedImageSize.width, (int)uploadedImageSize.height, 0, (GLint)_pixelFormat, (GLenum)_pixelType, bytesToUpload);
YUV格式类型的转换方式
- (GLuint)convertYUVPixelBufferToTexture:(CVPixelBufferRef)pixelBuffer { if (!pixelBuffer) { return 0; } CGSize textureSize = CGSizeMake(CVPixelBufferGetWidth(pixelBuffer), CVPixelBufferGetHeight(pixelBuffer)); [EAGLContext setCurrentContext:self.context]; GLuint frameBuffer; GLuint textureID; // FBO glGenFramebuffers(1, &frameBuffer); glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer); // texture glGenTextures(1, &textureID); glBindTexture(GL_TEXTURE_2D, textureID); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, textureSize.width, textureSize.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, textureID, 0); glViewport(0, 0, textureSize.width, textureSize.height); // program glUseProgram(self.yuvConversionProgram); // texture CVOpenGLESTextureRef luminanceTextureRef = nil; CVOpenGLESTextureRef chrominanceTextureRef = nil; CVReturn status = CVOpenGLESTextureCacheCreateTextureFromImage(kCFAllocatorDefault, self.textureCache, pixelBuffer, nil, GL_TEXTURE_2D, GL_LUMINANCE, textureSize.width, textureSize.height, GL_LUMINANCE, GL_UNSIGNED_BYTE, 0, &luminanceTextureRef); if (status != kCVReturnSuccess) { NSLog(@"Can't create luminanceTexture"); } status = CVOpenGLESTextureCacheCreateTextureFromImage(kCFAllocatorDefault, self.textureCache, pixelBuffer, nil, GL_TEXTURE_2D, GL_LUMINANCE_ALPHA, textureSize.width / 2, textureSize.height / 2, GL_LUMINANCE_ALPHA, GL_UNSIGNED_BYTE, 1, &chrominanceTextureRef); if (status != kCVReturnSuccess) { NSLog(@"Can't create chrominanceTexture"); } glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, CVOpenGLESTextureGetName(luminanceTextureRef)); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glUniform1i(glGetUniformLocation(self.yuvConversionProgram, "luminanceTexture"), 0); glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, CVOpenGLESTextureGetName(chrominanceTextureRef)); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glUniform1i(glGetUniformLocation(self.yuvConversionProgram, "chrominanceTexture"), 1); GLfloat kXDXPreViewColorConversion601FullRange[] = { 1.0, 1.0, 1.0, 0.0, -0.343, 1.765, 1.4, -0.711, 0.0, }; GLuint yuvConversionMatrixUniform = glGetUniformLocation(self.yuvConversionProgram, "colorConversionMatrix"); glUniformMatrix3fv(yuvConversionMatrixUniform, 1, GL_FALSE, kXDXPreViewColorConversion601FullRange); // VBO glBindBuffer(GL_ARRAY_BUFFER, self.VBO); GLuint positionSlot = glGetAttribLocation(self.yuvConversionProgram, "position"); glEnableVertexAttribArray(positionSlot); glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0); GLuint textureSlot = glGetAttribLocation(self.yuvConversionProgram, "inputTextureCoordinate"); glEnableVertexAttribArray(textureSlot); glVertexAttribPointer(textureSlot, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3* sizeof(float))); glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); glDeleteFramebuffers(1, &frameBuffer); glBindFramebuffer(GL_FRAMEBUFFER, 0); glBindBuffer(GL_ARRAY_BUFFER, 0); glFlush(); self.luminanceTexture = luminanceTextureRef; self.chrominanceTexture = chrominanceTextureRef; if (luminanceTextureRef) { CFRelease(luminanceTextureRef); } if (chrominanceTextureRef) { CFRelease(chrominanceTextureRef); } return textureID; }

使用GPUImageTextureInput 加载滤镜和使用GPUImageTextureOutput输出数据

[GPUImageContext setActiveShaderProgram:nil]; GPUImageTextureInput *textureInput = [[ARGPUImageTextureInput alloc] initWithTexture:textureID size:size]; GPUImageSmoothToonFilter *filter = [[GPUImageSmoothToonFilter alloc] init]; [textureInput addTarget:filter]; GPUImageTextureOutput *textureOutput = [[GPUImageTextureOutput alloc] init]; [filter addTarget:textureOutput]; [textureInput processTextureWithFrameTime:kCMTimeZero]; 得到textureOutput，即得到输出的纹理。

GPUImageTextureOutput纹理转化为CVPixelBufferRef 数据

- (CVPixelBufferRef)convertTextureToPixelBuffer:(GLuint)texture textureSize:(CGSize)textureSize { [EAGLContext setCurrentContext:self.context]; CVPixelBufferRef pixelBuffer = [self createPixelBufferWithSize:textureSize]; GLuint targetTextureID = [self convertRGBPixelBufferToTexture:pixelBuffer]; GLuint frameBuffer; // FBO glGenFramebuffers(1, &frameBuffer); glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer); // texture glBindTexture(GL_TEXTURE_2D, targetTextureID); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, textureSize.width, textureSize.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, targetTextureID, 0); glViewport(0, 0, textureSize.width, textureSize.height); // program glUseProgram(self.normalProgram); // texture glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, texture); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glUniform1i(glGetUniformLocation(self.normalProgram, "renderTexture"), 0); // VBO glBindBuffer(GL_ARRAY_BUFFER, self.VBO); GLuint positionSlot = glGetAttribLocation(self.normalProgram, "position"); glEnableVertexAttribArray(positionSlot); glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0); GLuint textureSlot = glGetAttribLocation(self.normalProgram, "inputTextureCoordinate"); glEnableVertexAttribArray(textureSlot); glVertexAttribPointer(textureSlot, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3* sizeof(float))); glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); glDeleteFramebuffers(1, &frameBuffer); glBindFramebuffer(GL_FRAMEBUFFER, 0); glBindBuffer(GL_ARRAY_BUFFER, 0); glFlush(); return pixelBuffer; } 把美颜后的CVPixelBufferRef同步返回给SDK，进行渲染传输。

三、总结

对音视频的美颜，已经成为了音视频应用的常用功能，除了上述两种做法外，还可以使用第三方美颜，一般音视频厂商都有提供自采集功能，而第三方美颜功能则提供有采集美颜相机功能，二者正好可以无缝结合。如果自身的应用中对美颜要求不是很高，采用音视频SDK自带的美颜即可（美白、美颜、红润），如果用在娱乐场景，除了美颜，还要美型（廋脸，大眼）、贴纸（2D、3D）的，必须要集成第三方美颜SDK了。

WebRTCIOSTEXTUREGL_TEXTUREGLios技术分享音视频webrtc美颜webrtc美颜iOS移动开发

有关IOS技术分享| 在iOS WebRTC 中添加美颜滤镜的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  3. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  4. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象？ - 2

    当谈到运行时自省(introspection)和动态代码生成时，我认为ruby​​没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby​​的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

  5. ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2

    我注意到类定义，如果我打开classMyClass，并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义，我仍然想要与类定义相同的行为，但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了，我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同，类似于super，但不一定是子类？ 最佳答案 我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca

  6. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  7. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  8. Unity 热更新技术 | （三） Lua语言基本介绍及下载安装 - 2

    ?博客主页：https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创，首发于CSDN??学习专栏推荐：Unity系统学习专栏?游戏制作专栏推荐：游戏制作?Unity实战100例专栏推荐：Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正！?未来很长，值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  9. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  10. ruby-on-rails - 在 Ruby on Rails 中添加 boolean 列值 - 2

    我正在开发一个创建网络博客的RubyonRails项目。我希望将一个名为featured的boolean数据库字段添加到Post模型中。该字段应该可以通过我添加的事件管理界面进行编辑。我使用了以下代码，但我什至没有在网站上显示另一列。$railsgeneratemigrationaddFeaturedfeatured:boolean$rakedb:migrate我是RubyonRails的新手，非常感谢任何帮助。我的index.html.erb文件中的相关代码(views):FeaturedPost架构.rb:ActiveRecord::Schema.define(:version=>

随机推荐