Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

WebRTC による超低遅延

最終更新 Markdown で表示Agent セットアップ

WebRTC を使うと、超低遅延（サブ秒）のライブ配信（WHIP）と再生（WHEP）を、数千人の同時視聴者へ届けられます。WebRTC は、リアルタイム体験が必要な一対多の放送に向いています。例は次のとおりです。

  • ライブイベントの結果が時間に敏感な場合: ゲーム、スポーツ中継、金融ニュース
  • 視聴者がコンテンツとやり取りする場合: eラーニング、ライブ Q&A、オークション

専用の配信アプリやハードウェアエンコーダーなしでユーザーがライブを開始できるため、クリエイター向けプラットフォームやブラウザー内体験にも向いています。

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

次のいずれかでライブ入力を作成します。

POST リクエストを /live_inputs へ送ったときの 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 でライブを開始する

ブラウザーから配信する

ライブ入力ごとに、1 人のクリエイターが配信できる一意の URL があります。これは認証情報です。クリエイターに_だけ_共有してください。この URL を持つ人は、この入力へライブ動画を配信できます。

WHIP エンドポイント URL は次から取得します。

  • Cloudflare ダッシュボードの Live inputs ページ。

    Live inputs を開く ↗

  • 入力作成時の API レスポンスにある webRTC.url プロパティ。

ブラウザーからライブを開始する、依存関係なしの完全な例は、ブラウザーでの最初の WebRTC 配信 チュートリアルを参照してください。

この URL は、WebRTC-HTTP Ingestion Protocol (WHIP) ↗ に対応する任意のクライアントでも使えます。Cloudflare Stream との互換を確認したクライアントは、対応している WHIP / WHEP クライアント を参照してください。

ほかのソフトウェアから配信する（OBS、FFmpeg）

OBS 31.0 以降を使う場合: WebRTC/WHIP 配信の推奨設定です。Settings で次を設定します。

  • Stream タブ
    • Service: WHIP
    • Server: Cloudflare Stream の WebRTC（WHIP）URL をそのまま貼り付けます
      • 配信シークレットはこの URL に含まれます。「Bearer Token」は空のままにします
  • Output タブ
    • Audio Encoder: FFmpeg Opus （または利用可能な別の Opus エンコーダー）
    • Video Encoder: x264 （または QuickSync や NVENC などのハードウェアアクセラレーション H.264 エンコーダー）
    • Rate Control: CBR または VBR
    • Bitrate: 3000 Kbps から 7000 Kbps のあいだ
    • Profile: main または baseline
    • B Frames: 0
  • Video タブ
    • Framerate: 「Common FPS Values」または「Integer FPS Value」と呼ばれる欄を 30 にします

FFmpeg 8.1 以降を使う場合: このサンプルコマンドは、時計表示と一定のトーンを出力します。入力条件は自分のコンテンツに合わせて変更してください。

ffmpeg -hide_banner -y \
  -re -f lavfi -i testsrc=size=1920x1080:rate=30 \
  -re -f lavfi -i "sine=frequency=200" \
  -vf "drawtext=fontsize=120:text='%{gmtime}.%{eif\:1M*t-1K*trunc(t\*1K)\:d}':x=0:y=0:fontcolor=WhiteSmoke:box=1:[email protected]" \
  -c:v libx264 -flags +global_header -maxrate 4000k -bufsize 1500k \
  -tune zerolatency -g 30 -profile:v baseline -pix_fmt yuv420p \
  -acodec libopus -b:a 128k -ar 48000 -ac 2 \
  -ts_buffer_size 16777216 \
  -f whip https://customer-igynxd2rwhmuoxw8.cloudflarestream.com/71adb6d1676e2aa8d42ddce2271a2aedk5b6efd743b78487c095b2911e08345d8/webRTC/publish

Windows/PowerShell を使う場合:

  • vf 文字列に :fontfile='C\:/Windows/Fonts/consola.ttf' を追加します。Windows 環境ではフォントの指定が必要です
  • 複数行コマンドの区切りには、バックスラッシュ \ ではなくバッククォート ``` を使います

FFmpeg の WHIP 対応は現在、libx264 の baseline が必要です。ts_buffer_size はメモリ割り当て戦略であり、遅延を増やすバッファーではありません。

ステップ 3: WHEP でライブ動画を再生する

Stream Player を使う場合: Stream の組み込みプレーヤーは、利用可能なときに自動で WHEP に切り替えて WebRTC 配信を再生します。詳細は「Stream Player を使う」を参照してください。プレーヤー埋め込みコードは、ダッシュボードのライブ入力の設定ページで生成できます。

カスタムプレーヤーで WHEP エンドポイントを使う場合:

次のいずれかから URL をコピーします。

  • Cloudflare ダッシュボードの Live inputs ページ。

    Live inputs を開く ↗

  • 入力作成時の API レスポンスにある webRTCPlayback.url プロパティ。

クリエイターが配信中なら、視聴者はブラウザーで 500 ミリ秒未満の遅延で放送を視聴できます。同時視聴者数に固定の上限はありません。

ブラウザーで WebRTC を再生する、依存関係なしの完全な例は、ブラウザーでの最初の WebRTC 配信 チュートリアルを参照してください。

この URL は、WebRTC-HTTP Egress Protocol (WHEP) ↗ に対応する任意のクライアントでも使えます。Cloudflare Stream との互換を確認したクライアントは、対応している WHIP / WHEP クライアント を参照してください。

WebRTC のデバッグ

  • Chrome: chrome://webrtc-internals を開き、詳細なログとグラフを確認します。
  • Firefox: about:webrtc を開き、Chrome と同様に WebRTC セッションの情報を確認します。
  • Safari: WebRTC ログを有効にするには、インスペクターの設定タブ（歯車アイコン）を開き、ドロップダウンで WebRTC logging を "Verbose" にします。

対応している WHIP / WHEP クライアント

ブラウザーのネイティブ WebRTC API で、独自の配信・公開アプリを書けます。ブラウザーでの最初の WebRTC 配信 チュートリアルを参照してください。ネイティブコード以外では、次のクライアントが Cloudflare Stream と互換であることを確認しています。

配信向け WHIP

専用アプリケーション:

開発ライブラリ:

再生向け WHEP

ネイティブアプリで WebRTC を使う

ネイティブアプリを作る場合、ブラウザーでの最初の WebRTC 配信 チュートリアルのブラウザー例は、WkWebView (iOS) ↗、WebView (Android) ↗、または react-native-webrtc ↗ 内で動かせます。WebView なしで WebRTC が必要な場合は、Google の Java および Objective-C ネイティブの WebRTC API 実装 ↗ を使えます。

対応している配信コーデック

  • VP9 ↗
  • VP8 ↗
  • h264 ↗（Constrained Baseline Profile Level 3.1。SDP offer の 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 で再生することは、まだ対応していません。

  • 配信メトリクスとプレーヤー体験メトリクスには未対応です
  • 録画とライブ HLS 再生にはまだ未対応です
  • サイマルキャスト（RTMP/SRT による再配信）には未対応です
  • ライブ視聴者数には未対応です

料金

Stream Live WebRTC は 標準の Stream 料金 に従います。配信した動画 1,000 分あたり $1 です。WebRTC は現在録画の対象外のため、ストレージは消費しません。

役に立ちましたか？