ApsaraVideo VOD:WeChat ミニプログラム向けアップロード SDK

注意事項

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

SDK とデモのダウンロード

• SDK バージョン： 1.0.3

• 更新日時： 2023-07-15

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

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

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 は、アカウントセンターで確認してください。
  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.videoId);
            } 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.accessKeyId, akInfo.accessKeySecret, akInfo.securityToken);
          } 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 の使用中にエラーが発生した場合は、エラーコードに基づいて原因を特定してください。詳細については、「エラーコード」をご参照ください。