ReactNative接入阿里云視頻SDK（Android）

最近在ReactNative接入阿里云視頻SDK，期間遇到不少坑，其中大部分都是由于阿里的demo存在一些問(wèn)題，定位到錯(cuò)誤解決之后總算接好。功能包括視頻錄制、視頻上傳、視頻播放，可以去官網(wǎng)下載看看。
總體的步驟如下：

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
主要步驟如下:

  • 導(dǎo)入模塊AliyunSdk-RCE.aar（基礎(chǔ)版是AliyunSdk-RC.aar）
  • 導(dǎo)入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添加權(quán)限及以下兩個(gè)屬性：
android:allowBackup="true"
android:supportsRtl="true"
  • 從demo的代碼中導(dǎo)入所需要的模塊（編譯可能報(bào)錯(cuò)，因?yàn)楸镜氐腁S環(huán)境可能不一樣，這個(gè)按提示即可解決），然后添加好依賴。根據(jù)demo中的依賴庫(kù)按需添加進(jìn)自己的項(xiàng)目中，如下：
    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文件中加載動(dòng)態(tài)鏈接庫(kù)、初始化一些SDK
    到此基本配置結(jié)束?？傮w來(lái)說(shuō)，demo的配置可以做參考，但可能跟你本地編譯環(huán)境不同，要稍作修改。
  • 如果你還要接入阿里云的上傳SDK，需要去下載，鏈接如下：
    上傳SDK：https://help.aliyun.com/document_detail/100490.html?spm=a2c4g.11186623.6.974.e2de17ebMLROPG
    基礎(chǔ)版集成上傳功能，首先要跟應(yīng)用服務(wù)器獲取上傳憑證和地址，然后再調(diào)用阿里的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());
        //開(kāi)始上傳
        uploader.start();
    }

3、踩坑總結(jié)：

看著步驟好像挺簡(jiǎn)單的，其實(shí)過(guò)程中有不少的坑，總結(jié)如下：

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容