直接クリエイターアップロード

直接クリエイターアップロードを使用すると、エンドユーザーはAPIトークンをクライアントに公開することなく、Cloudflare Streamに直接動画をアップロードできます。

動画が基本アップロードで200 MB未満であり、ユーザーが再開可能なアップロードを必要としない場合は、HTTP POSTリクエストを受け入れるURLを生成します。
動画が200 MBを超える場合や、ユーザーに中断されたアップロードを再開させる必要がある場合は、tusプロトコルを使用してURLを生成します。

いずれの場合も、ユーザーのアップロードに予約する最大の期間を指定する必要があります。これにより、利用可能なストレージ内で収容できることが保証されます。

基本アップロード

ユーザーが200 MB未満の動画をアップロードし、再開可能なアップロードを許可する必要がない場合は、このオプションを使用します。

直接アップロードAPIを使用して、一意の一回限りのアップロードURLを生成します。

curl https://api.cloudflare.com/client/v4/accounts/{account_id}/stream/direct_upload \
--header 'Authorization: Bearer <API_TOKEN>' \
 --data '{
    "maxDurationSeconds": 3600
 }'

{
  "result": {
    "uploadURL": "https://upload.videodelivery.net/f65014bc6ff5419ea86e7972a047ba22",
    "uid": "f65014bc6ff5419ea86e7972a047ba22"
  },
  "success": true,
  "errors": [],
  "messages": []
}

前のステップからのuploadURLを使用して、ユーザーはサイズが200 MBに制限された動画ファイルをアップロードできます。以下の例のリクエストを参照してください。

curl --request POST \
  --form file=@/Users/mickie/Downloads/example_video.mp4 \
  https://upload.videodelivery.net/f65014bc6ff5419ea86e7972a047ba22

成功したアップロードは200 HTTPステータスコードの応答を受け取ります。アップロードが作成時に定義されたアップロード制約を満たさない場合や、サイズが200 MBを超える場合は、4xx HTTPステータスコードの応答を受け取ります。

再開可能なアップロード

アップロードURLを返す独自のAPIエンドポイントを作成します。

以下の例は、動画をアップロードするために使用できるURLを取得するためのWorkerの構築方法を示しています。一回限りのアップロードURLは、応答のLocationヘッダーに返され、応答ボディには含まれません。

export async function onRequest(context) {
  const { request, env } = context;
  const { CLOUDFLARE_ACCOUNT_ID, CLOUDFLARE_API_TOKEN } = env;
  const endpoint = `https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/stream?direct_user=true`;

  const response = await fetch(endpoint, {
    method: 'POST',
    headers: {
      'Authorization': `bearer ${CLOUDFLARE_API_TOKEN}`,
      'Tus-Resumable': '1.0.0',
      'Upload-Length': request.headers.get('Upload-Length'),
      'Upload-Metadata': request.headers.get('Upload-Metadata'),
    },
  });

  const destination = response.headers.get('Location');

  return new Response(null, {
    headers: {
      'Access-Control-Expose-Headers': 'Location',
      'Access-Control-Allow-Headers': '*',
      'Access-Control-Allow-Origin': '*',
      'Location': destination,
    },
  });
}

このAPIエンドポイントを直接tusクライアントで使用します。一般的な間違いは、新しいAPIエンドポイントからアップロードURLを抽出し、これを直接使用することです。以下は、ステップ1のAPIをuppy tusクライアントで使用する完全な例です。

<html>
  <head>
    <link href="https://releases.transloadit.com/uppy/v3.0.1/uppy.min.css" rel="stylesheet" />
  </head>
  <body>
    <div id="drag-drop-area" style="height: 300px"></div>
    <div class="for-ProgressBar"></div>
    <button class="upload-button" style="font-size: 30px; margin: 20px">アップロード</button>
    <div class="uploaded-files" style="margin-top: 50px">
      <ol></ol>
    </div>
    <script type="module">
      import {
        Uppy,
        Tus,
        DragDrop,
        ProgressBar,
      } from 'https://releases.transloadit.com/uppy/v3.0.1/uppy.min.mjs';

      const uppy = new Uppy({ debug: true, autoProceed: true });

      const onUploadSuccess = el => (file, response) => {
        const li = document.createElement('li');
        const a = document.createElement('a');
        a.href = response.uploadURL;
        a.target = '_blank';
        a.appendChild(document.createTextNode(file.name));
        li.appendChild(a);

        document.querySelector(el).appendChild(li);
      };

      uppy
        .use(DragDrop, { target: '#drag-drop-area' })
        .use(Tus, { endpoint: '/api/get-upload-url', chunkSize: 150 * 1024 * 1024 })
        .use(ProgressBar, { target: '.for-ProgressBar', hideAfterFinish: false })
        .on('upload-success', onUploadSuccess('.uploaded-files ol'));

      const uploadBtn = document.querySelector('button.upload-button');
      uploadBtn.addEventListener('click', () => uppy.upload());
    </script>
  </body>
</html>

tusの使用やクライアントコードの例についての詳細は、tusによる再開可能なアップロードを参照してください。

Upload-Metadataヘッダー構文

tusを使用する際に、基本アップロードと同様の制約を適用することができます。そのためには、最初のリクエスト（上記の例でWorkerによって行われる）でUpload-Metadataリクエストヘッダーの一部としてexpiryとmaxDurationSecondsを渡す必要があります。Upload-Metadataの値は、実際のファイルアップロードを行う後続のリクエストでは無視されます。

Upload-Metadataヘッダーには、キーと値のペアを含める必要があります。キーはテキストで、値はbase64でエンコードされる必要があります。キーと値はスペースで区切り、等号ではありません。複数のキーと値のペアを結合するには、追加のスペースなしでカンマを含めます。

以下の例では、Upload-Metadataヘッダーは、最大動画時間が10分で、期限のタイムスタンプ前にアップロードされ、この動画をプライベートにすることをStreamに指示しています：

'Upload-Metadata: maxDurationSeconds NjAw,requiresignedurls,expiry MjAyNC0wMi0yN1QwNzoyMDo1MFo='

NjAwは「600」（または10分）のbase64エンコードされた値です。 MjAyNC0wMi0yN1QwNzoyMDo1MFo=は「2024-02-27T07:20:50Z」（RFC3339形式のタイムスタンプ）のbase64エンコードされた値です。

アップロード進捗の追跡

一意の一回限りのアップロードURLが作成された後、応答で返された一意の識別子（uid）を保持して、ユーザーのアップロードの進捗を追跡することができます。

これを行う方法は2つあります：

UIDを使用して動画を検索し、ステータスを確認します。
Webhookサブスクリプションを作成して、動画のステータスに関する通知を受け取ります。これらの通知には動画のUIDが含まれます。

請求に関する考慮事項

直接クリエイターアップロードリンクは、ユーザーがまだこのURLに動画をアップロードしていなくても、ストレージ制限にカウントされます。リンクが使用される前に期限切れになった場合や、アップロードが処理できない場合、ストレージ予約は解除されます。それ以外の場合、アップロードがエンコードされると、その実際の期間がストレージにカウントされ、予約は解除されます。

価格の詳細な内訳や例のシナリオについては、価格設定を参照してください。

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings