WebRTC

使用 WHIP 实现亚秒级延迟直播，使用 WHEP 向无限并发观众播放。

WebRTC 适用于需要近实时播放直播视频的场景，例如：

直播结果具有时效性（体育赛事、财经新闻）
观众与直播互动（直播问答、拍卖等）
希望终端用户能从 Web 浏览器或原生应用轻松开播或创建自己的视频内容

步骤 1：创建直播输入

通过以下两种方式之一创建直播输入：

使用 Cloudflare 仪表板的 Live inputs（直播输入） 页面。
Go to Live inputs ↗
向 /live_inputs API 端点发送 POST 请求

向 /live_inputs 发送 POST 请求的 API 响应json

{
  "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 的人都可以向该直播输入推流。

从以下位置复制 URL：

Cloudflare 仪表板的 Live inputs（直播输入） 页面。
Go to Live inputs ↗
API 响应中的 webRTC 键（见上文）。

将此 URL 粘贴到示例代码中。

简化示例代码javascript

// 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);

创作者授权摄像头和麦克风后，直播视频和音频将自动通过 WebRTC 推流到 Cloudflare。

您也可以将此 URL 与任何支持 WebRTC-HTTP ingestion protocol (WHIP) ↗ 的客户端配合使用。请参阅支持的 WHIP 客户端了解我们已测试并确认与 Cloudflare Stream 兼容的客户端列表。

步骤 3：使用 WHEP 播放直播视频

从以下位置复制 URL：

Cloudflare 仪表板的 Live inputs（直播输入） 页面。
Go to Live inputs ↗
API 响应中的 webRTCPlayback 键（见上文）

并发观众数量没有限制。

将此 URL 粘贴到示例代码中。

简化示例代码javascript

// 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 egress protocol (WHEP) ↗ 的客户端配合使用。请参阅支持的 WHEP 客户端了解我们已测试并确认与 Cloudflare Stream 兼容的客户端列表。

在原生应用中使用 WebRTC

如果您正在构建原生应用，上述示例代码可在 WkWebView (iOS) ↗、WebView (Android) ↗ 或 react-native-webrtc ↗ 中运行。如果您需要在不使用 webview 的情况下使用 WebRTC，可以使用 Google 的 Java 和 Objective-C 原生 WebRTC API 实现 ↗。

调试 WebRTC

Chrome：导航至 chrome://webrtc-internals 查看详细日志和图表。
Firefox：导航至 about:webrtc 查看 WebRTC 会话信息，与 Chrome 类似。
Safari：要启用 WebRTC 日志，在检查器中打开设置选项卡（齿轮图标），在下拉菜单中将 WebRTC logging 设为 "Verbose"。

支持的 WHIP 和 WHEP 客户端

除上述示例中使用的 WHIP 和 WHEP 示例外，我们已测试并确认以下客户端与 Cloudflare Stream 兼容：

WHIP

OBS (Open Broadcaster Software) ↗
@eyevinn/whip-web-client ↗ (TypeScript)
whip-go ↗ (Go)
gst-plugins-rs ↗ (Gstreamer 插件，Rust 编写)
Larix Broadcaster ↗ (基于 Pion 的 iOS 和 Android 免费 WebRTC 应用，提供 SDK)

WHEP

@eyevinn/webrtc-player ↗ (TypeScript)
@eyevinn/wrtc-egress ↗ (TypeScript)
gst-plugins-rs ↗ (Gstreamer 插件，Rust 编写)

随着更多 WHIP 和 WHEP 客户端发布，我们承诺支持它们并完全合规于两种协议。

支持的编解码器

VP9 ↗（推荐，最高质量）
VP8 ↗
h264 ↗（Constrained Baseline Profile Level 3.1，在 SDP offer 的 profile-level-id 参数中称为 42e01f）

符合 WHIP 和 WHEP 规范

Cloudflare Stream 完全支持 WHIP ↗ 和 WHEP ↗ 规范的所有方面，包括：

Trickle ICE ↗
WHEP 的服务器与客户端 offer 模式 ↗

您可以在 WHIP 和 WHEP API 响应的 protocol-version 头中找到正在使用的 WHIP 和 WHEP 具体版本。此头的值引用每个协议的 IETF 草案标识。目前，Stream 使用 draft-ietf-wish-whip-06（预计为最终 WHIP 草案修订版）和 draft-murillo-whep-01（当前最新的 WHEP 草案）。

Beta 期间的限制

录制尚不支持（即将推出）
Simulcasting（转推）尚不支持（即将推出）
直播观众数尚不支持（即将推出）
分析（Analytics）尚不支持（即将推出）
WHIP 和 WHEP 必须一起使用——我们尚不支持使用 RTMP/SRT 推流并用 WHEP 播放，或使用 WHIP 推流并用 HLS 或 DASH 播放。（即将推出）
正式发布后，WebRTC 直播将与 Cloudflare Stream 其余部分采用相同定价，基于存储分钟数和视频交付分钟数。