ReactNative接入阿里云视频SDK（Android）
2019-03-29 本文已影响0人
Hozan
最近在ReactNative接入阿里云视频SDK，期间遇到不少坑，其中大部分都是由于阿里的demo存在一些问题，定位到错误解决之后总算接好。功能包括视频录制、视频上传、视频播放，可以去官网下载看看。
总体的步骤如下：
1、下载demo：
https://help.aliyun.com/document_detail/51992.html?spm=a2c4g.11186623.6.947.17f176058zSLck
2、参考工程配置教程：
https://help.aliyun.com/document_detail/94451.html?spm=a2c4g.11186623.6.1011.396717ebgDtYpp
主要步骤如下:
- 导入模块AliyunSdk-RCE.aar（基础版是AliyunSdk-RC.aar）
- 导入so文件，配置build.gradle(app)
sourceSets.main {
jni.srcDirs = []
jniLibs.srcDir "src/main/libs"
} - 拷贝thirdparty-lib文件夹到android目录下，并在build.gradle(project)添加以下代码：
apply from: 'thirdparty-lib/config.gradle'
maven { url "http://maven.aliyun.com/nexus/content/repositories/releases" }
整体配置如下：
buildscript {
repositories {
jcenter()
maven {
url 'https://maven.google.com/'
name 'Google'
}
maven { url "http://maven.aliyun.com/nexus/content/repositories/releases" }
google()
}
apply from: 'thirdparty-lib/config.gradle'
dependencies {
classpath 'com.android.tools.build:gradle:2.3.3'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
maven {
url 'https://maven.google.com/'
name 'Google'
}
maven { url "http://maven.aliyun.com/nexus/content/repositories/releases" }
flatDir { dirs 'src/main/libs' }
}
}
ext {
buildToolsVersion = "26.0.3"
minSdkVersion = 18
compileSdkVersion = 26
targetSdkVersion = 26
supportLibVersion = "26.1.0"
}
- AndroidManifest.xml添加权限及以下两个属性：
android:allowBackup="true"
android:supportsRtl="true"
- 从demo的代码中导入所需要的模块（编译可能报错，因为本地的AS环境可能不一样，这个按提示即可解决），然后添加好依赖。根据demo中的依赖库按需添加进自己的项目中，如下：
compile fileTree(dir: 'libs', include: ['*.jar'])
compile project(':AliyunSnap:snap_demo')
compile project(':AliyunResample')
implementation externalAndroidAppCompatV7ToSnapSvideo
implementation externalAndroidSupportV4
implementation externalAndroidRecyclerView
implementation externalGSON
implementation externalOKHTTP
implementation externalAndroidMultiDex
implementation('com.aliyun.ams:alicloud-android-ha-adapter:1.1.0.6.2-open@aar') {
transitive=true
}
implementation('com.aliyun.ams:alicloud-android-ha-ut-analytics:1.1.0.1-open@aar') {
transitive=true
}
- 在app的Application文件中加载动态链接库、初始化一些SDK
到此基本配置结束。总体来说，demo的配置可以做参考，但可能跟你本地编译环境不同，要稍作修改。 - 如果你还要接入阿里云的上传SDK，需要去下载，链接如下：
上传SDK：https://help.aliyun.com/document_detail/100490.html?spm=a2c4g.11186623.6.974.e2de17ebMLROPG
基础版集成上传功能，首先要跟应用服务器获取上传凭证和地址，然后再调用阿里的SDK上传。
原生封装给reactnative端用的上传方法如下：
@ReactMethod
public void upload(final String uploadAddress, final String uploadAuth,String videoId,String imageUri, final String fileName, final Promise promise) {
Log.i(Tag, "成功获取凭证 ------------------" + "uploadAuth==" + uploadAuth + "\n" + uploadAddress);
Log.i(Tag, "地址fileName ------------------" + fileName);
promiseVideoUploadResult = promise;
OSSLog.enableLog();
// 上传视频
final VODUploadClient uploader = new VODUploadClientImpl(getCurrentContext());
uploader.setRegion(VOD_REGION);
uploader.setRecordUploadProgressEnabled(VOD_RECORD_UPLOAD_PROGRESS_ENABLED);
VODUploadCallback callback = new VODUploadCallback() {
public void onUploadSucceed(UploadFileInfo info) {
Log.i(Tag, "onsucceed ------------------" + info.getFilePath());
Toast.makeText(getCurrentActivity(), "视频上传成功", Toast.LENGTH_SHORT).show();
WritableMap object = Arguments.createMap();
object.putString("videoUri", info.getFilePath());
promiseVideoUploadResult.resolve(object);
}
public void onUploadFailed(UploadFileInfo info, String code, String message) {
Log.i(Tag, "onfailed ------------------ " + info.getFilePath() + "code=" + code + "message=" + message);
Toast.makeText(getCurrentActivity(), "视频上传失败", Toast.LENGTH_SHORT).show();
WritableMap object = Arguments.createMap();
object.putString("Errormsg", message);
promiseVideoUploadResult.resolve(object);
}
public void onUploadProgress(UploadFileInfo info, long uploadedSize, long totalSize) {
Log.i(Tag, "onProgress ------------------ " + info.getFilePath() + " " + uploadedSize + " " + totalSize);
Log.i(Tag, "onProgress ------------------ " + uploadedSize * 100 / totalSize);
}
public void onUploadTokenExpired() {
Log.i(Tag, "onExpired ------------- ");
uploader.resumeWithAuth(uploadAuth);
}
public void onUploadRetry(String code, String message) {
Log.i(Tag, "onUploadRetry ------------- ");
}
public void onUploadRetryResume() {
Log.i(Tag, "onUploadRetryResume ------------- ");
}
public void onUploadStarted(UploadFileInfo uploadFileInfo) {
Log.i(Tag, "onUploadStarted ------------- ");
if (isVodMode(uploadAuth)) {
uploader.setUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress);
}
Log.i(Tag, "file path:" + uploadFileInfo.getFilePath() +
", endpoint: " + uploadFileInfo.getEndpoint() +
", bucket:" + uploadFileInfo.getBucket() +
", object:" + uploadFileInfo.getObject() +
", status:" + uploadFileInfo.getStatus());
}
};
//初始化
uploader.init(callback);
uploader.setPartSize(1024 * 1024);
uploader.setTemplateGroupId("xxx");
uploader.setStorageLocation("xxx");
//添加文件
uploader.addFile(fileName, getVodInfo());
//开始上传
uploader.start();
}
- 对于视频播放，有几种方式，可以参考：
https://help.aliyun.com/document_detail/61910.html?spm=a2c4g.11186623.2.25.47e31fc1E7cKva#h2-5-3-12
3、踩坑总结：
看着步骤好像挺简单的，其实过程中有不少的坑，总结如下：
- 报错：aapt.exe finished with non-zero exit value 1
推荐解决方案： https://blog.csdn.net/qq_24118527/article/details/83586161 - 报错：Process 'command 'D:\DevelopTools\Java\jdk1.8.0_144\bin\java.exe'' finished with non-zero exit value 3
推荐解决方案：https://blog.csdn.net/guquan12315/article/details/76608583 - No resource found that matches the given name
推荐解决方案：https://blog.csdn.net/framic/article/details/53939970 - Manifest merger failed : Attribute application@label value=(@string/app_name)
推荐解决方案：
https://blog.csdn.net/dodod2012/article/details/78982708
