在React Native中使用WebRTC并加上美颜滤镜

React Native + WebRTC + GPUImage一套解决方案

简介

想给爸妈视频的时候加点美颜效果，然后再电脑上也能看，本人是前端，所以技术选型如下：

• react-native-webrtc
• WebRTC 57版本
• GPUImage + BeautifyFaceDemo
• Swift + OC混编

大体步骤如下

1. 更改WebRTC源码，将摄像头获取到的CMSampleBuffer传递出去，然后新增一个接口接受更改好的CVPixelBuffer。
2. 将接收到的sample buffer传递给GPUImageMovie进行处理，给GPUImageMovie添加任意滤镜
3. 使用最新master上的GPUImage，其给GPUImageFrameBuffer暴露了获取CVPixelBuffer的接口
4. 自己写一个简单的GPUImagePixelOutput用上一条说的接口输出加好滤镜的CVPixelBuffer。
5. 然后将这个pixel buffer传回到WebRTC中。
   • 你传回去的这个pixel buffer已经被GPUImage处理成RGBA颜色的了，可是WebRTC只支持解析YUV的视频，为了让它能正常展示，我们需要用H264编码，而不是默认的VP8，如果在SDP文件中写明了视频是H264的，视频传递给别的客户端之前是会被进行编码的，这个时候就不管你输入是RGBA还是YUV都能得到正确的处理。
   • 然而，这个时候WebRTC有两个流程，当没有peer connection的时候，自己本地的视频流预览并不会走编码就直接到renderer了。而上面说了WebRTC自己的renderer是不认RGBA的。所以只有两条路走：1. 自己写一个兼容的renderer，2. 自己的流就不走WebRTC的renderer了，反正有更好用的GPUImageView能用。这两种都实现过之后，选择使用后者。
6. 更改react-native-webrtc源码，让其支持H264的SDP。
7. 将自己写的GPUImageView暴露给React Native
8. 用react-native-webrtc完成所有流程

WebRTC更改编译

54版本

问题在于，没有编译成.framework的脚本，得自己写。

已经锁定的版本号有编译错误

• BUILD.gn 增加编译成framework的代码
• sdk.gyp
• 修复未使用结果的警告

57版本

• BUILD.gn 增加新增文件

添加代理，将CMSampleBuffer转发、接收

Header中新建RTCVideoProxy.h文件，Classes中新建RTCVideoProxy.m文件

react-native-webrtc源码更改

找到AppRTCDemo里的增加h264描述的函数

其他问题

1. 获取到的图被旋转了90度
2. 关于性能优化

性能优化

少开动画少开动画少开动画～！！！
或者所有动画都用lottie实现，尽可能降低js开销

尽量减小javascript开销
消除无用动画示例：

// AnimatedComponent

value = new Animated.Value(0)
animate = () => { this._animate() }
_animate = (force: boolean = false) => {
    if (this.props.animated || force) {
        this.value.setValue(0)
        Animated.timing(this.value, {
            toValue: 1,
            duration: 6000,
        }).start(this.animate)
    }
}
componentDidMount() { this.animate() }
componentWillReceiveProps(nextProps: LoadingAvatarProps) {
    if (this.props.animated !== nextProps.animated) {
        if (nextProps.animated) {
            this._animate(nextProps.animated)
        } else {
            this.value.stopAnimation()
        }
    }
}
componentWillUnmount() {
    this.value.stopAnimation()
}

React-native-webrtc深坑不能设置getusermedia的设置。。。做客户端webrtc开发还是得用原生的方法。

附录：WebRTC源码中比较让人在意的点

1. VideoBroadcast中分发frame给接收者
2. 旋转

工作比较忙....持续更新