React Native实现基于HLS协议的视频直播应用

React Native(以下简称RN)给我们提供了一种开发原生应用的新方案，它允许我们用前端语言开发跨平台的原生应用，对于熟悉前端的开发人员来说可以用极低的成本开发原生应用。目前已经有众多线上案例。

一: 项目介绍

本文介绍的是基于RN实现的一款在特殊应用场景下的视频直播APP(以下称为Live App)，实现的功能有：

基于HLS的视频直播
基于Socket的私有协议
节目分类信息展示
节目列表展示
播放历史展示
Android+IOS平台支持

全屏.png

应用场景

应用场景.png

注：家庭媒体中心是我们应用场景下的server,可以理解成用户家中的机顶盒

家庭媒体中心自带路由功能，手机端通过WLAN连接到家庭媒体中心，至此Live App就可以从家庭媒体中心获取频道列表以及建立基于Socket的连接，实现App与家庭媒体中心的控制连接。

二: 第三方库

目前Live App使用到的第三方库主要有：

react-native-video
react-native-tcp
react-navigation
react-native-device-info
react-native-network-info
react-native-storage
react-native-splash-screen
react-native-scrollable-tab-view

为了做到跨平台，在第三方库选用的时候一定要注意其是否支持跨平台，不要将平台兼容性问题都遗留到测试阶段。

三: react-native-video使用介绍

RN本身并没有提供原生的视频播放组件，这里我们使用官方推荐的第三方视频播放组件react-native-video。

在使用react-native-video库。
react-native-video源码中提供的三个主要文件android-exoplayer,android,ios。
安卓平台下实现基于HLS的视频直播我们应该使用android-exoplayer，官方对其的介绍是：

Android Video library built by Google, with a lot of support
Supports DASH, HlS, & SmoothStreaming adaptive streams
Supports formats such as MP4, M4A, FMP4, WebM, MKV, MP3, Ogg, WAV, MPEG-TS, MPEG-PS, FLV and ADTS (AAC).

若要使用exoplayer提供的功能，需要设置文件android/settings.gradle

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

至于IOS平台可按官方文档中介绍的使用。

四：react-native-tcp使用介绍

使用react-native-tcp的目的是实现基于Socket的私有协议，在Live App与家庭媒体中心之间我们规定了一套控制协议来实现诸如节目列表获取，视频播放等控制命令。
react-native-tcp使用到的API

Socket() 用来创建套接字
connect() 用来套接字的连接
write() 用来发送信息
on() 用来接收信息

在使用react-native-tcp是遇到Object Null的问题，可以按照issue中提供的思路解决。

总结

作为一位前端开发者，在初次接触RN的时候会被android和IOS开发环境的搭建，编译过程以及编译报错而吓到，但是当你对开发环境稍许了解后你会发现这真是一种特别棒的开发体验。对公司或部门来说RN提供了新的解决方案，对于前端开发者来说相当于又有了新的战场。

在使用第三方库饿过程中我们很可能会遇到各种各样的坑，这里建议遇到问题后首先到github上查看相关issue，大部分问题都可以在这里得到答案。

Live App已经实现了我们的主要应用场景，这足以证明在我们的应用场景下使用RN开发应用是更高效的一种开发方式。