← Cloudflare Stream / stream

Начало работы

• Загрузите своё первое видео
• Запустите свою первую прямую трансляцию

Вы можете загружать видео через API или прямо в Stream странице дашборда Cloudflare.

Список поддерживаемых типов файлов см. в Поддерживаемые форматы видео.

Чтобы использовать 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' },
});

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"
	}
}

Поскольку Stream должен скачать и обработать видео, оно может быть недоступно в течение нескольких секунд в зависимости от длины ролика. Опрашивайте API Stream, пока readyToStream это true, или используйте вебхуки чтобы получать уведомление о готовности видео к трансляции.

Используйте UID видео из первого шага, чтобы опрашивать статус видео:

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

{
	"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": []
}

Видео, загруженные в 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>

Приведённый выше код для встраивания также можно найти на Stream странице дашборда Cloudflare.

• Отредактируйте своё видео и добавить субтитры или водяные знаки
• Настройка плеера Stream

Вы можете создать live input с помощью API или Источники прямой трансляции странице дашборда Cloudflare.

Чтобы использовать 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' },
});

{
	"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
	}
}

Мы рекомендуем использовать Open Broadcaster Software (OBS) ↗ чтобы начать работу.

Прямые трансляции можно воспроизводить на любом устройстве и платформе, от веб-сайтов до нативных приложений, с помощью тех же видеоплееров, что и для видео, загруженных в Stream. См. Воспроизведение видео подробности и примеры воспроизведения видео на разных платформах.

Чтобы воспроизвести на своём сайте только что начатую прямую трансляцию с помощью Stream Player, скопируйте uid Live Input из запроса выше, вместе с вашим уникальным кодом клиента, и замените <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>

Приведённый выше код для встраивания также можно найти на Stream странице дашборда Cloudflare.

• Защитите свою трансляцию
• Просмотр количества зрителей в реальном времени

Чтобы сделать видеоконтент более доступным, добавьте субтитры и высококачественная запись звука ↗.