ReactNative跨平台开发实践-简易直播demo1

2017.11.22日修改：
我在项目里面使用的推流地址已经过期了，各位如果想看效果的话需要自己去百度直播平台申请新的推流地址，然后百度的LSS开发者平台会有对应的播放地址，在网页上可以看到是否推流成功，若成功，再将我项目里原来的播放地址改成你自己的就可以了。

前言：去年就开始关注ReactNative，从0.27到现在的0.47，虽然一路踩了很多坑，但是为了体验跨平台真正的实用性，最近才真的开始在安卓与iOS平台上开始一个小的demo，界面部分均用RN完成，这几篇文章就详细的记录下我使用RN的心得，有不对的地方欢迎留言讨论
^_
需求分析：
基于百度提供的LSS直播服务与融云的IM服务（注册就有一定的免费流量，正好拿来测试demo）做的直播demo，声明仅供学习使用，不作任何商业用途！
设计思路：
经过查看百度LSS直播提供的直播SDK，发现推流层与播放层均是传入View，其余的例如调起相机，音视频编解码的工作均封装在了SDK中，而融云也提供不封装UI的聊天室SDK，所以大体思路即为，将推流页与播放页的View用原生做，方便传给第三方SDK，其他的按钮，会话框等控件全部用RN来做。
demo地址：
GitHub：https://github.com/shirleyzyy/LiveDemoOnLSS
上效果图：
由于是自己做的用于学习的demo嘛，所以没有另外花时间设计UI了，把重点放在了代码结构实现上，所以UI图片就直接拿百度LSS提供的demo来用的。对着最终的效果图来看代码，就能比较容易的理解设计思路了。

设置页.PNG

推流页.PNG

播放页.PNG

下图为工程目录设计结构：

ReactNative文件结构.png

由图可视，iOS与安卓采用完全相同的目录，这也说明了从页面的层次上来看，无论是什么平台，如果用JS实现页面的设计，那就可以设计成完全一样的结构。

一：界面布局

1.设置页：推流地址URL输入框与推流的视频格式的按钮，输入了URL选择了推流的视频清晰度与视频的方向后点击“我要直播”即可进入推流端。若要看直播，则直接点击“我要看直播”，为方便起见，看直播的地址直接写在了代码中，为例子推流地址对应的观看地址，若要使用自己的直播推流地址，则需在代码中对应的修改播放地址。
2.推流页：左上角有一返回按钮，三个视频功能按钮与一个开始录制的推流按钮。左下角为聊天室对话框，由于为直播端，所以未设计输入框。
3.播放页：同样的左上角有一返回按钮，左下角为聊天室对话框与消息输入框。

二：整体UI层次结构

iOS示例：

ios推流层结构.png

iOS推流层结构2.png

安卓示例：

android推流层结构.png

由编译器提供的层次结构图可清晰地看出，在iOS端视频录制由GPUImageView完成，这是被封装到百度LSS SDK中的，外部提供的接口为VCPreviewView（即图iOS推流层结构2中黑色的那层），我将其放在自己的View中并封装成component，以便在RN层调用这个原生的View，比较重要的一点是RN编写的其余component都是加在我原生封装的View之上的，这样就保证了层级结构的清晰。同理在安卓端由surfaceView来实现视频的渲染等工作，设计原理跟iOS相同，如上图android推流层结构所示。