Webrtc + Firebase を用いた通話webアプリ開発 森山雄太
Webrtc + Firebase を用いた通話webアプリ開発
森山雄太
概要
• Webrtcのコアのエンジニアの観点ではな
く、frontend engineerの観点で「webrtcを
利用」してAngularとFirebaseに組み合わせ
てどう実装したかという話し
Webrtc x Frontend engineerの現状
• Webrtc業界の勉強会では、通信プロトコルの専
門家が集まり、サービスレイヤを実装するフロ
ントエンドのエンジニアが利用している人はほ
とんどいない
• Webrtcはサービスに大きい変化させる可能性が
あるので取り入れましょう
Webrtcでの通信タイプ
Peer To Peer SFU MCU
全ユーザがそれぞれ通信 中央サーバのみと各ユーザが通信
中央サーバでデータを合成する
通信量、端末負荷ともに高くなる。
サーバコストがほとんどない サーバコストが少ないサーバコストが高い
クライアント負荷が少ない
通信量、端末負荷が少し少なくなる。
Front End Engineerが実装する箇所
• ユーザを認識するIDの制御
• マイクやweb cameraのオンオフ
• 取得した音声の再生
• 取得した動画の表示
Webrtcを利用して思い通りに画面設計をする
実現したいこと
Hangout やskypeなどでは入室順序にあわせて、動画を並べるのみ
自分のサービスにあった、サービスの用途にあわせて、UIをカスタマイズしたビデオ通話を利用したゲームを作りたい
Webrtcとfirebaseを連携した画面描画
Firebaseにおいて、ユーザのアクションやゲームの状況をルーム内にいる人と同期
Webrtcで各ユーザのビデオや音声を共有
PeerIDPeerIDPeerID
PeerIDfirebaseID firebaseID
firebaseID
firebaseID
Firebase realtime dbの特徴
ユーザがDBの一部を変更し、それを即座に他のユーザがsubscribeすることができる。
af_db: AngularFireDatabase
Af_db.object(‘/path’).subscribe((data)=>{const data = data.val()
})
Webrtcにおけるユーザの表示
入室および、音声&動画送信の処理
getUserMedia({video:true, audio:true}).then((video_stream)=>{})
own_peer = new Peer();own_peer.joinRoom(video_stream)
入室検地およびユーザの表示
room.on(‘stream’,(stream)=>{const peerid = stream.peerIdconst streamURL = URL.createObjectURL(stream)
})
video_el = document.createElement(“video”);video_el.src = streamURL ;video_el.autoplay = true
メディア情報取得
メディア情報をroomに共有
入室してきたユーザのidとstreamを取得
Video要素に、streamを設定して再生
Webrtcとfirebaseの連携
Facebookと連携しログインユーザID、サムネイル、指名等を取得
FirebaseにおけるユーザIDをWebrtcにおけるPeerIDと共通化することにより動画や音声が誰からきているものかを認識できる。
user_id = auth.uid
new Peer(user_id)
Webrtcでは各ユーザをPeerIDで認識
特定の位置へのユーザ表示
webrtc.service
data = new Subject()
data.next({peerA: streamApeerB:stramBpeerc:stramC
}}
Usershow.component
@Input() user_id
webrtc.data.subscribe((data)=>{stream_src = data[user_id];video_el = createElement(“video”)video_el.src = stream_src ;
})
Layout
<users [user_id]=“aa”><user [user_id]=“bb”>
<user [user_id]=“cc”><user [user_id]=“dd”>
gov
opp
webRTCのPeerIDと、firebaseのuseridを連動させることにより、webRTCのビデオの位置や表示を汎用的に変更できるようになった。