本文源自 RTC 开发者社区，欢迎访问 RTC 开发者社区，与更多开发者交流实时音视频技术、互动直播开发经验，参与更多技术活动。

在这个颜值即正义的时代，不论是通过 Web 还是移动端发起直播，美颜与特效已经是很多直播平台的标配功能。更有甚者，已经开始尝试将AR融入产品，增加更多可以吸引用户的体验。不过要在直播中实现以上任何一个功能，都会对开发者的技术栈提出了进一步的要求。不论是在Web端基于 WebRTC 进行视频通话或在线教育的产品，还是 Android、iOS 上做直播。本文将简要梳理实现特效的原理，以及其中需要注意的难点。

直播特效的实现原理

直播的具体流程，包括：采集、前处理、编码、传输、解码、后处理、播放。通常情况下，我们会在摄像头采集到视频图像后，开始对其进行特效处理，也就是在前处理的过程中进行。

实现直播特效的流程如下：

采集:视频的采集源主要有三种：摄像头采集、屏幕录制和从视频文件推流。直播中常见的是通过摄像头采集的图像。以Android为例，由于需要进行图像的二次处理（滤镜、特效），所以使用 SurfaceTexture来处理图像流，给采集到的图像增添特效、滤镜等。SurfaceTexture 是一个纹理，可以想象成一个 View 的中间件。Camera 把视频采集的内容交给 SurfaceTexture，SurfaceTexture 进行美颜处理，然后把内容交给 SurfaceView，渲染出来。
前处理：对采集到的图像进行处理：比如通过均值模糊、高斯模糊和中值滤波等去噪算法，给原始视频进行“磨皮”；或者利用 GPUImage 库，增加滤镜；又或者是利用 ARCore、ARKit 等工具，为视频添加实时的 AR 特效。
在完成图像的处理后，按照合适码率、格式进行编码。
最后，推流到 CDN。

要实现美颜效果，不论是基于 WebRTC 的移动端还是Web端，都可以通过 GPUImage 来实现。如果是基于 WebRTC 与 React Native、GPUImage 相结合即可，不过需要修改 react-native-webrtc 的源码。

开发中的难点

在直播中实现特效、滤镜，甚至AR特效的例子，我们可以在网上找到很多，我们也曾分享过基于 ARCore、ARKit 来实现。不过其中有很多需要开发者注意的难点。

一、缺乏可扩展性、灵活性

如果通过 WebRTC 来进行开发，WebRTC 提供的渲染器是基于 GLSurfaceView 的 View 组件。与SurfaceView 相比，它没有动画或者变形特效，因为 GLSurfaceView 是窗口 (window)的一部分。因此，如果想往其他地方绘制，或者获取视频数据，就会比较麻烦。

二、需要大量修改源码

通过 WebRTC 的 Native API 是无法获取摄像头数据的，如果要做美颜，需要做大量改动，比如上述提到的修改 react-native-webrtc 源码，也只是其中一部分工作。另外可能还需要调整 WebRTC 源码，并不是拿来即用，这就要求开发者要熟悉 WebRTC。

三、性能与功耗问题

性能与功耗问题在 Android 平台上比较明显。通常情况下，对图像进行处理时，我们可以选择输入 YUV 数据，让 CPU 进行图像处理，然后交给软件/硬件编码器进行编码。但这样做会产生较高的 CPU 占用率，功耗随之增加，App 响应速度受到影响。所以我们需要尽量使用 GPU 来完成图形处理，更多地利用硬件性能。

在编码上也存在相同问题。软件编码的优点是灵活度高，但是缺点是功耗高，影响性能。硬件编码则相对速度更快、功耗更低，是更优的选择。但它的问题在于，能做的优化和参数调整，取决于硬件厂商开放的接口。而且硬件编码在部分 Android 手机上的兼容性也存在问题。

四、硬件兼容性问题

WebRTC 等自研方案还需要考虑硬件的兼容性问题。iOS 设备相对简单，但是在 Android 设备上，不同芯片、系统版本等因素，存在兼容问题。

Agora SDK 2.1版：实现直播特效更灵活

相对于这种自研来讲，声网Agora SDK 将采集和渲染开放，开发者可以更灵活的处理视频数据。如下图绿色部分所示，处理权限开放给开发者，带来更大的灵活性与扩展性。

Capture（采集）：声网Agora SDK 支持自定义的视频源类型，可以方便利用我们提供的辅助类构建 camera 视频源，或者屏幕共享视频源，或者文件视频源等。

添加特效：Agora SDK 的新接口直接利用 Android 系统组件Surface Texture 处理，并传递给 GPU，最后通过Agora SDK 硬件编码器进行视频编码。整条链路上最大限度发挥硬件性能，不经过内存拷贝，不仅可以获得更好的性能与功耗表现，避免影响 App 响应速度，也无需担心硬件编解码问题。

Renderer（渲染）：声网Agora SDK 开放了视频渲染器的接口，用户可以灵活的根据现有的业务，向 Android 标准的 SurfaceView，TextureView组件上或者是自定义的 View 组件上渲染。

开放新功能带来的差异

升级2.1版之前：

在2.1之前的版本中，开发者需要通过 pushExternalVideoSource 接口，以共享Texture id 的方式来实现特效、美颜等功能，即需要传入texture 所在的 EGL Context，以及Texture 的id。

升级2.1之后：

通过2.1版的自定义视频源、自定义渲染器两个新功能，能更灵活地实现想要的效果。通过它们，开发者可以使用原有的共享 texture id 的方式，也可以利用系统组件，如 SurfaceTexture 或者 Surface 来传递 texture。例如，TextureSource 类封装了 SurfaceTexture 对象，开发者可以利用它创建出 EglSurface，美颜处理后得到纹理数据，直接绘制到 EglSurface 上即可。

这两个功能给了我们在视频、图像渲染方面提供更开放的想象空间，可以在直播中实现更多场景，比如我们此前结合 ARCore、ARKit 实现的 AR 场景，再比如类似抖音跳舞机的游戏也能放到直播中。

在 Agora SDK 2.1 中，我们为自定义视频源与自定义渲染器增加了多个新接口，点击这里了解更多详情与接口调用方法。