【PeerJS】HTMLファイルだけでリアルタイムなビデオチャットを作る
こんにちは。 クレイの浅海です。 皆さんはブラウザを使用するビデオチャットサービスを利用しているでしょうか。 弊社では毎朝ビデオチャットを使用して「朝会」というものをプロジェクト毎に行っています。 そのため、ビデオチャットサービスは無くてはならない存在です。 ビデオチャットサービスに関する情報には敏感なのですが、先日、下の記事が目につきました。 【プラグイン不要】 ブラウザだけでビデオチャットができるサービスまとめ これを見て「こんなにたくさんビデオチャットサービスが出ていたのかー」と思うと同時に、エンジニアとしてある一つの仮説が心の中に生まれました。 「あれ、もしかしてビデオチャットサービス作るのって簡単なんじゃね？」と。 作ってみた 結論を先に書きますと、多：多でのビデオチャットを作るのは簡単ではありませんでした。 １：１でのビデオチャットを作るのは簡単だったので、今回はその方法を書いていきます。 実際に作ってみたビデオチャットを下のリンクで試すことが出来ます。 必要最低限のビデオチャット機能しかありません。 このページを開くとまず、カメラとマイクへのアクセスを許可するかどうかをブラウザが尋ねてきます。 これらを許可すると、自分の映像が画面に表示されます。 「あなたのID」という部分があるかと思います。 この右側に表示されている文字列は、自分の電話番号のようなものです。 （「番号」ではないですが・・・） 電話をかける方法は、通話したい相手に何らかの手段で「あなたのID」を送り、相手側にあるテキストフォームに「あなたのID」を入力してもらいます。 そして相手が「コール」ボタンを押すことにより、ビデオチャットが開始します。 調査 にも【プラグイン不要】と書いてあるように、ブラウザにプラグインを入れなくてもビデオチャットができるサービスが登場しています。 ブラウザのプラグインが必要ないということは、HTML5でビデオやマイクを扱えるWebRTCのMedia Stream APIを使っていることが予想されます。 WebRTCは実装が面倒なので、簡単にWebRTCを扱えるプラグインがないかを調べてみると、PeerJS というライブラリが見つかったので、今回はこれを使いました。 PeerJS PeerJS WebRTCの実装が非常に面倒になる理由として、アイスサーバ、ブローカーサーバという２種類のサーバが必要になるという点が大きいです。 実装が面倒くさい部分である、P2Pのコネクションが確立するまでの色々な手続きだとか、通信状態に影響される繊細な処理だとかを勝手にやってくれます。 自分でサーバを用意しなくても、HTMLファイルを置く場所さえあれば、WebRTCを使ったWebアプリケーションを公開することが出来るようになるので、とても便利です。 WebRTCに関する話は、下の記事が大変参考になりました。 ありがとうございます。 WebRTCのオープンソースソフトウェアまとめ ブラウザの対応状況 各ブラウザのWebRTCへの対応状況は以下のようになっています。 まだWebRTC自体がWorking Draftのため、全てのブラウザでベンダプレフィックスが必要であり、最新のiPhoneでもまだ使えないようです。 作り方 冒頭で紹介したビデオチャットの作り方を、順を追って説明していきます。 Media Stream API まず、videoタグでカメラの映像とマイクの音声を再生します。 カメラとマイクを扱うAPIは非常に単純で、以下のソースだけで扱うことが出来ます。 getUserMedia navigator. webkitGetUserMedia navigator. prop 'src', URL. navigator. prop 'src', URL. getUserMediaの第２引数が、カメラなどへのアクセスに成功した時のコールバックです。 ここでvideoタグのsrcにビデオの情報をセットしています。 getUserMediaの第３引数はエラー時のコールバックです。 今回は使わないのですが、これを省略するとfirefoxでは動かないようなので、空の関数を渡しています。 PeerJSのAPI key取得 PeerJSが提供するWebRTCに関するサーバを使用するためには、PeerJSのサイトでアカウントを作成し、API keyを生成する必要があります。 上記URLを開き、下の図の赤枠で囲った「Developer — Free」という部分からアカウントを作成します。 アカウントを作成してログインすると、下のような画面が見れます。 「Create new API key」という赤いボタンを押すと、API keyを生成できます。 JavaScriptでpeer IDの取得 冒頭で「電話番号」と呼んでいた文字列を取得します。 なにはともあれ、peer. jsを読み込みます。 peer. jsを読み込むとPeerオブジェクトが使えるようになります。 peerのIDを知るために、Peerのopenイベントを使用します。 peer IDにコールする 次に、取得したpeer IDという電話番号に他の人がコール（電話をかける）できるようにします。 以下のようにコールする関数を作ります。 call peerId, myStream ; call. prop 'src', URL. callして相手の応答があった場合、streamイベントのコールバックで相手のstreamがかえってくるので、自分のstreamを表示したときと同じように、videoタグのsrcに設定します。 そのために、body内に通話相手を表示するvideoタグを追加しておきます。 ここで注意すべきことが１つあり、自分を表示するvideoタグにはmutedを指定しておかないと、 酷いハウリングが発生します。 受信側 コール出来るようになったので、そのコールを受ける側を実装します。 peer. answer myStream ; call. prop 'src', URL. 相手のビデオを表示する方法は、送信側でやった方法と同じで、相手のstreamをvideoタグにセットしているだけです。 UIを作っていないのでJavaScriptコンソールを使用することになりますが、これだけで１：１のビデオチャットができます。 トラブルシューティング 試してみて、なぜか動かない場合は、peerのerrorイベントを拾ってみるとなにかわかるかもしれません。 peer. log e. 完成品 ここまで作ってきたビデオチャットを使用するには「JavaScriptコンソールに表示されているpeer IDを相手に伝え、相手もJavaScriptコンソールでcallTo関数を呼ぶ」という使い方になってしまいます。 このままではJavaScriptコンソールのことを知っている技術者しか扱えないため、一般の人でも扱えるようにUIを作成したのが、冒頭で紹介したデモです。 是非実際に誰かと使ってみてください。 おわりに １：１のビデオチャットは簡単に作ることが出来ました。 ここまで作った後に、多：多のビデオチャットに対応しようとしましたが、映像が３つになった途端にCPUが１００％になってしまい使い物になりませんでした。 複数人で同期をとるのも面倒です。 多：多のビデオチャットとなると、各チャットサービスは色々と工夫しているようです。 この情報は役に立ちましたか？ 宣伝 DocBaseとは 小さく始める・みんなで育てる・適切に伝える・安心して伝えるをコンセプトにした情報共有サービスです。 メモという形で小さく始められる、エンジニア以外のメンバーでも使いやすい仕組み、情報をまとめて整理できる、柔軟な権限設定で様々なプロジェクトで使えるなど、積極的な情報共有と業務の効率化を実現し、チームの成長を促します。 詳しくはこちらから。
次の
