Cloudflare Streamでコンテンツ管理に利用できるCreator Propertyがサポートされました！

Cloudflare Streamでビデオコンテンツに対してCreator Propertyが付与できるようになりました。コンテンツ管理や視聴分析などに利用可能です。実際にPropertyを付与し視聴時間のフィルタリングなどを確認してみました。

#Cloudflare Stream

#Cloudflare

清水俊也

2022.05.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

清水です。先週、CloudflareではPlatform Weekと題して様々な発表を行っていました。本エントリではこの中でもCloudflare Streamについての発表をあつかいます。Cloudflare Streamにアップロードしたビデオコンテンツに対して「Creator Property （Creatorプロパティ）」が付与できるようになり、コンテンツ管理や視聴分析などに利用できるようになりました。

Cloudflare Stream simplifies creator management for creator platforms

これまでCloudflare Streamにアップロードしたビデオコンテンツに対しては一意のビデオID （video ID）が割り当てられ、その他にビデオ名などの情報を付与するかたちでした。今回のアップデートで、このビデオコンテンツに対する情報の1つとして「Creator Property」が利用可能になりました。ビデオコンテンツの作成者情報をコンテンツ自体に持たせることができます。これまでビデオIDとコンテンツ作成者情報を個別に紐付け管理していた、というような場合これが不要になります。

この「Creator Property」を使ってCreatorごと（同じCreator Propertyを持つビデオ）のコンテンツのリストやその再生時間といった解析情報の取得ができます。視聴数が急増しているCreatorの確認や、個々のCreatorに対する請求や支払いなどの確認が容易にできるようになります。またCloudflare StreamではVOD動画ファイルのアップロードについて、Cloudflareのアカウントを持たないコンテンツ作成者が直接アップロードする形式もサポートしています。この際にCreator自身がプロパティ情報を入力する、ということも可能です。

Cloudflare StreamでCreator Propertyを使ってみた

それでは実際にCreator Propertyについて確認してみましょう。まずはダッシュボードからアップロード済みのビデオコンテンツを確認してみます。Creatorの項目が追加されていますね。

Creator Propertyを入力（user-musashinoとしました）して[保存]します。

その後、この動画を再生してダッシュボードのAnalytics画面を確認してみましょう。デフォルトでは特にフィルターは設定されておらず、アカウント全体の再生時間が確認できる状態です。

フィルターを追加してみます。Creatorが「user-musashino」であるものだけをフィルターしてみました。

[適用]ボタンを押下すると、Creator Propertyに設定したビデオコンテンツのみの再生時間が表示されました。

このほかにもGraphQLを使ったAPI経由での分析結果の取得もできるようです。

API経由でビデオコンテンツにCreator Propertyを付与する

ダッシュボード経由でのCreator Propetyの付与ならびに分析結果のフィルタリングについて確認できました。続いてAPI経由でのCreator Propetyの付与についても確認しておきましょう。アップロード時の指定、アップロード済みのビデオコンテンツへの付与、それぞれを試してみます。なお、Creator Propertyを指定しないアップロード方法については以下ブログエントリを参照ください。

Cloudflare Streamでオンデマンド動画（VOD）を扱ってみた | DevelopersIO

アップロード時に指定する

まずはアップロード時のCreator Propetyの付与です。リンクを使ったアップロードで試してみます。/copyエンドポイントへPOSTするかたちは通常のリンクを使ったアップロードと同じですが、送信データでCreator Propertyを指定します。

curl -X POST \
     -H "Authorization: Bearer ${TOKEN}" \
     --data '{"url":"https://my-bucket.s3.ap-northeast-1.amazonaws.com/IMG_3411.MOV","meta":{"name":"桜の咲く井の頭公園"}, "creator":"user-mitaka"}' \
    "https://api.cloudflare.com/client/v4/accounts/${ACCOUNT}/stream/copy"

送信データのJSONを整形すると以下となります。

{
  "url": "https://my-bucket.s3.ap-northeast-1.amazonaws.com/IMG_3411.MOV",
  "meta": {
    "name": "桜の咲く井の頭公園"
  },
  "creator": "user-mitaka"
}

以下が実行結果です。

 % curl -X POST \
     -H "Authorization: Bearer ${TOKEN}" \
     --data '{"url":"https://my-bucket.s3.ap-northeast-1.amazonaws.com/IMG_3411.MOV","meta":{"name":"桜の咲く井の頭公園"}, "creator":"user-mitaka"}' \
    "https://api.cloudflare.com/client/v4/accounts/${ACCOUNT}/stream/copy"
{
  "result": {
    "uid": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "creator": "user-mitaka",
    "thumbnail": "https://videodelivery.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/thumbnails/thumbnail.jpg",
    "thumbnailTimestampPct": 0,
    "readyToStream": false,
    "status": {
      "state": "downloading",
      "errorReasonCode": "",
      "errorReasonText": ""
    },
    "meta": {
      "downloaded-from": "https://my-bucket.s3.ap-northeast-1.amazonaws.com/IMG_3411.MOV",
      "name": "桜の咲く井の頭公園"
    },
    "created": "2022-05-17T07:56:12.771338Z",
    "modified": "2022-05-17T07:56:12.771338Z",
    "size": 133030774,
    "preview": "https://watch.videodelivery.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "allowedOrigins": [],
    "requireSignedURLs": false,
    "uploaded": "2022-05-17T07:56:12.771321Z",
    "uploadExpiry": null,
    "maxSizeBytes": null,
    "maxDurationSeconds": null,
    "duration": -1,
    "input": {
      "width": -1,
      "height": -1
    },
    "playback": {
      "hls": "https://videodelivery.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.m3u8",
      "dash": "https://videodelivery.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.mpd"
    },
    "watermark": null
  },
  "success": true,
  "errors": [],
  "messages": []
}

既存のビデオコンテンツにCreator Propertyを付与する

続いてすでにアップロード済みのビデオコンテンツにCreator Propertyを付与してみます。まずはすでにアップロード済みのビデオコンテンツについてCreator Propertyが付与されていないことを確認しておきましょう。

% curl -X GET \
     -H "Authorization: Bearer ${TOKEN}" \
    "https://api.cloudflare.com/client/v4/accounts/${ACCOUNT}/stream/${VIDEOID}"

{
  "result": {
    "uid": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "creator": null,
    "thumbnail": "https://videodelivery.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/thumbnails/thumbnail.jpg",
    "thumbnailTimestampPct": 0,
    "readyToStream": true,
    "status": {
      "state": "ready",
      "pctComplete": "100.000000",
      "errorReasonCode": "",
      "errorReasonText": ""
    },
    "meta": {
      "filename": "IMG_5908.MOV",
      "filetype": "video/quicktime",
      "name": "小田原の海",
      "relativePath": "null",
      "type": "video/quicktime"
    },
    "created": "2022-04-30T09:57:30.832975Z",
    "modified": "2022-04-30T10:04:11.871587Z",
    "size": 382466674,
    "preview": "https://watch.videodelivery.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "allowedOrigins": [],
    "requireSignedURLs": false,
    "uploaded": "2022-04-30T09:57:30.832929Z",
    "uploadExpiry": "2022-05-01T09:57:30.832922Z",
    "maxSizeBytes": null,
    "maxDurationSeconds": null,
    "duration": 60.9,
    "input": {
      "width": 3840,
      "height": 2160
    },
    "playback": {
      "hls": "https://videodelivery.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.m3u8",
      "dash": "https://videodelivery.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.mpd"
    },
    "watermark": null
  },
  "success": true,
  "errors": [],
  "messages": []
}

/stream/${VIDEOID}エンドポイントにCreator PropertyのデータをPOSTすることで付与ができます。

curl -X POST \
     -H "Authorization: Bearer ${TOKEN}" \
     -H "Content-Type: application/json" \
     --data '{"creator":"user-odawara"}' \
     "https://api.cloudflare.com/client/v4/accounts/${ACCOUNT}/stream/${VIDEOID}"

送信データのJSONを整形すると以下となります。

{
  "creator": "user-odawara"
}

以下が実行結果となります。

% curl -X POST \
     -H "Authorization: Bearer ${TOKEN}" \
     -H "Content-Type: application/json" \
     --data '{"creator":"user-odawara"}' \
     "https://api.cloudflare.com/client/v4/accounts/${ACCOUNT}/stream/${VIDEOID}"
{
  "result": {
    "uid": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "creator": "user-odawara",
    "thumbnail": "https://videodelivery.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/thumbnails/thumbnail.jpg",
    "thumbnailTimestampPct": 0,
    "readyToStream": true,
    "status": {
      "state": "ready",
      "pctComplete": "100.000000",
      "errorReasonCode": "",
      "errorReasonText": ""
    },
    "meta": {
      "filename": "IMG_5908.MOV",
      "filetype": "video/quicktime",
      "name": "小田原の海",
      "relativePath": "null",
      "type": "video/quicktime"
    },
    "created": "2022-04-30T09:57:30.832975Z",
    "modified": "2022-05-17T08:08:01.501676Z",
    "size": 382466674,
    "preview": "https://watch.videodelivery.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "allowedOrigins": [],
    "requireSignedURLs": false,
    "uploaded": "2022-04-30T09:57:30.832929Z",
    "uploadExpiry": "2022-05-01T09:57:30.832922Z",
    "maxSizeBytes": null,
    "maxDurationSeconds": null,
    "duration": 60.9,
    "input": {
      "width": 3840,
      "height": 2160
    },
    "playback": {
      "hls": "https://videodelivery.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.m3u8",
      "dash": "https://videodelivery.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.mpd"
    },
    "watermark": null
  },
  "success": true,
  "errors": [],
  "messages": []
}

まとめ

Cloudflare Streamで新たにサポートされたCreator Propertyについて、ダッシュボードから既存のビデオコンテンツにCreatorプロパティの付与ならびに分析結果のフィルタリング、またAPI経由でのCreatorプロパティの付与を行ってみました。ビデオコンテンツに対する一種のメタ情報といえるかと思いますが、視聴分析などと連携が図られており非常に使い勝手が良い印象を受けました。ビデオコンテンツの数が増えるにつれてビデオ名だけですと管理が難しくなりますよね。またライブ入力から自動で録画されるビデオコンテンツにも半自動的にCreator Propertyが付与されたりするとさらに嬉しいなと思いました。