美文网首页
ReactNative接入阿里云视频SDK(Android)

ReactNative接入阿里云视频SDK(Android)

作者: Hozan | 来源:发表于2019-03-29 17:11 被阅读0次

    最近在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();
        }
    

    3、踩坑总结:

    看着步骤好像挺简单的,其实过程中有不少的坑,总结如下:

    相关文章

      网友评论

          本文标题:ReactNative接入阿里云视频SDK(Android)

          本文链接:https://www.haomeiwen.com/subject/hbllvqtx.html