コンテンツにスキップ

WebRTC

ベータ

サブ秒のレイテンシでのライブストリーミング（WHIPを使用）と再生（WHEPを使用）を無制限の同時視聴者に提供します。

WebRTCは、ほぼリアルタイムで再生する必要があるライブビデオに最適です。例えば：

  • ライブイベントの結果が時間に敏感な場合（ライブスポーツ、金融ニュース）
  • 視聴者がライブストリームとインタラクションする場合（ライブQ&A、オークションなど）
  • エンドユーザーがウェブブラウザやネイティブアプリから簡単にライブ配信や自分のビデオコンテンツを作成できるようにしたい場合

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

ストリームダッシュボードを使用 ↗、または/live_inputs APIエンドポイントにPOSTリクエストを送信します。

APIレスポンス（/live_inputsへのPOSTリクエストから）
{
  "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を使用してライブ配信する

すべてのライブ入力には、1人のクリエイターがストリーミングできるユニークなURLがあります。このURLはクリエイターとだけ共有する必要があります — このURLを持つ人は誰でもこのライブ入力にライブビデオをストリーミングすることができます。

APIレスポンスのwebRTCキーからURLをコピーします（上記参照）、またはCloudflareダッシュボード ↗から直接取得します。

このURLを提供されたWHIPのサンプルコード ↗に貼り付けます。

簡略化されたサンプルコード
// このコードが実行されるHTMLページに<video>要素を追加します:
// <video id="input-video" autoplay muted></video>


import WHIPClient from "./WHIPClient.js"; // サンプルWHIPクライアント、詳細はhttps://github.com/cloudflare/workers-sdk/blob/main/templates/stream/webrtc/src/WHIPClient.ts


const url = "<WEBRTC_URL_FROM_YOUR_LIVE_INPUT>"; // ここにライブ入力からのwebRTC URLを追加します
const videoElement = document.getElementById("input-video");
const client = new WHIPClient(url, videoElement);

クリエイターがカメラとマイクへのアクセスを許可すると、ライブビデオとオーディオが自動的にCloudflareにストリーミングされ始めます。

このURLは、WebRTC-HTTP取り込みプロトコル（WHIP） ↗をサポートする任意のクライアントでも使用できます。サポートされているWHIPクライアントを参照して、Cloudflare Streamとの互換性が確認されたクライアントのリストを確認してください。

ステップ3: WHEPを使用してライブビデオを再生する

APIレスポンスのwebRTCPlaybackキーからURLをコピーします（上記参照）、またはCloudflareダッシュボード ↗から直接取得します。同時視聴者の数に制限はありません。

このURLを提供されたWHEPのサンプルコード ↗に貼り付けます。

簡略化されたサンプルコード
// このコードが実行されるHTMLページに<video>要素を追加します:
// <video id="output-video" autoplay muted></video>


import WHEPClient from "./WHEPClient.js"; // サンプルWHEPクライアント、詳細はhttps://github.com/cloudflare/workers-sdk/blob/main/templates/stream/webrtc/src/WHEPClient.ts


const url = "<WEBRTC_URL_FROM_YOUR_LIVE_INPUT>"; // ここにライブ入力からのwebRTCPlayback URLを追加します
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 ↗内で実行できます。WebViewなしでWebRTCを使用する必要がある場合は、GoogleのJavaおよびObjective-CネイティブWebRTC APIの実装 ↗を使用できます。

WebRTCのデバッグ

  • Chrome: chrome://webrtc-internalsに移動して詳細なログとグラフを表示します。
  • Firefox: about:webrtcに移動して、Chromeと同様にWebRTCセッションに関する情報を表示します。
  • Safari: WebRTCログを有効にするには、インスペクタから設定タブ（歯車アイコン）を開き、ドロップダウンメニューでWebRTCログを「詳細」に設定します。

サポートされているWHIPおよびWHEPクライアント

上記の例で使用されているサンプルWHIPクライアント ↗およびサンプルWHEPクライアント ↗に加えて、以下のクライアントがCloudflare Streamとの互換性が確認されています：

WHIP

WHEP

今後、より多くのWHIPおよびWHEPクライアントが公開されるにつれて、私たちはそれらをサポートし、両方のプロトコルに完全に準拠することを約束します。

サポートされているコーデック

  • VP9 ↗（最高品質の推奨）
  • VP8 ↗
  • h264 ↗（制約付きベースラインプロファイルレベル3.1、SDPオファーのprofile-level-idパラメータで42e01fと呼ばれます。）

WHIPおよびWHEP仕様への準拠

Cloudflare Streamは、WHIP ↗およびWHEP ↗仕様のすべての側面を完全にサポートしています。これには以下が含まれます：

使用されているWHIPおよびWHEPの特定のバージョンは、WHIPおよびWHEP APIレスポンスのprotocol-versionヘッダーに記載されています。このヘッダーの値は、各プロトコルのIETFドラフトスラッグを参照しています。現在、Streamはdraft-ietf-wish-whip-06（最終WHIPドラフト改訂が期待される）およびdraft-murillo-whep-01（最新のWHEPドラフト）を使用しています。

ベータ版中の制限

  • 録画はまだサポートされていません（近日中に対応予定）
  • 同時配信（再配信）はまだサポートされていません（近日中に対応予定）
  • ライブ視聴者数はまだサポートされていません（近日中に対応予定）
  • 分析はまだサポートされていません（近日中に対応予定）
  • WHIPとWHEPは一緒に使用する必要があります — 現在、RTMP/SRTを使用してストリーミングし、WHEPを使用して再生することや、WHIPを使用してストリーミングし、HLSまたはDASHを使用して再生することはサポートされていません（近日中に対応予定）
  • 一般提供が開始されると、WebRTCストリーミングはCloudflare Streamの他の部分と同様に、保存された分数と配信されたビデオの分数に基づいて価格が設定されます。
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings