WebRTC

Web RTC

https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API


WebRTC（Web Real-Time Communication）とはW3Cが提唱するリアルタイムコミュニケーション用のAPIで、ウェブブラウザ間でのチャットやファイル共有が実現できる技術です。

メディアへのアクセス(UserMedia)やPeer-to-Peer通信(RTCPeerConnection)などが可能ですが、ここでは、Webカメラを起動して、閲覧中のブラウザへ表示するサンプルを紹介します。

ご注意　DEMOの起動の前に必ずお読み下さい。

• この事例では、あなたのPCのWebカメラを起動します（カメラが必要です）
• ChromeまたはFirefoxでご覧下さい。
• ブラウザが、カメラを起動許可を求めてきますので、「許可」して下さい。
• カメラの映像を他へ転送するような通信操作はしていません。カメラの映像はあなたのブラウザにしか表示されませんので、ご安心下さい。

事例1

• DEMO：https://koichi-inoue.github.io/WebRTC/
• CODE：https://github.com/koichi-inoue/WebRTC
  
  

• HTML
  • <video>タグを書いて、映像の「置き場」を準備しています。
  • IDを"webcam"として、このIDを使って、JavaScriptで制御しています。
  • サイズは適当に変えて下さい。
    
    

• CSS
  • スタイルシートは無くてもいいレベルです。
    
    

• JavaScript
  • まず、ページの読み込みと同時に、UserMedia取得のAPI（ブラウザごとに表記が異なる）の表記をnavigator.getUserMediaに統一しています。
  • navigator.getUserMedia( {video: true, audio: false}, success, error);で、
    「カメラはON、マイクはOFF」として、Webカメラをアクティブにしています。
  • success()は、カメラ映像の取得に成功した場合の処理が記述された関数で、カメラからのストリームデータを <video>（ID:#webcam） のソースとして位置づけています。
• error()は、失敗したときの処理で、コンソール（ブラウザの画面では見えません）にログを書き出しているだけです。

事例2

• DEMO：https://koichi-inoue.github.io/WebRTC2/
• CODE：https://github.com/koichi-inoue/WebRTC2
  
  

• HTML
  • 事例１では、カメラのソースを<video>のソースに位置づけて直接表示していましたが、ここでは画像に操作を加えることを前提に、<video>を非表示として、その内容を<canvas>に描画する…という操作をしています。
  • <canvas>は常に描画を続けないと動かないので、setInterval()関数を使って、秒間30回 <video>からの転写を繰り返しています。
  • <canvas>のデバイスコンテキスト（ここではDCという変数で表記）を使うことで、ミラー反転なども簡単にできます。
    
    

• CSS
  • スタイルシートは無くてもいいレベルです。
    
    
• JavaScript
  • ボタンを３つ置いて、それぞれのイベントリスナーとして Start()、Stop()、Mirror() の３つの関数を割りあてています。
  • 複数の関数間で共有する変数があるので、それらは外部変数として、プログラムの冒頭に記載しています。