tencent cloud

VODは、オーディオとビデオをブラウザからアップロードするシナリオ向けに、Webアップロード用SDKを提供しています。SDKソースコードが必要な場合は、SDKソースコード にアクセスしてください。

シンプルビデオアップロード

SDKのインポート

scriptのインポート方法

webpackを使用しない場合は、scriptタグ方式によってインポートすることができます。この方法では、グローバル変数TcVodが公開されます。scriptをインポートするには、次の2つの方法があります。

• ローカルへのダウンロード
  SDKソースコードをローカルにダウンロードし、次のようにインポートします。

  <script src="./vod-js-sdk-v6.js"></script>
  

説明：

インポートパスはローカル保存先のパスにご自身で変更してください。

• CDNリソースの使用
  CDNリソースを使用すると、次の方法で直接インポートできます。

  <script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
  

ここをクリックして、scriptによってインポートされたDemoをご確認ください。ここをクリックして、Demoソースコードをご確認ください。

npmのインポート方法

webpackを使用する場合（VueやReactなど）は、npmを介してインポートできます。

// npm install vod-js-sdk-v6を実行した後に、importを実行してページに直接インポートします。
import TcVod from 'vod-js-sdk-v6'

ここをクリック して、npmによってインポートされたDemoソースコードをご確認ください。

注意：

SDKはPromiseに依存しています。低いバージョンのブラウザではご自身でインポートしてください。

アップロード署名を取得するための関数の定義

function getSignature() {
  return axios.post(url).then(function (response) {
    return response.data.signature;
  })
};

説明：

• urlは、署名配布サービスのURLです。その他の関連情報については、クライアントからのアップロードガイド をご参照ください。
• signatureの計算ルールについては、クライアントからのアップロード署名をご参照ください。
• サブアプリケーション、ビデオファイルカテゴリー、タスクフローなどの情報はすべてアップロード署名に含まれています。その他の関連情報については、署名パラメータの説明をご参照ください。

ビデオアップロードの例

// importによってインポートした場合、new TcVod(opts) を実行します
// new TcVod.default(opts) は、scriptによってインポートされます 
const tcVod = new TcVod.default({
  getSignature: getSignature // 前文で説明したアップロード署名を取得する関数です
})

const uploader = tcVod.upload({
  mediaFile: mediaFile, // Fileタイプのメディアファイル（ビデオ、オーディオまたは画像）
})
uploader.on('media_progress', function(info) {
  console.log(info.percent) // 進行状況
})

// コールバック結果の説明
// type doneResult = {
//   fileId: string,
//   video: {
//     url: string
//   },
//   cover: {
//     url: string
//   }
// }
uploader.done().then(function (doneResult) {
  // deal with doneResult
}).catch(function (err) {
  // deal with error
})

説明：

• new TcVod(opts)のoptsは、このインターフェースに関連するパラメータを指します。 詳細については、TcVodインターフェースの説明 をご参照ください。
• アップロード方法は、ファイルのサイズに応じて、通常アップロードとマルチパートアップロードが自動的に選択されます。マルチパートアップロードの各手順を気にすることなく、マルチパートアップロードを行うことができます。
• 指定されたサブアプリケーションにアップロードする必要がある場合は、サブアプリケーションシステム-クライアントからのアップロードをご参照ください。

高度な機能

ビデオとカバーの同時アップロード

const uploader = tcVod.upload({
  mediaFile: mediaFile,
  coverFile: coverFile,
})

uploader.done().then(function (doneResult) {
  // deal with doneResult
})

アップロードの進行状況の取得

SDKは、現在のアップロード進行状況をコールバック形式で表示します。

const uploader = tcVod.upload({
  mediaFile: mediaFile,
  coverFile: coverFile,
})
// ビデオのアップロードが完了したとき
uploader.on('media_upload', function(info) {
  uploaderInfo.isVideoUploadSuccess = true;
})
// ビデオのアップロード進行状況
uploader.on('media_progress', function(info) {
  uploaderInfo.progress = info.percent;
})
// カバーをアップロードしたとき
uploader.on('cover_upload', function(info) {
  uploaderInfo.isCoverUploadSuccess = true;
})
// カバーのアップロード進行状況
uploader.on('cover_progress', function(info) {
  uploaderInfo.coverProgress = info.percent;
})

uploader.done().then(function (doneResult) {
  // deal with doneResult
})

xxx_uploadとxxx_progressのコールバック値については、マルチパートアップロード/タスクのコピー操作をご参照ください。

アップロードのキャンセル

SDKは、進行中のビデオまたはカバーのアップロードのキャンセルをサポートしています。

const uploader = tcVod.upload({
  mediaFile: mediaFile,
  coverFile: coverFile,
})

uploader.cancel()

中断からの再開

SDKでは、自動的にアップロードを再開できます。追加の操作は必要ありません。アップロードが予期せず終了した場合（ブラウザが閉じた、ネットワークが中断したなど）、中断したポイントから再度アップロードを続行できるため、アップロードを繰り返す時間が短縮されます。

インターフェースの説明

TcVod

パラメータ名	入力必須	タイプ	パラメータの説明
getSignature	はい	Function	アップロード署名を取得するための関数。
appId	いいえ	number	入力後、組み込みの統計レポートに自動的に反映されます。
reportId	いいえ	number	入力後、組み込みの統計レポートに自動的に反映されます。

TcVod.upload

パラメータ名	入力必須	タイプ	パラメータの説明
mediaFile	いいえ	File	メディアファイル（ビデオ、オーディオまたは画像）。
coverFile	いいえ	File	カバーファイル。
mediaName	いいえ	string	メディアファイルのメタデータを上書きするファイル名。
fileId	いいえ	string	カバーを変更するときに渡されます。
reportId	いいえ	number	入力後、組み込みの統計レポートに自動的に反映されます。コンストラクタの設定を上書きします。
fileParallelLimit	いいえ	number	同じインスタンスでアップロードされたファイルの並列処理の数。デフォルト値は3です。
chunkParallelLimit	いいえ	number	同じアップロードファイルのマルチパートの並列処理の数。デフォルト値は6です。
chunkRetryTimes	いいえ	number	マルチパートアップロードの場合、エラーの再試行回数。デフォルト値は2です（最初に追加すると、リクエストは合計3回になります）
chunkSize	いいえ	number	マルチパートアップロードの場合、パーティションあたりのバイトのサイズ。デフォルト値は8388608 (8MB)です
progressInterval	いいえ	number	アップロード進捗のコールバックメソッドonProgressのコールバック頻度。単位：ms、デフォルト値は1000です

イベント

イベント名	入力必須	イベントの説明
media_upload	いいえ	メディアファイルのアップロードが成功したとき。
cover_upload	いいえ	カバーのアップロードが成功したとき。
media_progress	いいえ	メディアファイルのアップロードの進行状況。
cover_progress	いいえ	カバーファイルのアップロードの進行状況。

よくあるご質問

1. Fileオブジェクトを取得する方法とは
   typeがfile型のinputタグを使用すると、Fileオブジェクトを取得できます。
2. アップロードするファイルのサイズに制限はありますか？
   最大60GBをサポートしています。
3. SDKがサポートしているブラウザのバージョンとは？
   Chrome、Firefoxなどは、HTML5の主流ブラウザををサポートします。IEは、IE10以降のバージョンをサポートします。
4. アップロードの一時停止や再開などの機能を実装する方法とは？
   SDKの基盤層には中断からの再開機能が自動的に実装されているため、一時停止とは、本質的にはuploader.cancel()メソッドの呼び出しとなります。同様に、一時停止後のアップロード再開も、最初のtcVod.uploadメソッドを呼び出すことで実行されます。違いは、アップロードが再開されるときに呼び出されるメソッドのパラメータは、以前にキャッシュされたパラメータでなければならないという点です（例えば、グローバル変数を使用してアップロードの開始時にパラメータを保存して、アップロードの完了後にそれをクリアすることができます）。
5. Web端末のアップロードSDKは、https: ドメイン名を使用してアップロードしますか？
   サポートできます。デフォルトでは、現在のページのドメイン名がhttp:であるとWeb端末が判断した場合、http: ドメイン名を使用してアップロードします。ドメイン名がhttp:ではないと判断した場合、https: ドメイン名を使用してアップロードします。