INTEGRITY Документация

← Cloudflare Stream / stream

WebRTC

Прямые трансляции (по WHIP) и воспроизведение (по WHEP) с задержкой менее секунды для неограниченного числа одновременных зрителей.

WebRTC отлично подходит, если видео нужно воспроизводить практически в реальном времени, например:

Шаг 1: Создайте live input

Создайте входной поток одним из двух способов:

Ответ API на POST-запрос к /live_inputs
{
  "uid": "1a553f11a88915d093d45eda660d2f8c",
 ...
  "webRTC": {
    "url": "https://customer-<CODE>.cloudflarestream.com/<SECRET>/webRTC/publish"
  },
  "webRTCPlayback": {
    "url": "https://customer-<CODE>.cloudflarestream.com/<INPUT_UID>/webRTC/play"
  },
...
}

Шаг 2: Начните трансляцию с помощью WHIP

У каждого входного потока есть уникальный URL, на который может вести трансляцию один автор. Этот URL должен только быть передан создателю: любой, у кого есть этот URL, может транслировать через этот live input.

Скопируйте URL одним из способов:

Вставьте этот URL в пример кода.

Упрощённый пример кода
// Add a <video> element to the HTML page this code runs in:
// <video id="input-video" autoplay muted></video>

import WHIPClient from "./WHIPClient.js";

const url = "<WEBRTC_URL_FROM_YOUR_LIVE_INPUT>"; // add the webRTC URL from your live input here
const videoElement = document.getElementById("input-video");
const client = new WHIPClient(url, videoElement);

Как только автор трансляции разрешит доступ к камере и микрофону, видео и аудио начнут автоматически передаваться в Cloudflare по протоколу WebRTC.

Вы также можете использовать этот URL-адрес с любым клиентом, поддерживающим Протокол приема WebRTC через HTTP (WHIP) ↗. См. поддерживаемые клиенты WHIP список протестированных нами клиентов с подтверждённой совместимостью с Cloudflare Stream.

Шаг 3: Воспроизведите прямую трансляцию с помощью WHEP

Скопируйте URL одним из способов:

Ограничений на количество одновременных зрителей нет.

Вставьте этот URL в пример кода.

Упрощённый пример кода
// Add a <video> element to the HTML page this code runs in:
// <video id="output-video" autoplay muted></video>

import WHEPClient from "./WHEPClient.js";

const url = "<WEBRTC_URL_FROM_YOUR_LIVE_INPUT>"; // add the webRTCPlayback URL from your live input here
const videoElement = document.getElementById("output-video");
const client = new WHEPClient(url, videoElement);

Пока автор ведёт трансляцию, зрители видят её в браузере с задержкой менее 1 секунды.

Вы также можете использовать этот URL-адрес с любым клиентом, поддерживающим Протокол вывода WebRTC через HTTP (WHEP) ↗. См. поддерживаемые клиенты WHEP список протестированных нами клиентов с подтверждённой совместимостью с Cloudflare Stream.

Использование WebRTC в нативных приложениях

Если вы разрабатываете нативное приложение, приведенный выше пример кода можно выполнить внутри WkWebView (iOS) ↗, WebView (Android) ↗ или используя react-native-webrtc ↗. Если вам нужно использовать WebRTC без webview, вы можете использовать нативные Java и Objective-C SDK от Google реализации API WebRTC ↗.

Отладка WebRTC

Поддерживаемые клиенты WHIP и WHEP

Помимо примеров клиентов WHIP и WHEP, использованных выше, мы протестировали и подтвердили совместимость с Cloudflare Stream следующих клиентов:

WHIP

WHEP

По мере появления новых клиентов WHIP и WHEP мы намерены поддерживать их и полностью соответствовать обоим протоколам.

Поддерживаемые кодеки

Соответствие спецификациям WHIP и WHEP

Cloudflare Stream полностью поддерживает все аспекты WHIP ↗ и WHEP ↗ спецификации, включая:

Вы можете узнать точную используемую версию WHIP и WHEP в protocol-version заголовок в ответах WHIP и WHEP API. Значение этого заголовка указывает на слаг черновика IETF для каждого протокола. В настоящее время Stream использует draft-ietf-wish-whip-06 (ожидается, что это будет финальная редакция черновика WHIP) и draft-murillo-whep-01 (самый актуальный черновик WHEP).

Ограничения на этапе бета-тестирования