イベントリンク
【オンライン】Qiita Summit ～リアルタイムコミュニケーション～ - connpass
自己紹介
- khayama - Qiita - Cloudflare に関する150記事/3年。いいね！お待ちしております
- kyhayama（@kyhayama）さん / X - フォロー、Qiita 記事リクエストなどウェルカムです
-
mermaidも使える Qiita スライドモードを使って話します-
mermaidで Architecture Diagrams (v11.1.0+) が描けるように --> Qiita にもサポートしてほしい
-
今日話すこと
- 動くものを見せる
- 開発に使えるツールを紹介する
- 具体的な手順が書かれた記事も紹介
実はこういうの嫌いじゃないです
「技術的革新について話すだけのヤツはクソだ、黙って手を動かせ」とLinux生みの親のリーナス・トーバルズが語る - GIGAZINE
リアルタイムって？
- 要は同期型の双方向通信
- 動画に関連して分類すると以下のようになる
- テキストチャットとは独立して考えることができる
参考：WebSocket を使った同期型の双方向通信
- クライアント/サーバー型通信 - socket.io、PartyKit、yjs 等のライブラリ
- テキストや座標データを使ったユースケースがメイン（チャットルーム、IoTデバイス制御など）
- バイナリデータ（音声・画像・映像等）送受信のチャネルとして利用することは可能
- 動画配信の場合、ストリーミングに関わる周辺機能がないため、高度な処理の実装が必要
- WebSocketの次の技術！？WebTransportについての解説とチュートリアル #websocket - Qiita
おさらい：動画配信技術に入門する - Qiita
- Video On Demand (VOD) = 非同期型の片方向通信：事前にファイルをアップロード
- 動画ファイルのキャッシュを効かせたり、配信サービスを使う
- Live Streaming = 同期型の片方向通信：入力から配信までを同時におこなう
- 動画ファイルのキャッシュ効果は限定的で、最大瞬間風速の負荷に耐えうる準備が必要
技術があるのはわかったけど、どう使うの？
[Video On Demand] VOD 構成例 + デモ
-
Cloudflare で HTTP Live Streaming (HLS) をキャッシュする #cloudflare - Qiita
- あくまで Enterprise Plan 向けの構成（Ref. CDN Service-Specific Terms）
[Video On Demand] Cloudflare でオリジンレスな VOD の構成例
[Live Streaming] WebRTC を使った 構成例 + デモ (1-to-many)
- 1 秒未満の遅延 (Sub-second latency) を目指せる
- なんといってもブラウザだけあれば使える
- Ingestion (WHIP, WebRTC-HTTP Ingest Protocol) と Egress (WHEP, WebRTC-HTTP Egress Protocol) の両方で使える
WebRTC live streaming to unlimited viewers, with sub-second latency
[Online Meeting] Cloudflare Calls を活用した Orange Meets デモ
- Cloudflare Calls = サーバーレスな WebRTC SFU + TURN as a Service (Open Beta, 無償枠あり)
- 1:1のビデオ通話から大規模な1-to-many / many-to-manyまで構築できるビルディングブロック
- 強みを活かして ICEPerf で最も高速なプロバイダを目指す
Online Meeting デモ : cloudflare/orange
まとめ：動画配信 x リアルタイムコミュニケーション
- 3つのユースケースを体感
- WebRTC を活用すると「超低遅延・ブラウザベース」の仕組みが実現できる
- リアルタイムを作るって楽しそう