首页 > 其他分享 >React Native实现基于HLS协议的视频直播应用

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

时间:2022-12-07 10:00:53浏览次数:97  
标签:react 视频 HLS React video 应用 RN Native native

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

hsay 0.4422017.12.28 09:11:31字数 921阅读 6,395

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开发应用是更高效的一种开发方式。

标签:react,视频,HLS,React,video,应用,RN,Native,native
From: https://www.cnblogs.com/sexintercourse/p/16962226.html

相关文章

  • Taro 3.2 版本正式发布:React Native 支持,王者归来
    Taro3.2版本正式发布:ReactNative支持,王者归来凹凸实验室软件更新1年前阅读222Taro 是一个开放式 跨端跨框架 解决方案,支持使用React/Vue/Nerv等框架来开发......
  • 前端react面试题指北
    在调用setState之后发生了什么状态合并,触发调和:setState函数之后,会将传入的参数对象与当前的状态合并,然后出发调用过程根据新的状态构建虚拟dom树经过调和过程,rea......
  • React的useLayoutEffect和useEffect执行时机有什么不同
    我们先看下React官方文档对这两个hook的介绍,建立个整体认识useEffect(create,deps):该Hook接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内(这......
  • react面试题总结一波,以备不时之需
    React组件的构造函数有什么作用?它是必须的吗?构造函数主要用于两个目的:通过将对象分配给this.state来初始化本地状态将事件处理程序方法绑定到实例上所以,当在Reactcl......
  • React后台管理系统06 路由
     在src目录下新建2views文件夹,用来存放组件,这里我们新建2个路由组件HomeAbout,如下所示:创建好这两个路由组件之后,在src目录里面我们新建一个router路由文件夹,然后命名......
  • #yyds干货盘点# 歌谣学前端之react三个api之一
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • #yyds干货盘点# 歌谣学前端之react三个api之一续集
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • ReactNative 常用命令
    ReactNative常用命令安装RN的初始化命令npminstall-greact-native-cli配置淘宝镜像npmconfigsetregistryhttps://registry.npm.taobao.orgnpmconfigsetdistur......
  • 使用Spring Reactor优化推荐流程
    1.背景公司有一个推荐系统Rec,这个系统的主要功能是:向外部系统提供推荐接口根据请求获取推荐策略根据推荐策略完成推荐的召回、过滤、打分、排序阶段Rec作为微服务......
  • Taro vs React Native 的八大差异
    TarovsReactNative的八大差异桂子Web开发,深圳​关注他 11人赞同了该文章API风格Taro与RN的一些组件及字段并不完全一致,以RN为主......