【HTML5】WebRTC ～ 入門編 ～

HTML

■ 用語整理

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

参考文献

https://codezine.jp/article/detail/8099
https://html5experts.jp/mganeko/19728/

関連記事

【HTML5】Web Notifications API ～ 入門編 ～

https://blogs.yahoo.co.jp/dk521123/37244153.html