JavaScript
HTML5
WebRTC

WebRTCでビデオチャット

More than 1 year has passed since last update.

テーマ

WebRTC

取り組んだ理由

知り合いに勧められたから


WebRTCとは

WebRTC (Web Real-Time Communication)とはWorld Wide Web Consortium (W3C)が提唱するリアルタイムコミュニケーション用のAPIの定義で、プラグイン無しでウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有ができる。
wikipediaより


WebRTCのおかげで非常に簡単にビデオチャットなどを実現できる

P2P通信であり、ブラウザ同士がデータのやり取りをする
ただその通信を確立するための、シグナリングサーバは必要


実践

偉大な先人を多数確認
パクる全面的に参考にする方針に決定

WebRTC入門2016


結果

ブラウザからwebカメラにアクセスするのは非常に簡単
WebRTCでのデータやり取りも非常に簡単

シグナリングサーバは少し難しい・・・頑張りどころだ!


もう少し調査

あっ・・・
【PeerJS】HTMLファイルだけでリアルタイムなビデオチャットを作る | KRAY ...
パクる全面的に参考にする方針続行


結局シグナリングサーバはどうしたか

Sky Wayというサービスを利用

ドキュメントもわかりやすいし、無料だし、いい時代です。


成果

ビデオチャット

スクリーンショット 2016-08-19 12.49.32.png


使い方

  1. 通話相手のIDを聞くor自身のIDを教える
  2. IDを入力し、コールボタンを押すorコールされるのを待つ

動作確認ブラウザ

Chrome, Firefox


まとめ

WebRTCは非常に簡単
とりあえず実装するだけなら、通信の知識もさほど必要ではない

先人達は偉大


副産物

WEBカメラからの映像を扱うのがとても簡単で驚いた勢いで作りました

万華鏡
※個人差はありますが、衝撃的な映像が流れることがあります


参考URLに詳しく記載されているので、このページでコードには触れていません
わかりやすく非常にありがたかったですm(__)m

一応こちらからソースコード確認できます