ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
概要
WebRTC (Web Real-Time Communication) は、ブラウザやアプリ同士が、間にサーバを挟まず直接 (P2P: ピアツーピア) 音声・映像・任意のデータをリアルタイムにやり取りするための技術です。プラグイン無しでブラウザ標準 API として使え、ビデオ会議や音声通話、画面共有などを Web 上で実現します。低遅延が命のメディア通信のため、配送には信頼性より速度を優先できる UDP を土台に使う点が特徴です。親セクションは Web通信プロトコル です。
仕組み
WebRTC の難しさの大半は「インターネット上の 2 台を、互いにプライベート IP (NAT の内側) のまま直接つなぐ」ことにあります。これを解決するために複数の要素が連携します。
- シグナリング: まず接続したい相手を見つけ、自分の接続情報 (SDP: 対応コーデックやネットワーク候補) を交換します。この「出会いの仲介」は WebRTC の規格外で、開発者が WebSocket などで自前実装します。
- STUN: 自分が NAT 越しにどのグローバル IP・ポートで見えているか (外から見た自分の住所) を教えてくれるサーバ。
- TURN: 直接 P2P が張れない厳しい NAT の場合に、通信を中継してくれるサーバ。最後の手段。
- ICE: STUN/TURN で集めた複数の接続候補を試し、実際につながる最良の経路を選び出す枠組み。
接続が確立したら、音声・映像は SRTP (暗号化された RTP) で、任意データは データチャネル で送られます。鍵交換と暗号化には DTLS が使われ、通信は常に暗号化されます。
実用例
ブラウザの WebRTC API は、カメラ/マイク取得・接続オブジェクト生成・SDP 交換という流れで使います。下記はカメラ映像を取得し、ピア接続を作る最小例です (シグナリングは WebSocket 経由を想定)。
// カメラ・マイクを取得
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
});
// ピア接続を作成 (STUN サーバを指定)
const pc = new RTCPeerConnection({
iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
});
// 自分の映像を相手へ送るトラックとして追加
stream.getTracks().forEach((track) => pc.addTrack(track, stream));
// ICE 候補が見つかるたびシグナリング経由で相手へ送る
pc.onicecandidate = (e) => {
if (e.candidate) signaling.send({ ice: e.candidate });
};
// 発信側: オファー (SDP) を作って相手へ送る
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
signaling.send({ sdp: offer });
受信側は受け取ったオファーを setRemoteDescription し、アンサーを返します。両者が SDP と ICE 候補を交換し終えると、メディアが直接流れ始めます。
主な用途
- ビデオ会議・オンライン通話: ブラウザだけで多人数の音声・映像通信を行う。
- 画面共有・リモートサポート: デスクトップ映像を低遅延で相手に届ける。
- P2P ファイル転送: データチャネルでサーバを介さずファイルを直接送る。
- クラウドゲーム・ライブ配信: 超低遅延が要る映像配信の伝送路として使う。
他のリアルタイム手段との比較
| 技術 | 経路 | 土台 | 得意なデータ | 遅延 |
|---|---|---|---|---|
| WebRTC | P2P (必要時のみ中継) | UDP (SRTP/DTLS) | 音声・映像・データ | 最小 |
| WebSocket | クライアント↔サーバ | TCP | テキスト・小さなデータ | 小 |
| HTTP/2 ストリーム | クライアント↔サーバ | TCP | 要求-応答 | 中 |
注意点
- シグナリングは自前: WebRTC 自体は接続確立後の通信を担うだけで、相手探しと SDP/ICE 交換のサーバは別途用意する必要がある。
- TURN のコスト: 厳しい NAT 環境では P2P が張れず TURN 中継になり、サーバの帯域コストがかかる。完全な P2P を常に期待しない。
- 多人数で破綻しやすい: 純粋な P2P メッシュは参加者が増えると接続数・帯域が急増する。大規模会議は SFU/MCU といったメディアサーバを併用する。
- IP アドレスの露出: P2P の性質上、相手にグローバル IP が知られうる。プライバシー要件によっては TURN 経由を強制する設計にする。
- ブラウザ差・端末差: コーデックや実装の差で相互接続に注意が要る。対応コーデックのネゴシエーションを確認する。
関連リンク
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
- HTTP/2
- HTTP/3(QUIC)
- WebSocket
- gRPC
- WebRTC
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript で base URL を取得する方法|window.location.origin
- 4 YouTube Data API v3 エラー一覧|403・400・404 の原因と対処
- 5 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 6 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 7 Spring Frameworkのアノテーション一覧
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- 【django】ログイン 認証機能 2026-09-08 03:22:09
- MySQL ERROR 1063 Incorrect column specifier for column|原因と直し方 2026-09-08 03:11:09
- 【PHPエラー】Object of class stdClass could not be converted to string 2026-09-07 07:46:04
- Julia Genie ローカル開発サーバ起動完全ガイド 2026-09-07 07:46:04
- Wi-Fi とは|規格と世代(Wi-Fi 4〜7)・周波数帯・CSMA/CA・WPA3 NEW 2026-09-07 07:45:13
- set コマンドでシェルオプションと位置パラメータを操作 | bash 2026-09-07 07:45:13
- JPEG(.jpg/.jpeg)画像形式の完全ガイド — 仕様・マジックナンバー・他形式との比較・EXIF 2026-09-07 07:45:13
- UE5 Get Overlapping Actorsで特定クラスだけ処理|Class Filter・Cast To 2026-09-07 07:45:13
- Linuxで特定拡張子のファイルを再帰削除|find -deleteの安全手順 2026-09-07 07:45:13
- Django CBVでテンプレートに値を渡す|get_context_data・extra_context 2026-09-07 07:45:13
- Linuxで複数ファイルの文字列を一括置換|find・sed・xargsの安全手順 2026-09-07 07:45:13
- Laravelルートグループ|prefix・middleware・nameで一括管理 2026-09-07 07:45:13
- Linux whichコマンドの使い方|絶対パス取得とtype・command -vの違い 2026-09-07 07:45:13
- Linux catコマンドの使い方|行番号表示・複数ファイル連結 2026-09-07 07:45:13
- unable to execute 'gcc': No such file or directory 2026-09-07 07:45:13
コメントを削除してもよろしいでしょうか?