React Native + WebRTC + GPUImage一套解决方案
简介
想给爸妈视频的时候加点美颜效果，然后再电脑上也能看，本人是前端，所以技术选型如下：
- react-native-webrtc
- WebRTC 57版本
- GPUImage + BeautifyFaceDemo
- Swift + OC混编
大体步骤如下
- 更改WebRTC源码，将摄像头获取到的CMSampleBuffer传递出去，然后新增一个接口接受更改好的CVPixelBuffer。
- 将接收到的sample buffer传递给GPUImageMovie进行处理，给GPUImageMovie添加任意滤镜
- 使用最新master上的GPUImage，其给GPUImageFrameBuffer暴露了获取CVPixelBuffer的接口
- 自己写一个简单的GPUImagePixelOutput用上一条说的接口输出加好滤镜的CVPixelBuffer。
- 然后将这个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能用。这两种都实现过之后，选择使用后者。
- 更改react-native-webrtc源码，让其支持H264的SDP。
- 将自己写的GPUImageView暴露给React Native
- 用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描述的函数
其他问题
- 获取到的图被旋转了90度
- 关于性能优化
性能优化
少开动画少开动画少开动画～！！！
或者所有动画都用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源码中比较让人在意的点
- VideoBroadcast中分发frame给接收者
- 旋转
工作比较忙....持续更新
