ApsaraVideo VOD:WeChat ミニプログラム SDK を使用したファイルのアップロード

機能の説明

WeChat ミニプログラム SDK は、オーディオ、ビデオ、およびイメージファイルのアップロードをサポートしています。補助メディアアセットのアップロードはサポートしていません。

SDK とデモのダウンロード

• バージョン: 1.0.3

• 最終更新日: 2024-07-15

• パッケージの MD5 ハッシュ: 5145518e0bbb410c156b37c04c447a6f

• ダウンロード URL: WeChat ミニプログラムアップロード SDK およびサンプルコード

統合方法

SDK ファイルをプロジェクトにコピーし、関連ページで依存関係をインポートします。

import VODUpload from 'aliyun-upload-sdk-1.0.3.min.js'

基本設定

アップロードインスタンスの初期化

• SDK インスタンスを初期化する際、アップロード者を識別するために userId パラメーターを渡す必要があります。このパラメーターは必須であり、空にすることはできません。Alibaba Cloud アカウント ID またはカスタムユーザー ID を使用できます。アカウント ID を表示するには、[アカウントセンター] に移動します。userId パラメーターを渡さない場合、または空の値を渡した場合は、エラーが報告されます。

• region フィールドは、ApsaraVideo VOD でサポートされている リージョン ID のいずれかに設定する必要があります。

var uploader = new VODUpload({
  // Alibaba Cloud アカウントの ID。このパラメーターは空にできません。アカウント ID を表示するには、アカウントセンター (https://account-console.alibabacloud.com/) にアクセスしてください。
  userId: "25346073170691****",
  // ApsaraVideo VOD にファイルをアップロードするリージョン。デフォルト値: 'cn-shanghai'。その他の有効な値には、'eu-central-1' や 'ap-southeast-1' があります。詳細については、「メディアアップロードの概要」をご参照ください。
  region: "cn-shanghai",
  // ネットワークの問題でアップロードが失敗した場合のリトライ回数。デフォルト値: 3。
  retryCount: 3,
  // ネットワークの問題でアップロードが失敗した場合のリトライ間隔。デフォルト値: 2 秒。
  retryDuration: 2,
  // アップロードが開始されます。
  onUploadstarted: function (uploadInfo) {},
  // ファイルがアップロードされました。
  onUploadSucceed: function (uploadInfo) {},
  // ファイルのアップロードに失敗しました。
  onUploadFailed: function (uploadInfo, code, message) {},
  // アップロードの進行状況。単位: バイト。
  onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {},
  // アップロード認証情報が有効期限切れになりました。
  onUploadTokenExpired: function (uploadInfo) {},
  // すべてのファイルがアップロードされました。
  onUploadEnd: function (uploadInfo) {},
});

認証情報の設定

まず、クライアントの全体的な アップロードプロセス を理解します。次に、希望する権限付与方法に基づいて、対応する権限付与サービスをデプロイします。

1. アップロード URL と認証情報方式を使用する場合は、権限付与サービスから アップロード URL と認証情報を取得 する必要があります。

2. セキュリティトークンサービス (STS) トークン方式を使用する場合は、権限付与サービスから STS トークンを取得 する必要があります。

返された権限付与情報を onUploadstarted コールバックで設定します。認証情報が有効期限切れになると、onUploadTokenExpired コールバックがトリガーされます。その後、メソッドを呼び出して認証情報を更新し、新しい認証情報を取得する必要があります。

// アップロードが開始されます。
onUploadstarted: function (uploadInfo) {
    console.log('Starting file upload...');
    console.log("onUploadStarted:" + JSON.stringify(uploadInfo))

    var url = "https://alivc-demo.aliyuncs.com/demo/getVideoUploadAuth?title=" + uploadInfo.url + "&fileName=" + uploadInfo.url + "&fileSize=" + uploadInfo.fileSize + "&description=description&coverURL=" + uploadInfo.coverUrl + "&tags=tags";

    wx.request({
        'url': url,
        success: (res => {
            if (res.statusCode === 200) {
                var akInfo = res.data.data;
                uploader.setUploadAuthAndAddress(uploadInfo, akInfo.uploadAuth, akInfo.uploadAddress, akInfo.imageId);
            } else {
                console.log(res)
                uploader.stopUpload();
            }
        }),
        fail: (res => {
            uploader.stopUpload();
            console.log(res)
        })
    });

},
// アップロード認証情報が有効期限切れになりました。
onUploadTokenExpired: function (uploadInfo) {
    const url = "https://alivc-demo.aliyuncs.com/demo/refreshVideoUploadAuth?videoId=" + uploadInfo.videoId;
    
    wx.request({
      'url': url,
      success: (res => {
          if (res.statusCode === 200) {
              var akInfo = res.data.data;
              uploader.resumeUploadWithAuth(akInfo.uploadAuth);
          } else {
              console.log(res)
              uploader.stopUpload();
          }
      }),
      fail: (res => {
          uploader.stopUpload();
          console.log(res)
    })
  });
},

uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
uploader.resumeUploadWithAuth(uploadAuth)

 /* コールバックメソッド - アップロードが開始されます。*/
onUploadstarted: function (uploadInfo) {
    console.log('Starting file upload...');
    console.log("onUploadStarted:" + JSON.stringify(uploadInfo))
    wx.request({
        url: "https://alivc-demo.aliyuncs.com/demo/getSts",
        // data: data,
        // header: header,
        // method: method,
        success: (res => {
            if (res.statusCode === 200) {
                var akInfo = res.data.data;
                uploader.setSTSToken(uploadInfo, akInfo.accessKeyId, akInfo.accessKeySecret, akInfo.securityToken);
            } else {
                console.log(res)
            }
        }),
        fail: (res => {
            onError(res);
        })
    });

},
// アップロード認証情報が有効期限切れになりました。
onUploadTokenExpired: function (uploadInfo) {
    const url = "https://alivc-demo.aliyuncs.com/demo/getSts";
    
    wx.request({
      'url': url,
      success: (res => {
          if (res.statusCode === 200) {
              var akInfo = res.data.data;
              uploader.resumeUploadWithSTSToken(akInfo.uploadAuth);
          } else {
              console.log(res)
              uploader.stopUpload();
          }
      }),
      fail: (res => {
          uploader.stopUpload();
          console.log(res)
    })
  });
},

uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken)
uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken)

ファイルの追加

<view class="weui-uploader__input-box">
  <view class="weui-uploader__input" bindtap="chooseVideo"></view>
</view>

// ビデオを選択
chooseVideo: function (e) {
    var that = this;
    wx.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        compressed: false,
        camera: 'back',
        success: function (res) {
            var file = {url: res.tempFilePath, coverUrl: res.thumbTempFilePath};
            var uploader = that.data.uploader;
            var paramData = '{"Vod":{}}';
            uploader.addFile(file, null, null, null, paramData);
        }
    })
},

メソッドの説明:

uploader.addFile(file,endpoint,bucket,object,paramData)

アップロードの開始

uploader.startUpload();

1. ファイルのアップロードが開始されると、onUploadProgress コールバックが呼び出され、アップロードの進行状況が同期されます。

2. ファイルのアップロードが成功すると、onUploadSucceed コールバックが呼び出され、アップロード結果が返されます。

高度な機能

UserData={
  "AccelerateConfig": {
    "Type": "oss",
    "Domain": "https://oss-accelerate.aliyuncs.com"
  }
}

uploader.addFile(file,null,null,null,'{"Vod":{"UserData":{"AccelerateConfig":{"Type":"oss","Domain":"https://oss-accelerate.aliyuncs.com"}}}}');

uploader.stopUpload();

トラブルシューティング

WeChat ミニプログラム SDK の使用中にエラーが発生した場合、エラーコードを使用して原因をすばやく特定できます。詳細については、「クライアント側のエラーコード」をご参照ください。