SDK de téléchargement pour mini-programme WeChat - ApsaraVideo VOD

Utilisez le SDK de téléchargement ApsaraVideo VOD pour envoyer des fichiers multimédias depuis un mini-programme WeChat vers le stockage VOD.

Remarques sur l'utilisation

Le SDK pour mini-programme WeChat prend en charge l'envoi de fichiers audio, vidéo et image. Il ne prend pas en charge l'envoi d'actifs multimédias auxiliaires.

Téléchargement du SDK et de la démo

Version du SDK : 1.0.3
Date de mise à jour : 2024-07-15
Somme de contrôle MD5 du package : 5145518e0bbb410c156b37c04c447a6f
Adresse de téléchargement : SDK de téléchargement pour mini-programme WeChat et exemple de code

Intégration du SDK

Copiez le fichier SDK dans votre projet et importez la dépendance sur la page concernée.

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

Paramètres de base

Initialisation de l'instance de téléchargement

Lors de l'initialisation de l'instance du SDK, transmettez le paramètre userId pour identifier l'utilisateur qui effectue l'envoi. Ce paramètre est obligatoire et ne peut pas être vide. Vous pouvez utiliser l'ID de votre compte Alibaba Cloud ou un ID utilisateur personnalisé. Pour afficher l'ID de votre compte, accédez au Account Center. Si vous omettez le paramètre userId ou si vous transmettez une valeur vide, une erreur se produit.
Définissez le champ region sur l'un des ID de région pris en charge par 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) {},
});

Définition des informations d'identification

Consultez le processus de téléchargement global côté client et déployez le service d'autorisation selon la méthode de votre choix.

Si vous utilisez la méthode URL de téléchargement et informations d'identification, obtenez l'URL de téléchargement et les informations d'identification auprès du service d'autorisation.
Si vous utilisez la méthode jeton Security Token Service (STS), obtenez un jeton STS auprès du service d'autorisation.

Définissez toutes les informations d'autorisation dans le rappel onUploadstarted. Lorsque les informations d'identification expirent, le rappel onUploadTokenExpired se déclenche. Appelez la méthode appropriée dans ce rappel pour actualiser les informations d'identification.

URL de téléchargement et informations d'identification

Appelez la méthode setUploadAuthAndAddress. Lorsque les informations d'identification expirent, le rappel onUploadTokenExpired se déclenche. Appelez la méthode resumeUploadWithAuth pour définir de nouvelles informations d'identification et reprendre l'envoi.

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

Description de la méthode :

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

Paramètre

Description

uploadInfo

Premier paramètre du rappel onUploadstarted.

uploadAuth

Informations d'identification d'envoi renvoyées par l'opération CreateUploadVideo.

uploadAddress

URL d'envoi renvoyée par l'opération CreateUploadVideo.

videoId

ID audio ou vidéo renvoyé par l'opération CreateUploadVideo.

Jeton STS

Appelez la méthode setSTSToken. Lorsque le jeton STS expire, le rappel onUploadTokenExpired se déclenche. Appelez la méthode resumeUploadWithSTSToken pour définir un nouveau jeton STS et reprendre l'envoi.

 /* 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)
    })
  });
},

Description de la méthode :

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

Paramètre

Description

uploadInfo

Premier paramètre du rappel onUploadstarted.

accessKeyId

Champ AccessKeyId du jeton STS.

accessKeySecret

Champ AccessKeySecret du jeton STS.

secretToken

Champ SecretToken du jeton STS.

Ajout de fichiers

<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);
        }
    })
},

Description de la méthode :

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

Paramètre

Obligatoire

Type

Description

file

Oui

Fichier

Fichier à envoyer.

endpoint

Non

Chaîne

Endpoint OSS. S'il est nul, AppServer sélectionne l'endpoint.

bucket

Non

Chaîne

Bucket cible. S'il est nul, AppServer sélectionne le bucket.

object

Non

Chaîne

Objet cible. S'il est nul, AppServer sélectionne l'objet.

paramData

Non

Chaîne

Métadonnées du fichier telles que le titre, la description, le transcodage et les paramètres de rappel. Spécifiez paramData lors de l'utilisation de l'envoi avec jeton STS.

La valeur du paramètre paramData est une chaîne JSON. Exemple : '{"Vod":{}}'. Vous devez spécifier Vod dans la requête. Vous pouvez imbriquer les paramètres pris en charge par le paramètre paramData sous Vod. Vous pouvez imbriquer les paramètres de requête de l'opération CreateUploadVideo ou CreateUploadImage.

Démarrage de l'envoi

uploader.startUpload();

Une fois l'envoi du fichier démarré, le rappel onUploadProgress s'exécute pour synchroniser la progression de l'envoi.
Si l'envoi du fichier aboutit, le rappel onUploadSucceed s'exécute pour renvoyer le résultat de l'envoi.

Fonctionnalités avancées

Utilisation de l'accélération de l'envoi

Pour envoyer de gros fichiers de plusieurs gigaoctets ou téraoctets, ou pour envoyer des vidéos entre différentes régions, par exemple depuis une région de Chine continentale vers une adresse de stockage dans la région Singapore, activez la fonctionnalité d'accélération de l'envoi.

Pour activer la fonction d'accélération de l'envoi, soumettez un ticket. Fournissez l'UID du compte Alibaba Cloud et l'adresse de stockage qui doit utiliser l'accélération de l'envoi.

Méthode 1 : URL de téléchargement et informations d'identification

Si vous utilisez cette méthode pour envoyer un fichier, appelez l'opération CreateUploadVideo et spécifiez des paires clé-valeur dans le paramètre UserData pour configurer les paramètres d'accélération. Exemple de code :

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

Méthode 2 : Jeton STS

Si vous utilisez cette méthode pour envoyer un fichier, appelez la méthode addFile, ajoutez la propriété UserData au paramètre parmData, puis configurez le contenu de l'envoi. Exemple de code :

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

Description de UserData

Nom

Type

Obligatoire

Description

userData

string

Non

Configurations personnalisées, telles que les configurations de rappel et les configurations d'accélération de l'envoi. La valeur doit être une chaîne JSON.

Le tableau suivant décrit les paramètres.

Paramètre	Type	Description
Type	string	Type de fichier pour lequel vous souhaitez activer l'accélération de l'envoi. Définissez la valeur sur oss.
Domain	string	Nom de domaine accéléré du bucket. Par défaut, HTTPS est utilisé. Remarque Un endpoint accéléré attribué après l'activation de l'accélération de l'envoi est utilisé, tel que vod-***.oss-accelerate.aliyuncs.com.

Pour plus d'informations sur la configuration de UserData, consultez les Descriptions des paramètres de requête.

Arrêt d'un envoi

Remarque

stopUpload prend effet uniquement pendant l'envoi d'un fichier.

uploader.stopUpload();

Gestion d'une liste de fichiers

Utilisez les opérations suivantes pour gérer les fichiers envoyés ou en cours d'envoi.

listFiles : Interroge la liste d'envoi.

Renvoie les fichiers ajoutés via addFile. La propriété file indique le type de fichier. Parcourez la liste pour obtenir les index des fichiers afin d'effectuer des opérations de gestion.
```
var list = uploader.listFiles();
for (var i=0; i<list.length; i++) {
    console.log("file:" + list[i].file.name);
}
```

deleteFile : Supprime un fichier à envoyer.

uploader.deleteFile(index);//The index of the file that you want to delete. The index is returned by the listFiles operation.

cancelFile : Annule l'envoi d'un fichier.
Remarque
- Après avoir appelé cancelFile, le message oss is cancel as error s'affiche dans la console. Cela empêche les parties envoyées d'occuper de l'espace de stockage et d'engendrer des coûts.
- Pour reprendre un envoi annulé, appelez d'abord uploader.resumeFile(index); pour restaurer le fichier.
```
uploader.cancelFile(index);
```
resumeFile : Reprend l'envoi d'un fichier.
```
uploader.resumeFile(index);
```
cleanList : Efface la liste d'envoi.
```
uploader.cleanList();
```

Dépannage

Si une erreur se produit lors de l'utilisation du SDK pour mini-programme WeChat, identifiez la cause en fonction du code d'erreur. Pour plus d'informations, consultez les Codes d'erreur.