跳转到内容
搜索文档

WebRTC

最后更新 查看 MarkdownAgent 设置

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

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

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

步骤 1:创建直播输入

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

向 /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

WHEP

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

支持的编解码器

  • VP9(推荐,最高质量)
  • VP8
  • h264(Constrained Baseline Profile Level 3.1,在 SDP offer 的 profile-level-id 参数中称为 42e01f

符合 WHIP 和 WHEP 规范

Cloudflare Stream 完全支持 WHIPWHEP 规范的所有方面,包括:

您可以在 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 其余部分采用相同定价,基于存储分钟数和视频交付分钟数。

这篇文档对您有帮助吗?