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のビデオの位置や表示を汎用的に変更できるようになった。