ApsaraVideo VOD:Upload SDK for WeChat Mini Program

Usage notes

The WeChat mini program SDK supports uploading audio, video, and image files. It does not support uploading auxiliary media assets.

Download SDK and demo

• Version: 1.0.3

• Release date: 2024-07-15

• MD5 hash: 5145518e0bbb410c156b37c04c447a6f

• Download link: SDK V1.0.3

Integration SDK

Copy the SDK file to your project and import the dependency on the relevant page.

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

Basic settings

Initialize the upload instance

• When you initialize the SDK instance, you must pass the userId parameter to identify the uploader. This parameter is required and cannot be empty. You can use your Alibaba Cloud account ID or a custom user ID. To view your account ID, go to the Account Center. If you do not pass the userId parameter or if you pass an empty value, an error is reported.

• The region field must be set to one of the region IDs supported by ApsaraVideo VOD.

var uploader = new VODUpload({
  // The ID of your Alibaba Cloud account. This parameter cannot be empty. To view your account ID, go to the Account Center.
  userId: "25346073170691****",
  // The region where you want to upload files to ApsaraVideo VOD. Default value: 'cn-shanghai'. Other valid values include 'eu-central-1' and 'ap-southeast-1'. For more information, see Overview.
  region: "cn-shanghai",
  // The number of retries when an upload fails due to network issues. Default value: 3.
  retryCount: 3,
  // The interval between retries when an upload fails due to network issues. Default value: 2 seconds.
  retryDuration: 2,
  // The upload starts.
  onUploadstarted: function (uploadInfo) {},
  // The file is uploaded.
  onUploadSucceed: function (uploadInfo) {},
  // The file fails to be uploaded.
  onUploadFailed: function (uploadInfo, code, message) {},
  // The upload progress. Unit: bytes.
  onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {},
  // The upload credential expires.
  onUploadTokenExpired: function (uploadInfo) {},
  // All files are uploaded.
  onUploadEnd: function (uploadInfo) {},
});

Set credentials

First, understand the overall client-side upload process. Then, deploy the corresponding authorization service based on your preferred authorization method.

1. If you use the upload URL and credential method, you must obtain the upload URL and credential from the authorization service.

2. If you use the Security Token Service (STS) token method, you must obtain an STS token from the authorization service.

All authorization information is set within the onUploadstarted callback. When credentials expire, the onUploadTokenExpired callback is triggered, where you must call the appropriate method to refresh the credentials.

// The upload starts.
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)
        })
    });

},
// The upload credential expires.
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)

 /* Callback method - The upload starts. */
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);
        })
    });

},
// The upload credential expires.
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)

Add files

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

// Select a video
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);
        }
    })
},

Method description:

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

Start the upload

uploader.startUpload();

1. After the file upload is started, the onUploadProgress callback is invoked to synchronize the upload progress.

2. If the file upload is successful, the onUploadSucceed callback is invoked to return the upload result.

Advanced features

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();

Troubleshooting

If an error occurs when you use the WeChat mini program SDK, use the error code to identify the cause. For more information, see Error codes.