ApsaraVideo VOD:JavaScript用SDKのアップロード

前提条件

• 指定されたリージョンのストレージパスやコールバック設定など、アップロードに必要なシステム設定が構成されます。 詳細については、「ストレージバケットの管理」および「コールバックの設定」をご参照ください。

• RAMユーザーが作成され、ApsaraVideo VODへのアクセスに使用されます。 Alibaba CloudアカウントのAccessKeyペアの漏洩によるセキュリティリスクを防ぐため、RAMユーザーを作成し、ApsaraVideo VODへのアクセスに必要な権限をRAMユーザーに付与することを推奨します。 その後、RAMユーザーのAccessKeyペアを使用してApsaraVideo VODにアクセスできます。 詳細については、「RAMユーザーの作成と権限付与」をご参照ください。

• JavaScript用アップロードSDKは、次のブラウザで使用できます。

  • Internet Explorer 10以降

  • Edge

  • Google Chrome、Firefox、またはSafariのメジャーバージョン

  • Android、iOS、またはWindows Phoneが提供するデフォルトのブラウザのメジャーバージョン

• ダウンロードリンク: Upload SDK for JavaScript V1.5.6とデモソースコード (jqueryとVue)

アップロード資格情報またはSTSトークンの設定

• アップロードURLと資格情報の設定

  onUploadstartedコールバックでアップロードURLと資格情報を設定します。 uploadInfoはコールバックに含まれます。

  const {VideoId,UploadAuth,UploadAddress} = data;
  uploader.setUploadAuthAndAddress(uploadInfo,UploadAuth,UploadAddress,VideoId);

  パラメーター	説明
  uploadInfo	値は、onUploadstartedコールバックの最初のパラメーターから取得できます。
  uploadAuth	値は、CreateUploadVideo操作に対する応答から取得できます。
  uploadAddress	値は、CreateUploadVideo操作に対する応答から取得できます。
  videoId	値は、CreateUploadVideo操作に対する応答から取得できます。

• アップロード資格情報の有効期限が切れた後にアップロードを再開する

  onUploadTokenExpiredコールバックでresumeUploadWithAuth操作を呼び出して、アップロード資格情報の有効期限が切れた後にアップロードを再開します。 RefreshUploadVideo操作に対する応答で返された新しいアップロード資格情報にuploadAuthを設定します。

  const {VideoId,UploadAuth,UploadAddress} = data;
  uploader.resumeUploadWithAuth(UploadAuth);

• STSトークンの設定

  setSTSTokenを呼び出して、ファイルアップロード用のSTSトークンを設定します。 onUploadstartedコールバックでsetSTSTokenを呼び出します。 uploadInfoはコールバックに含まれます。

  var info = data.SecurityTokenInfo
  uploader.setSTSToken(uploadInfo,info.AccessKeyId,info.AccessKeySecret,info.SecretToken);

  パラメーター	説明
  uploadInfo	値は、onUploadstartedコールバックの最初のパラメーターから取得できます。
  accessKeyId	値は、CreateSecurityToken操作に対する応答から取得できます。
  accessKeySecret	値は、CreateSecurityToken操作に対する応答から取得できます。
  secretToken	値は、CreateSecurityToken操作に対する応答から取得できます。

• STSトークンの有効期限が切れた後にアップロードを再開する

  onUploadTokenExpiredコールバックでresumeUploadWithSTSTSTokenを呼び出して、有効期限が切れた後にアップロード資格情報を更新します。

  var info = data.SecurityTokenInfo
  uploader.resumeUploadWithSTSToken(info.AccessKeyId, info.AccessKeySecret, info.SecretToken);

ファイルのアップロード

このセクションで説明する手順を実行して、アップロードSDK for JavaScriptを使用してファイルをアップロードします。

1. アップロードSDK for JavaScriptを統合します。

   アップロードSDK for JavaScriptパッケージをダウンロードします。 詳細については、「SDKの概要とダウンロード」をご参照ください。 アップロードSDKは、外部モジュールの部分的なサポートのみを提供します。 importまたはrequireメソッドを呼び出してファイルを参照すると、ReferenceError: OSS is not definedエラーメッセージが返されます。 次のいずれかの方法を使用して、ビジネス要件に基づいてファイルを参照できます。

   • (推奨) HTMLでのスクリプトによる参照

     <!--  The es6-promise file is required for Internet Explorer. Internet Explorer 10 and later versions are supported. -->
       <script src="../lib/es6-promise.min.js"></script>
       <script src="../lib/aliyun-oss-sdk-6.17.1.min.js"></script>
       <script src="../aliyun-upload-sdk-1.5.5.min.js"></script>

   • モジュールを使用した参照

     ウィンドウにObject Storage Service (OSS) モジュールを手動で追加できます。 サンプルコード：

     説明

     スクリプトを使用してHTMLページのファイルを既に参照している場合は、モジュールを追加する必要はありません。

     import OSS from '../lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.17.1.min'
     window.OSS = OSS;
     import '../lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.5.min'

2. アップロードURLとアップロード資格情報の取得またはアップロード認証用のSTSトークン。

   アップロードSDK for JavaScriptを使用してファイルをアップロードする場合、AppServerからアップロード資格情報を取得し、Alibaba Cloud上のOSSサーバーにファイルをアップロードする必要があります。 AppServerからアップロード資格情報を取得した後、SDKの設定で資格情報を指定します。 次のいずれかの方法を使用して、アップロード資格情報を取得できます。

   • アップロードURLと資格情報を取得する方法の詳細については、「アップロードURLと資格情報の取得」をご参照ください。

   • STSトークンの取得方法の詳細については、「STSトークンの取得」をご参照ください。

   アップロード結果

   取得したアップロードURLと資格情報、または取得したSTSトークンを使用して、アップロードインスタンスを初期化します。

3. アップロード資格情報またはSTSトークンを使用して、アップロードインスタンスを初期化します。 アップロードインスタンスの初期化には、アップロード資格情報を使用することを推奨します。

   アップロードインスタンスを初期化する前に、初期化コールバックを設定する必要があります。

   1. 初期化コールバックを設定します。

      AliyunUpload.Vodのコールバックを設定します。 次のサンプルコードは、アップロードインスタンスを初期化するときに指定できる設定の例を示しています。

      説明

      ApsaraVideo VODのサポートされているリージョンと対応するエンドポイントの詳細については、「ApsaraVideo VODのリージョンID」をご参照ください。

      表示コード

      var uploader = new AliyunUpload.Vod({
           // The account ID. This parameter is required. To view your account ID, log on to the Alibaba Cloud Management Console and go to the Account Center (https://account.console.aliyun.com/).
           userId:"122",
           // The region in which you want to upload the file. Default value: cn-shanghai. 
           // eu-central-1, ap-southeast-1
           region:"",
           // The size of each part in multipart upload. Unit: bytes. The default size is 1 MB (1024 × 1024). The size cannot be smaller than 100 KB (100 × 1024).
           partSize: 1048576,
           // The maximum number of parts that can be uploaded in parallel. Default value: 5.
           parallel: 5,
           // The maximum number of attempts to retry the upload when a network error occurs. Default value: 3.
           retryCount: 3,
           // The interval at which you want the system to retry the upload when a network error occurs. Default value: 2. Unit: seconds.
           retryDuration: 2,
           // The upload starts.
           'onUploadstarted': function (uploadInfo) {
            },
           // The file is uploaded.
           'onUploadSucceed': function (uploadInfo) {
            },
           // The upload fails.
           'onUploadFailed': function (uploadInfo, code, message) {
            },
           // The upload progress. Unit: bytes.
           'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
            },
           // The upload credential or STS token expires.
           'onUploadTokenExpired': function (uploadInfo) {
            },
           // All files are uploaded.
           'onUploadEnd':function(uploadInfo){
             }
        });

   2. アップロードインスタンスを初期化します。 アップロードURLとアップロード資格情報またはSTSトークンを使用して、ビジネス要件に基づいてアップロードインスタンスを初期化できます。

      onUploadstartedコールバックでアップロード資格情報を取得または更新します。 次のいずれかの方法を使用して、ビジネス要件に基づいてアップロードインスタンスを初期化します。

      • (推奨) アップロードURLとアップロード資格情報の使用

        アップロードの開始時に発生するonUploadStartedコールバックのsetUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress,videoId) メソッドを呼び出して、アップロードURLと認証情報を指定します。

        オーディオまたはビデオファイルをアップロードするサンプルコード

        説明

        onUploadTokenExpiredコールバックは、アップロード資格情報の有効期限が切れると発生します。 resumeUploadWithAuth(uploadAuth) メソッドを呼び出して、新しい資格情報を設定し、アップロードを再開します。

        表示コード

        // Start the upload.
        // uploadInfo contains the information about the file that you want to upload.
        // {
        //   videoId: '', // The ID of the video or audio file. The ID is returned by the server.
        //   Endpoint: '', // The endpoint that is used to access OSS.
        //   Bucket: '', // The OSS bucket.
        //   Object: ''// The basic unit for storing data in OSS.
        // }
        'onUploadstarted': function (uploadInfo) {
          // The upload method. You can call different operations in ApsaraVideo VOD to obtain uploadauth and uploadAddress based on whether uploadInfo.videoId is empty. The SDK obtains the value of uploadInfo.videoId from localstorage.
          // If the uploadInfo.videoId parameter is not empty, call the RefreshUploadVideo operation. Otherwise, call the CreateUploadVideo operation.
          // If you delete a video or audio file from the ApsaraVideo VOD console during the upload, the video ID no longer exists in the console but exists in the browser. In this case, the error InvalidVideo.NotFound is returned. To resolve this issue, you must clear the value of localstorage.
          var url = '';
          if (uploadInfo.videoId) {
            // If the uploadInfo.videoId parameter is not empty, call the RefreshUploadVideo operation.
            url = 'refreshUrl'; // Specify the URL that is used to access AppServer.
          }
          else{
            // If the uploadInfo.videoId parameter is empty, call the CreateUploadVideo operation.
            url = 'createUrl'; // Specify the URL that you use to call the CreateUploadVideo operation. Example: https://xxxx.com/createUploadVideo.
          }
        
          // The following sample code provides an example on how to set the upload credential:
          // The logic used to obtain UploadAuth, UploadAddress, and VideoId may vary based on AppServer.
          fetch(url)
            .then((res) => res.json())
            .then((data) => {
                uploader.setUploadAuthAndAddress(uploadInfo, data.uploadAuth, data.uploadAddress, data.videoId);
          });
        },
        
        // The upload credential expires.
        'onUploadTokenExpired': function (uploadInfo) {
          // Call the RefreshUploadVideo operation to update uploadAuth based on the value of uploadInfo.videoId.
          // Specify the new value of the uploadAuth parameter obtained from ApsaraVideo VOD in the SDK.
        
          // Update uploadAuth that you obtained from ApsaraVideo VOD to the upload SDK for JavaScript.
          // The following sample code provides an example on how to set the upload credential:
          // The logic used to obtain UploadAuth, UploadAddress, and VideoId may vary based on AppServer.
          fetch(url)
            .then((res) => res.json())
            .then((data) => {
            uploader.resumeUploadWithAuth(data.UploadAuth);
          });
        },

        画像をアップロードするサンプルコード

        説明

        画像のアップロード時にアップロード資格情報は自動的に更新されません。 アップロード資格情報の有効期限が切れると、ImageIdは無効になり、削除できます。 この場合、画像をアップロードするための新しい資格情報を取得する必要があります。

        表示コード

        // Start the upload.
        // uploadInfo contains the information about the file that you want to upload.
        // {
        // ImageId: ''', // The ID of the image. The ID is returned by the server.
        //   Endpoint: '', // The endpoint that is used to access OSS.
        //   Bucket: '', // The OSS bucket.
        //   Object: ''// The basic unit for storing data in OSS.
        // }
        'onUploadstarted': function (uploadInfo) {
          // The upload method. You can call different operations in ApsaraVideo VOD to obtain uploadauth and uploadAddress based on whether uploadInfo.ImageId is empty. The SDK obtains the value of uploadInfo.ImageId from localstorage.
          // If you delete an image file from the ApsaraVideo VOD console during the upload, the image ID no longer exists in the console but exists in the browser. In this case, the error NotFound is returned. To resolve this issue, you must clear the value of localstorage.
          var url = 'createUrl';   // Specify the URL that you use to call the CreateUploadVideo operation. Example: https://xxxx.com/createUploadImage.
          // The logic used to obtain UploadAuth, UploadAddress, and ImageId may vary based on AppServer.
          fetch(url)
            .then((res) => res.json())
            .then((data) => {
                uploader.setUploadAuthAndAddress(uploadInfo, data.UploadAuth, data.UploadAddress, data.ImageId);
          });
        }
        

      • STSトークンの使用

        アップロードの開始時に発生するonUploadStartedコールバックのsetSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken); メソッドを呼び出して、取得したSTSトークンを指定します。

        説明

        STSトークンの有効期限が切れると、onUploadTokenExpiredコールバックが発生します。 resumeUploadWithSTSTSToken (accessKeyId, accessKeySecret, secretToken) メソッドを呼び出して、新しいSTSトークンを設定し、アップロードを再開します。

        表示コード

        onUploadstarted: function (uploadInfo) {
          // If you use an STS token to upload the file, you must call the uploader.setUploadAuthAndAddress method.
          var stsUrl = 'stsUrl';
          // The following sample code provides an example on how to set the upload credential:
          // The logic used to obtain accessKeyId, accessKeySecret, and secretToken may vary based on AppServer.
          fetch(stsUrl)
            .then((res) => res.json())
            .then((data) => {
            var info = data.SecurityTokenInfo
            uploader.setSTSToken(uploadInfo, info.AccessKeyId, info.AccessKeySecret, info.SecretToken);
          });
        },
        
        onUploadTokenExpired: function (uploadInfo) {
          // If you use an STS token to upload a file and the token expires during the upload, obtain a new STS token and resume the upload.
          // If you upload a large file, the STS token may expire before the upload is complete. In this case, call the resumeUploadWithSTSToken method in the onUploadTokenExpired callback.
        
          var stsUrl = 'stsUrl';
          // The following sample code provides an example on how to set the upload credential:
          // The logic used to obtain accessKeyId, accessKeySecret, and secretToken may vary based on AppServer.
          fetch(stsUrl)
            .then((res) => res.json())
            .then((data) => {
            var info = data.SecurityTokenInfo
            uploader.resumeUploadWithSTSToken(info.AccessKeyId, info.AccessKeySecret, info.SecretToken);
          });
        },

4. アップロードするファイルの種類に基づいて、アップロードのパラメーターを設定します。

   1. アップロードするファイルを選択します。

       <form action="">
         <input type="file" name="file" id="files" multiple/>
       </form>
       userData = '';
       document.getElementById("files")
        .addEventListener('change', function (event) {
          for(var i=0; i<event.target.files.length; i++) {
            // The logic code.
          }
        });

   2. 選択したファイルをアップロードリストに追加します。

      uploader.addFile(file,null,null,null,'{"Vod":{}}');

      パラメーター	必須	タイプ	説明
      file	必須	ファイル	アップロードするビデオまたはオーディオファイル。
      endpoint	選択可能	String	OSSエンドポイント。 ファイルをアップロードするリージョンに基づいて、OSSエンドポイントを指定します。 nullを指定した場合、ファイルはAppServerによって選択されたエンドポイントにアップロードされます。
      バケット	選択可能	String	ファイルをアップロードするバケット。 nullを指定した場合、ファイルはAppServerによって選択されたバケットにアップロードされます。
      object	選択可能	String	ファイルをアップロードするオブジェクト。 nullを指定した場合、実際の値はAppServerによって決定されます。
      paramData	選択可能	String	アップロードするビデオまたはオーディオファイルに関する情報 (ビデオまたはオーディオファイルのタイトルと説明、ビデオまたはオーディオファイルのトランスコードとコールバックの設定など) 。 STSトークンを使用してビデオまたはオーディオファイルをApsaraVideo VODにアップロードする場合は、paramDataを指定できます。 paramDataの値はJSON文字列です。 リクエストでVodを指定する必要があります。 paramDataパラメーターでサポートされているパラメーターをVodの下にネストできます。 詳細については、「CreateUploadVideo」または「CreateUploadImage」をご参照ください。

      サンプルコード：

      説明

      • STSトークンを使用してファイルをアップロードする場合にのみ、SDKにparamDataを指定する必要があります。 アップロードURLとアップロード資格情報を使用してファイルをアップロードする場合は、CreateUploadVideoまたはCreateUploadImage操作を呼び出すときにのみparamDataを指定します。

      • WorkflowIdとTemplateGroupIdの両方を指定した場合、WorkflowIdパラメーターの値が有効になります。

      • ビデオまたはオーディオファイルのタイトルとカテゴリIDを指定します。

        var paramData = '{"Vod":{"Title":"test","CateId":"234"}}';

      • ビデオファイルまたはオーディオファイルのタイトルとトランスコードテンプレートグループのIDを指定します。

        var paramData = '{"Vod":{"Title":"test","TemplateGroupId":"e6bb587b5365ac38a41462a4940****"}}';

      • ビデオまたはオーディオファイルのタイトルとワークフローのIDを指定します。

        var paramData = '{"Vod":{"Title":"test","WorkflowId":"e2d027f16b5ee9cdf126266d32d****"}}';

5. アップロードを開始します。

   1. startUpload()メソッドを呼び出してアップロードを開始します。

      uploader.startUpload();

   2. アップロードの開始時にアップロードの進行状況を同期するには、onUploadProgressコールバックを起動します。

   3. ファイルのアップロード時にアップロード結果を返すには、onUploadSucceedコールバックを起動します。

アップロード結果

• ビデオまたはオーディオファイルがアップロードされると、videoIdが返されます。 次に、ファイルを再生するための再生URLを取得する必要があります。 詳細については、「再生資格情報を使用したビデオの再生」をご参照ください。

• imageUrlは、画像のアップロード時に自動的には返されません。 画像のURLを取得するには、画像をアップロードする前にImageUploadCompleteイベントのコールバックを設定します。 FileURLは、ImageUploadCompleteコールバックで取得できます。 詳細については、「コールバックの設定」をご参照ください。 URL署名を有効にした場合、URLは有効期間が経過すると期限切れになります。 詳細については、「URL署名の設定」をご参照ください。

高度な機能

uploader.stopUpload();

onUploadstarted: function (uploadInfo) {
if (Upload method 1) {
  if(!uploadInfo.videoId)// No error occurred during file upload.
  {
    // Call the CreateUploadVideo operation in your environment.
    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
  }
  else// If the videoId parameter is not empty, update the upload credential based on the value of videoId.
  {
    // Call the RefreshUploadVideo operation in your environment to update the upload credential.
    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress);
  }
}
else(Upload method 2)
{
   // Call the setSTSToken operation to obtain the STS token in your environment.
   uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret,secretToken);
}
}

 uploader.getCheckpoint(file);