PolyvRNVodDemo 支持 Android + iOS, 是专为 ReactNative 技术开发者定制的点播集成 Demo,具备功能丰富且易用的接口,提供了视频点播播放、视频下载等一系列功能。
Android 4.1.0 (API 16) 以上 或 iOS 9.0 以上
- 了解 ReactNative 技术;
- 搭建好运行 React Native 的相关环境;
- 准备在使用 React Native 技术开发的项目中接入点播功能;
- 拥有 polyv 官网的直播账号且已开通直播权限。
RN 版本是基于原生 demo + sdk 开发的,iOS 与 android 对应版本,及 SDK 版本更新日志链接如下:
执行如下命令下载 react 相关依赖
npm install
点播的插件和 demo 使用到的插件的目录结构如下所示:
├── polyv │ ├── demo │ │ ├── PolyvNavigation.js │ │ ├── PolyvUserConfig.js │ │ ├── common │ │ ├── downloadList │ │ ├── img │ │ ├── onlineList │ │ └── player │ └── sdk │ ├── PolyvVodConfigModule.js │ ├── PolyvVodDownloadModule.js │ ├── PolyvVodDownloadResultCode.js │ └── PolyvVodPlayerModule.js
在目录 sdk 下我们的 RN 点播 SDK 提供了一下三大功能模块:
文件名 | 描述 |
---|---|
PolyvVodConfigRnModule | 初始化模块 |
PolyvVodPlayerModule | 播放器模块 |
PolyvVodDownloadModule | 视频下载模块 |
如果只是需要使用到 sdk 的功能,把 sdk 目录下的文件拉到 RN 项目中即可。demo 中的功能则需要使用到 demo 目录下的文件。
-
项目中app.json中的字段需要与native 层的入口名对应,所以在Android与ios两端需要做入口名统一配置。配置文件名:
-
Android端的MainActivity.java 文件
@Override protected String getMainComponentName() { return "此处填入app.json里的name字段内容"; }
-
IOS端的AppDelegate.m文件
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { NSURL *jsCodeLocation; jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"此处填入app.json里的name字段内容" initialProperties:nil launchOptions:launchOptions]; .... 此处代码省略... return YES; }
-
-
在 package.json 文件中配置依赖。
"dependencies": {
"react": "16.6.3",
"react-native": "^0.58.6",
//polyv/demo里需要的依赖(如不需要可删除)
"axios": "^0.18.0",
"bower": "^1.8.8",
"jest-haste-map": "^24.5.0",
"loadash": "^1.0.0",
"native-base": "^2.12.1",
"react-art": "^16.8.4",
"react-dom": "^16.8.4",
"react-native-gesture-handler": "^1.1.0",
"react-native-web": "^0.10.1",
"react-navigation": "^3.3.2"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.3.1",
"jest": "24.3.1",
"metro-react-native-babel-preset": "0.53.0",
"react-test-renderer": "16.6.3"
},
初始化的方法要放在界面渲染前初始化, 一般在 componentWillMount 调用该方法进行初始化.
0.4.0起建议使用初始化方法setToken
,该方法是一个异步有返回结果的函数。推荐使用 https 接口,从服务端获取加密串,APP 本地解密(开发者设计自己的加解密方式)得到 useId
、readtoken
、writetoken
、secretkey
,再使用该方法配置用户信息。
低于0.4.0的可以继续使用init
方法初始化,他也是异步有返回结果的函数。
/*
* @param {string} userid 保利威后台API接口userid
* @param {*} writetoken 保利威后台API接口writetoken
* @param {*} readtoken 保利威后台API接口readtoken
* @param {*} secretkey 保利威后台API接口secretkey
* @param {*} viewerId 用户ID
* @param {*} nickName 用户昵称
*/
PolyvVodConfig.setToken(
this.state.userid,
this.state.writetoken,
this.state.readtoken,
this.state.secretkey,
this.state.viewerId,
this.state.nickName
).then(ret =>{
if(ret.code != 0){
//初始化失败
var str = "初始化失败 errCode=" + ret.code + " errMsg=" + ret.message;
console.log(str);
alert(str);
} else {
// 初始化成功
console.log("初始化成功");
}
});
/**
* @param {string} vodKey 加密串
* @param {*} decodeKey 加密密钥
* @param {*} decodeIv 加密向量
* @param {*} viewerId 用户ID
* @param {*} nickName 用户昵称
*/
console.log("Polyv rn vod init")
PolyvVodConfigRnModule.init(this.state.vodKey, this.state.decodeKey, this.state.decodeIv, this.state.viewerId, this.state.nickName)
.then(ret => {
if (ret.code != 0) { // 初始化失败
var str = "初始化失败 errCode=" + ret.code + " errMsg=" + ret.message
console.log(str)
alert(str)
} else { // 初始化成功
console.log("初始化成功")
}
})
//使用方式
<PolyvVodPlayer
ref='playerA'
style={styles.video}
vid={"e97dbe3e64cb3adef1a27a42fe49228e_e"}//视频播放vid
isAutoStart={true}//是否自动播放
fullScreen={false}
marquee={{
displayDuration:8,//单位:秒 单次跑马灯显示时长
maxRollInterval:1,//单位:秒 两次滚动的最大间隔时长,实际的间隔时长是取 0~maxRollInterval 的随机值
content:'我是跑马灯',//跑马灯内容
color:'#0000FF',//跑马灯颜色
alpha:0.5,//跑马灯透明度
font:20,//跑马灯字体
}}
/>
视频下载模块组件 PolyvVodDownloadModule.js 提供了如下接口:
函数名 | 参数 | 功能说明 | 是否有返回值 |
---|---|---|---|
getBitrateNumbers | vid:视频id | 获取视频码率列表 | 是 |
startDownload | vid:视频id bitrate:码率索引 title:下载标题 |
开始下载视频 | 是 |
pauseDownload | vid:视频id bitrate:码率索引 |
暂停下载 | 否 |
pauseAllDownload | 无 | 暂停所有下载视频 | 否 |
resumeDownload | vid:视频id bitrate:码率索引 |
恢复下载视频 | 否 |
startAllDownload | 无 | 开始下载所有视频,未下载视频全部放入等待队列 | 否 |
deleteDownload | vid:视频id bitrate:码率索引 |
删除视频 | 否 |
deleteAllDownload | 无 | 删除所有未下载的视频 | 否 |
getDownloadVideoList | hasDownloaded:是否获取已下载视频 | 获取下载列表 | 是 |
下载数据 downloadInfo 结构说明
参数 | 类型 | 说明 |
---|---|---|
vid | string | 视频id |
duration | string | 视频时长 |
filesize | number | 文件大小 |
bitrate | number | 码率索引 |
title | string | 文件标题 |
progress | number | 下载进度(0~1) |
下载视频的进度更新需要添加监听器,一般装载组件的时候添加监听器,卸载的时候移除。下载视频的回调是通过 DeviceEventEmitter 的方式实现对 native 的监听
对应的回掉 event 事件列表,该事件列表对应 native 层相应的通知事件
event | 返回值结构 | 说明 |
---|---|---|
startDownloadEvent | {downloadInfo:{对应上述的downloadInfo结构}} | 开始下载的回掉 |
updateProgressEvent | {downloadInfo:{对应上述的downloadInfo结构},progress:0.2} | 下载更新回掉 |
downloadSuccessEvent | {bitrate:1,vid:'123'} | 下载完成回掉 |
downloadFailedEvent | {bitrate:1,vid:'123'} | 下载失败回掉 |
downloadSpeedEvent | {bitrate:1,vid:'123',downloadSpeed:123.5} | 下载速度回掉 |
RN 端实现监听的代码演示:
componentWillMount() {
this.registerReceiver();
}
componentWillUnmount() {
console.log("download list componentWillUnmount");
DeviceEventEmitter.removeAllListeners();
}
//注册下载进度回调监听
registerReceiver() {
console.log("registerReceiver:" + this.props.isDownloadedPage);
if (this.props.isDownloadedPage) {
return;
}
//下载开始回调
DeviceEventEmitter.addListener("startDownloadEvent", msg => {
console.log("startDownload" + msg);
// this.setState({ downloadingInfo: msg.downloadInfo });
});
//下载失败回调
DeviceEventEmitter.addListener("downloadFailedEvent", msg => {
console.log("downloadFailedEvent" + JSON.stringify(msg));
});
//下载速度回调
DeviceEventEmitter.addListener("downloadSpeedEvent", msg => {
});
//进度更新回调
DeviceEventEmitter.addListener("updateProgressEvent", msg => {
});
//下载完成回调
DeviceEventEmitter.addListener("downloadSuccessEvent", msg => {
});
}
Android 端工程的原生插件代码分为两个部分:
- 定制的 rn 模块,就是工程的主模块app,路径是PolyvVodRnDemo/android/app。
- polyv sdk 模块,主要是 polyv 相关组件的代码文件,路径是PolyvVodRnDemo/android/polyvsdk。
主模块app涉及的 java 文件有:
- PolyvRNVodPluginManager:rn 插件开发的管理类,用来注册相关的 rn 定制组件。
- PolyvRNVodConfigModule:初始化组件模块,用来初始化 android 端需要的一些全局用户信息,例如 iv,secreate,userid。
- PolyvVodPlayer:播放器的 rn 组件,封装了播放器功能。
- PolyvRNVodPlayer:播放器及其皮肤的自定义控件,用于 rn 组件进行整合及使用。
- PolyvRNVodDownloadModule:视频下载组件。
-
集成 polyvsdk 模块
-
把Demo项目的 android/polyvsdk文件夹 拷贝到 目标工程的 android目录 下面;
-
配置目标工程 android/settings.gradle文件 的依赖
rootProject.name = 'XXXXXXX'//对应目标rn工程app.json下的name include ':app' include ':polyvsdk' //polyvsdk模块的依赖配置 新增加的一行!
-
配置目标工程 android/app/build.gradle文件 的依赖
dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) implementation ("com.facebook.react:react-native:+"){ exclude group:'com.android.support',module:'appcompat-v7' } implementation 'com.android.support:multidex:1.0.1'//64K 引用限制 implementation project(path: ':polyvsdk') //polyvsdk模块的依赖配置 新增加的一行! }
-
-
集成app代码
-
在目标工程中的 android/app/src/main/java 目录下,增加 com 目录,形成 android/app/src/main/java/com 的目录结构(如果已有com目录,可跳过本步骤);
-
把 android/app/src/main/java/com/polyv文件夹 拷贝到 上面创建的 com目录 下;
-
配置目标项目的 Application文件;
@Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() , new PolyvRNVodPluginManager() // 新增加的一行! ); }
4.MainActivity配置
@Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() , new PolyvRNVodPluginManager()//新增加的一行! ); }
-
-
集成react-native-gesture-handler插件(如果RN端没有集成react-native-gesture-handler,可跳过本步骤)
-
配置目标工程 android/settings.gradle文件 的依赖
rootProject.name = 'PolyvVodRnDemo' include ':app' include ':polyvsdk' //polyvsdk模块的依赖配置 //react-native-gesture-handler模块的依赖配置 以下是新增加的部分 include ':react-native-gesture-handler' project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
-
配置目标工程 android/app/build.gradle文件 的依赖
dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) implementation ("com.facebook.react:react-native:+"){ exclude group:'com.android.support',module:'appcompat-v7' } implementation 'com.android.support:multidex:1.0.1'//64K 引用限制 implementation project(path: ':polyvsdk') implementation project(':react-native-gesture-handler') //新增加的一行! }
-
配置MainActivity
@Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() , new PolyvRNVodPluginManager() , new RNGestureHandlerPackage() //新增加的一行! ); }
-
iOS 端工程的原生插件代码全部包含在 ios/PolyvVodRnModule文件夹 中;
-
引入原生代码
1)把Demo项目的 ios/PolyvVodRnModule文件夹 拷贝到 目标项目的 ios 目录下(如果以前已经拷贝过上述文件夹,需要在XCode先删除,然后再拷贝);
2)在XCode中,把上述文件夹增加(Add Files)到项目中;
-
配置CocoaPods
1)如果目标项目原来没有 ios/Podfile 文件,需要拷贝 demo 项目的 ios/Podfile 文件到 目标项目的 ios 目录下;打开 Podfile 文件,把其中 ‘PolyvVodRnDemo’ 改为 ‘自身项目名’;
2)如果目标项目原来有Podfile 文件,只需要把 Polyv vod rn sdk 所需要的配置拷贝到 ios/Podfile文件 中;
3)如果存在 RNGestureHandler 的配置行,需要删除或者注释掉;
4)在命令行环境进入ios 目录,执行 pod install 命令;
project 'PolyvVodRnDemo.xcodeproj' platform :ios, '8.0' inhibit_all_warnings! target 'PolyvVodRnDemo' do # Polyv vod rn sdk pod 'XRCarouselView', '~> 2.6.1' pod 'YYWebImage', '~> 1.0.5' pod 'FDStackView', '~> 1.0.1' pod 'PLVMasonry', '~> 1.1.2' pod 'PolyvVodSDK', '2.13.1' pod 'LBLelinkKit', '~> 30226' pod 'PLVVodDanmu', '~> 0.0.1' pod 'PLVSubtitle', '~> 0.1.0' # 执行 npm install命令之后,有可能会自动生成下面这一行配置。需要把这一行配置删掉或者注释掉; # pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler' end
-
集成react-native-gesture-handler插件(如果RN端没有集成react-native-gesture-handler,可跳过本步骤)
1)把Demo项目的 ios/PolyvVodRnDemo/react-native-gesture-handler文件夹 拷贝到 目标项目的 ios 目录下;
2)在XCode中,把上述文件夹增加(Add Files)到项目中;