はじめに · Cloudflare Stream ドキュメント

最初の動画をアップロードする

ステップ 1: 公開 URL からサンプル動画をアップロードする

API または Cloudflare ダッシュボードの Stream ページから、動画をアップロードできます。

受け付けるファイル形式の一覧は、対応している動画形式を参照してください。

API を使う場合は、次の例の API_TOKEN と ACCOUNT_ID を自分の認証情報に置き換えます。

curl \
-X POST \
-d '{"url":"https://storage.googleapis.com/stream-example-bucket/video.mp4","meta":{"name":"My First Stream Video"}}' \
-H "Authorization: Bearer <API_TOKEN>" \
https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/stream/copy

const client = new Cloudflare({
	apiEmail: process.env['CLOUDFLARE_EMAIL'],
	apiKey: process.env['CLOUDFLARE_API_KEY'],
});

const video = await client.stream.copy.create({
	account_id: '<ACCOUNT_ID>',
	url: 'https://storage.googleapis.com/stream-example-bucket/video.mp4',
	meta: { name: 'My First Stream Video' },
});

外部アプリケーションから REST API を使う方法と、TypeScript、Python、Go 向けの事前生成 SDK の詳細は、Stream の REST API と SDK リファレンスを参照してください。

export default {
	async fetch(request, env, ctx): Promise<Response> {
		const videoDetails = await env.STREAM.upload(
			"https://storage.googleapis.com/stream-example-bucket/video.mp4",
			{ meta: { name: "My First Stream Video" } }
		);
		return new Response(JSON.stringify(videoDetails));
	},
} satisfies ExportedHandler<{ STREAM: StreamBinding }>;

{
	"$schema": "node_modules/wrangler/config-schema.json",
	"name": "<ENTER_WORKER_NAME>",
	"main": "src/index.ts",
	"compatibility_date": "$today",
	"observability": {
		"enabled": true
	},
	"stream": {
		"binding": "STREAM"
	}
}

Workers Stream バインディング API リファレンスを参照してください。

ステップ 2: 動画がストリーミング可能になるまで待つ

Stream は動画のダウンロードと処理を行うため、動画の長さによっては数秒使えないことがあります。readyToStream が true になるまで Stream API をポーリングするか、webhook でストリーミング可能になった通知を受け取ります。

ステップ 1 の動画 UID を使い、動画をポーリングします。

リクエストbash

curl \
-H "Authorization: Bearer <API_TOKEN>" \
https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/stream/<VIDEO_UID>

レスポンスjson

{
	"result": {
		"uid": "6b9e68b07dfee8cc2d116e4c51d6a957",
		"preview": "https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/watch",
		"thumbnail": "https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.jpg",
		"readyToStream": true,
		"status": {
			"state": "ready"
		},
		"meta": {
			"downloaded-from": "https://storage.googleapis.com/stream-example-bucket/video.mp4",
			"name": "My First Stream Video"
		},
		"created": "2020-10-16T20:20:17.872170843Z",
		"size": 9032701
		//...
	},
	"success": true,
	"errors": [],
	"messages": []
}

ステップ 3: ウェブサイトまたはアプリで動画を再生する

Stream にアップロードした動画は、ウェブサイトからネイティブアプリまで、どのデバイス・プラットフォームでも再生できます。各プラットフォームでの再生例は動画を再生するを参照してください。

Stream Player でウェブサイトに動画を埋め込むには、上記リクエストの動画 uid と一意のカスタマーコードをコピーし、次の埋め込みコードの <CODE> と <VIDEO_UID> を置き換えます。

<iframe
	src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
	title="Example Stream video"
	frameborder="0"
	allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen
>
</iframe>

上記の埋め込みコードは、Cloudflare ダッシュボードの Stream ページでも確認できます。

Videos を開く ↗

次のステップ

動画を編集し、キャプションやウォーターマークを追加する
Stream Player をカスタマイズする

最初のライブストリームを開始する

ステップ 1: ライブ入力を作成する

API または Cloudflare ダッシュボードの Live inputs ページから、ライブ入力を作成できます。

Live inputs を開く ↗

API を使う場合は、次の例の API_TOKEN と ACCOUNT_ID を自分の認証情報に置き換えます。

curl -X POST \
-H "Authorization: Bearer <API_TOKEN>" \
-D '{"meta": {"name":"test stream"},"recording": { "mode": "automatic" }}' \
https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/stream/live_inputs

const client = new Cloudflare({
	apiEmail: process.env['CLOUDFLARE_EMAIL'],
	apiKey: process.env['CLOUDFLARE_API_KEY'],
});

const liveInput = await client.stream.liveInputs.create({
	account_id: '<ACCOUNT_ID>',
	meta: { name: 'test stream' },
	recording: { mode: 'automatic' },
});

レスポンスjson

{
	"uid": "f256e6ea9341d51eea64c9454659e576",
	"rtmps": {
		"url": "rtmps://live.cloudflare.com:443/live/",
		"streamKey": "MTQ0MTcjM3MjI1NDE3ODIyNTI1MjYyMjE4NTI2ODI1NDcxMzUyMzcf256e6ea9351d51eea64c9454659e576"
	},
	"created": "2021-09-23T05:05:53.451415Z",
	"modified": "2021-09-23T05:05:53.451415Z",
	"meta": {
		"name": "test stream"
	},
	"status": null,
	"recording": {
		"mode": "automatic",
		"requireSignedURLs": false,
		"allowedOrigins": null
	}
}

ステップ 2: RTMPS の URL とキーをコピーし、ライブ配信アプリケーションで使う

始めるには Open Broadcaster Software (OBS) ↗ の利用をおすすめします。

ステップ 3: ウェブサイトまたはアプリでライブストリームを再生する

ライブストリームは、Stream にアップロードした動画と同じプレーヤーで、ウェブサイトからネイティブアプリまで、どのデバイス・プラットフォームでも再生できます。各プラットフォームでの再生例は動画を再生するを参照してください。

Stream Player で、いま開始したライブストリームをウェブサイトに埋め込むには、上記リクエストのライブ入力 uid と一意のカスタマーコードをコピーし、次の埋め込みコードの <CODE> と <VIDEO_UID> を置き換えます。

<iframe
	src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
	title="Example Stream video"
	frameborder="0"
	allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen
>
</iframe>

上記の埋め込みコードは、Cloudflare ダッシュボードの Stream ページでも確認できます。

Videos を開く ↗

次のステップ

アクセシビリティの考慮事項

動画コンテンツをより使いやすくするには、キャプションと高品質な音声収録 ↗ を含めます。