こんにちは、じょえずです。
さぁ今回はいよいよビデオチャットを実際に作っていきます。
これまでのおさらいは、カテゴリ:技術情報 > WebRTCを参照ください。
事前の確認事項
Web画面を作るにあたって、ある程度のスキルレベルを前提として進めていきます。以前の記事「WebRTCでビデオチャットを作る カメラの操作」での「事前の確認事項」と同様ですのでそちらをご確認ください。
その上で今回のビデオチャットですが、ネットワーク越しに相手先のデバイスを操作するので、原則SSL/TLS通信(https)でしか動作しません。
ただし、かろうじてchromeを使ってURLをlocalhostにすれば、httpでもまだ動作するようです。
ですので、相手を呼び出す操作をするブラウザはchromeのlocalhostでやってみてください。呼び出される方(接続される方)のブラウザはchrome以外でlocalhostでなくても大丈夫のようです。
必然的に呼び出される方(接続される方)はlocalhostの同一ネットワーク内ということになりますね。まぁサンプルの動作確認ですのでローカル環境で試してみてください。
サンプルソース
まずはhtml部分です。下記がサンプルです。
<html> <head> <meta charset="UTF-8" /> <title>video chat!</title> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/peer.min.js"></script> <script type="text/javascript" src="./js/sample02.js"></script> </head> <body> <body> <div> <div align="center"> <p>あなたのID : <input type="text" id="others-peer-id" placeholder="相手のIDを入力" /><button id="call">相手をコール</button> </div> <div align="center"> <!-- Video area --> <video id="others-video" autoplay></video> <br> <video id="my-video" width="480px" height="360px" autoplay muted></video> </div> </div> </body> </html>
とてもシンプルです。まず大事なpeer.jsを参照しています。前回「WebRTCでビデオチャットを作る PeerJSの利用」でも書いた通りcdnサーバの参照でも構いません。
あとは自分と相手のビデオを流すvideoタグ2つと、自分のIDの表示と相手のIDを入力するボックス、それと「相手をコール」というボタン。
ここでいうIDは互いを認識する情報のことで、WebRTCではSDPとかICEとかといった文字列情報なのですが、PeerJSでそれらをぎゅっとまとめてPeerIDという文字列に凝縮しています。
ビデオチャットのロジック部分はsample02.jsとして参照しています。内容は以下の通りです。
//カメラ/マイクにアクセスするためのメソッドを取得 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; //自分のカメラ・マイクのstreamオブジェクト退避用変数 var myStream; // Peerオブジェクト生成(シグナリングサーバへ接続) var peer = new Peer({key: '***************', debug: 3}); //自分のカメラ・マイクのstreamオブジェクト取得成功時に呼び出す関数 //streamオブジェクトは自分のカメラ・マイク var setMyStream = function(stream){ //相手からの呼び出しやこちらからのコールに使うため自分のstreamオブジェクトを変数に保存 myStream = stream; //streamオブジェクトをULRに変換してvideo要素のsrc属性にセット //自分のカメラ映像を表示 $('#my-video').prop('src', URL.createObjectURL(stream)); }; //相手のカメラ・マイクのstreamオブジェクトが渡ってきた時に呼び出される //streamオブジェクトは相手のカメラ・マイク var setOthersStream = function(stream){ //streamオブジェクトをULRに変換してvideo要素のsrc属性にセット //自分のカメラ映像を表示 $('#others-video').prop('src', URL.createObjectURL(stream)); }; //シグナリングサーバへ接続した時に発生するイベント) peer.on('open', function(id){ //自分のPeer IDをテキストボックスへ表示する $('#peer-id').text(id); }); //相手からcallされた時に発生するcallイベント //相手からcallオブジェクトが渡される peer.on('call', function(call){ //受取ったcallオブジェクトのanswerメソッドで自分のstreamオブジェクトを返す call.answer(myStream); //相手のストリームが渡された時発生するstreamイベント call.on('stream', setOthersStream); }); //DOM要素構築後に呼び出される $(function(){ //カメラ・マイクのstreamオブジェクトを取得 //取得成功時に第二引数の関数が呼ばれる navigator.getUserMedia({audio: true, video: true}, setMyStream, function(){}); //「相手をコール」ボタンクリック時の動作 $('#call').on('click', function(){ //テキストボックスに入力された相手のIDを指定し、 //自分のカメラのstreamオブジェクトをセットし、callイベントで相手を呼び出す var call = peer.call($('#others-peer-id').val(), myStream); //(相手がanswerで渡してきた)ストリームが渡ってきた時発生するstreamイベント call.on('stream', setOthersStream); }); }); //peerオブジェクトがエラー時に発生するerrorイベント peer.on('error', function(e){ console.log(e.message); });
以前の記事「WebRTCでビデオチャットを作る カメラの操作」でのsample01.jsと同様に「getUserMedia」を使っていますが、今回は画面表示時点でカメラを開始しています。
冒頭ではPeerJSのAPIキーを設定してPeerJSそのもののクラスのインスタンスを作成しています(”***************”の部分にAPIキーを指定します)。これでPeerServer(シグナリングサーバ)に接続します。
それと「自分(ローカル)のstreamオブジェクトをURLに変換してvideoタグのsrc属性にセットする関数」と、「相手(リモート)のstreamオブジェクトを変換してする関数」の二つがあります。
また、シグナリングサーバに接続するとopenイベントが発生するのでその時の処理としてPeerServerが振り出すID(PeerID)を表示します。この表示されたIDは自分のIDです。
そして「相手から呼び出された時の関数」と、「相手をコール」ボタンを押したときの「相手を呼び出す処理」
つまり、
- 画面が表示された時に自分のIDが表示されるので、
- そのIDを何らかの手段で相手に伝えて、
- 伝えられた方はそのIDを画面に入力して「相手をコール」ボタンを押す、
- するとビデオチャットが始まる、
デモ
それではやってみましょう。
最初に画面を表示するとビデオ・カメラの共有許可を聞かれて自分のカメラ映像が流れます。自分のIDを相手に伝えるか、相手のIDを教えてもらって、テキストボックスに入力し、「相手をコール」ボタンを押します。するとビデオチャットが始まります。まとめ
さぁどうでしたか、以外と簡単にビデオチャットができましたね。互いのIDを伝え合い、それを入力して接続する。なんか少しだけappear.inを彷彿としていませんか。
ただ、今回のサンプルは1対1のビデオチャットしかできません。複数人数が同時に接続する為には、相互のpeer-to-peerがそれこそ総当たりのように開通する必要があります。
その為にはもうちょっと複雑なロジックを作りこみ、シグナリングサーバ側の機能も工夫しないとなりません。実はそれを実現する概念としてルーム(部屋)という仕組みがオープンソースで提供されています。
これこそまさにappear.inですね。
複数人数の同時接続ですが、ちょこちょこっと簡単にはできないので、今回は取り組みませんが、それとは別にWebRTC単独で他にも便利な機能がありますので、次回はもう少しだけその辺を紹介します。それでは!