201609090

こんにちは、じょえずです。

さぁ今回はいよいよビデオチャットを実際に作っていきます。

これまでのおさらいは、カテゴリ:技術情報 > 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を画面に入力して「相手をコール」ボタンを押す、
      するとビデオチャットが始まる、
という使い方となります。

デモ

それではやってみましょう。

最初に画面を表示するとビデオ・カメラの共有許可を聞かれて自分のカメラ映像が流れます。
2016090901
自分のIDを相手に伝えるか、相手のIDを教えてもらって、テキストボックスに入力し、「相手をコール」ボタンを押します。
2016090903
するとビデオチャットが始まります。

まとめ

さぁどうでしたか、以外と簡単にビデオチャットができましたね。互いのIDを伝え合い、それを入力して接続する。なんか少しだけappear.inを彷彿としていませんか。

ただ、今回のサンプルは1対1のビデオチャットしかできません。複数人数が同時に接続する為には、相互のpeer-to-peerがそれこそ総当たりのように開通する必要があります。

その為にはもうちょっと複雑なロジックを作りこみ、シグナリングサーバ側の機能も工夫しないとなりません。実はそれを実現する概念としてルーム(部屋)という仕組みがオープンソースで提供されています。

これこそまさにappear.inですね。

複数人数の同時接続ですが、ちょこちょこっと簡単にはできないので、今回は取り組みませんが、それとは別にWebRTC単独で他にも便利な機能がありますので、次回はもう少しだけその辺を紹介します。それでは!