■ 用語整理
WebRTC (Web Real-Time Communication)
* Webブラウザ上で、音声/映像などのデジタルデータをリアルタイムにやり取りするための規格 * W3CとIETFという二つの団体で標準化 * P2Pでブラウザ間通信利用例
* ブラウザ間の以下の機能が実装可能 + ボイスチャット + ビデオチャット + ファイル共有
P2P (Peer to Peer)
* PC同士が直接通信すること
NAT (Network Address Translation)
* プライベートIPアドレスをグローバルIPアドレスに変換するプロトコル詳細は以下の関連記事を参照のこと。
https://blogs.yahoo.co.jp/dk521123/36384737.html
ICE (Interactive Connectivity Establishment)
* NATを越えて通信経路を確立するための技術https://codezine.jp/article/detail/8016?p=2
■ 関連するサーバ
シグナリングサーバ
https://codezine.jp/article/detail/8016が分かりやすい
* P2Pでブラウザ間通信を行うために、互いのIPアドレスや利用するUDPポート番号などを 教え合う「呼制御 / シグナリング(signaling)」が必要で、そのためのサーバを用意する必要がある
ICEサーバ（STUN/TURNサーバ）
https://qiita.com/okyk/items/a405f827e23cb9ef3bdeや
https://codezine.jp/article/detail/8016?p=2
が分かりやすい
* STUNサーバ及びTURNサーバで、外部ネットワークとの通信（NAT traversal/NAT通過）を実現するSTUN (Session Traversal Utilities for NATs)サーバ
* 外部ネットワークから見た自分のIPアドレスを返してくれるサーバTURN (Traversal Using Relay around NAT)サーバ
* P2P通信したいPCの間に立ってデータを中継してくれるサーバ
補足：WebRTCのオープンソースについて
* 以下のサイト「WebRTCのオープンソースソフトウェアまとめ」が今後、参考になりそう。https://qiita.com/atskimura/items/97b2cc04e19781f4a4e6
■ 対応ブラウザ
https://caniuse.com/#feat=rtcpeerconnection* Firefox * Edge * Chrome
ブラウザごとの動作差異
ここで何気にはまった* Firefox : https://, http://, file:// で利用可能 << ローカルでも気軽に動作確認できる * Edge : https://, http://, file:// で利用可能 << ローカルでも気軽に動作確認できる * Chrome : 原則 https://のみ。例外として http://localhost/ で利用可能(http://【別ホスト】/では不可)
■ サンプル
Hello World的に、ビデオ<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Camera Demo</title> </head> <body> <button onclick="startVideo()">ビデオ開始</button><br /> <div>ボタン押下して許可すれば、↓ここにビデオの動画が映る</div> <video id="my_video" autoplay></video> </body> <script type="text/javascript"> let localVideo = document.getElementById('my_video'); function startVideo() { navigator.mediaDevices.getUserMedia({video: true, audio: false}) .then(function (stream) { localVideo.src = window.URL.createObjectURL(stream); }).catch(function (error) { console.error('error:', error); return; }); } </script> </html>
補足：Chrome での確認
* 上述の「ブラウザごとの動作差異」の通り、 Chrome ではWebサーバ経由でないと確認できないので、 「Web Server for Chrome」（以下のサイト参照）などのを 利用してWebサーバ経由で確認できる => 「Web Server for Chrome」インストール以降は「chrome://apps」で起動できるWeb Server for Chrome
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ja
