【 PeerJS 】リアルタイムビデオ通話のデモ実装編(2) - PeerJS疎通確認

#はじめに
本稿は、[「PeerJSを使ったリアルタイムビデオ通話のデモを実装してみた話(1)」](http://qiita.com/Futo23/items/3f7a750e3b06cd2dfe6b)の続きです。
もし、まだ[こちらの記事](http://qiita.com/Futo23/items/3f7a750e3b06cd2dfe6b)をお読みでない方は、ご一読いただいてから本稿をお読みいただけると、
より__WebRTC(Web Real-Time Communication)[^1]__に対する理解が深まるのではないかと思います。

>_基本的に、執筆者である私がWebRTCについて初心者なので、
本稿の技術レベルも、<font color="red">WebRTC初心者向け</font>であると考えていただいて構いません。_

__本記事__では、__2.__  について、ご説明させていただこうと思います。

<font color="gray">1. 端末自体のカメラ映像を取得する機能</font>
__2. <font color="red">PeerJSサーバーを用いて、コネクションをはる機能(疎通確認)</font>__
<font color="gray">3. 2.で確立したコネクションを元に、動画をストリーミング配信する機能</font>

それでは、さっそく本題へ。

#WebRTCの通信フロー(おさらい)

>![WebRTC仕組み.png](https://qiita-image-store.s3.amazonaws.com/0/180432/60888f5c-00a2-43fc-732f-351f08e6dbd9.png)


>WebRTCは、よくP2P(Peer-to-Peer)通信と言われますが、通信開始時は、
お互い__シグナリングサーバー__へアクセスし、接続に必要な情報をやり取りします。
[(WebRTCとは？より抜粋)](![WebRTC仕組み.png](https://qiita-image-store.s3.amazonaws.com/0/180432/4cd64e69-11ae-cc50-a440-d7a04109733a.png)
http://qiita.com/Futo23/items/1afef27ae78170de6f02)


この__P2P通信に必要な事前情報(IPアドレス、UDPポート番号)のやり取りを仲介するサーバー__を、
一から構築するのは難易度が高いので、今回は__[PeerJS (PeerServerCloudService)](http://peerjs.com/peerserver)__[^2]を使用したいと思います。

さっそく、__PeerServerCloudService__を活用して、データの授受を行ってみましょう！

#PeerServerCloudServiceを使用する手順(概要)
1. __[PeerJS公式サイト](http://peerjs.com/)__よりアカウント登録を行い、__<font color="red">APIキーを発行</font>__する。
2. 発行された__<font color="red">APIキーをソースコードに組み込む。</font>__

ざくっと、手順はこの2つです。とても簡単ですね！

##1.PeerJS公式サイトよりアカウント登録を行い、APIキーを発行する。
[PeerJS公式サイト](http://peerjs.com/)にアクセスし、右上の「PeerServer Cloud」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/180432/55a50599-06b9-f527-838a-15408e8b20f0.png)

ページ遷移後、「Developer - Free」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/180432/bcb2e6bd-4f8d-2c3e-cb7a-8f79dadd117b.png)

すると、アカウント登録画面が表示されるので、指示に従ってアカウント登録を実施してください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/180432/afc40ce7-2a62-047a-5d0e-88e2d6b8e84a.png)

登録が完了すると、APIキーが発行されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/180432/eac7c64f-7971-b0b1-5fd1-e269677a747e.png)

以上で、PeerSeverCloudServiceのAPIキー発行処理が完了しました。

続いて、発行したAPIキーを使用して簡単なWebRTC通信を実装してみましょう。

##2.発行されたAPIキーをソースコードに組み込む。

###1.PeerJSのクライアントライブラリを読み込み(インクルード)ます。

<font color='red'>__※間違い__</font>
```<script src="http://cdn.peer.js.com/0.3/peer.min.js"></script>```

>上記ソースは、PeerJS公式サイトに記載のあるものだが、
どうやら [http://cdn.peer.js.com/0.3/peer.min.js] は存在しないようである。
[GETTING STARTEDより抜粋](http://peerjs.com/docs/#start)

__正しいURL__
```<script src="http://cdn.peerjs.com/0.3/peer.js"></script>```
※単純にURLが間違っているみたいなので、ひとまず上記で対応。



>__CDNとは？__
<font color="gray">Connect Delivery Network(コンテンツ配信ネットワーク)の略。インターネット上にキャッシュサーバーを分散配置し、エンドユーザーにもっとも近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを、オリジナルのWebサーバーに代わって配信する仕組みを意味する。</font>

###2.さきほど発行したAPIキーよりPeerオブジェクトを生成します。(受信側、発信側)

ex.
```const peer = new Peer('ReciverId',{key : 'we074c3o2tv2huxr'});``` (受信側)

※発信側も同様にPeerオブジェクトを生成する必要がある。<font color='red'>__(コネクションを生成するため！)__</font>
 
>Peerオブジェクトは、__1.Peerコネクションの生成__、__2.メッセージの受信__を行うために
利用します。[Skyway - GETTING STARTEDより抜粋](https://nttcom.github.io/skyway/docs/)

###3.```2.```で生成したPeerオブジェクトのIDを指定して、Peerオブジェクトに接続をする。(発信側)
>__Data Connection__
相手のPeerID(今回は受信側)を指定して```peer.connect```を実行すると、
Data connectionを開始します。

ex.

```js
// 接続開始
const conn = peer.connect('ReciverId')

conn.on('open',function(){
 // メッセージの送信
 conn.send({
   string : 'Hello World!',
   number : 1
 });
});
```

###4.受信したメッセージを表示する。(受信側)

ex.

```js
// 接続イベントの受信
peer.on('connection', function(conn) {
   conn.on('data',function(data) {
     // 受け取ったデータをコンソールログ出力
     console.log(data['string']);
   });
});
```


#いざ、実践



```reciver.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>reciver</title>
    <script src="http://cdn.peerjs.com/0.3/peer.js"></script>
</head>
<body>
<h1>受信側</h1>
<p id='reciver_messege'>こんにちは！(メッセージ受信前)</p>
</body>
    <script type="text/javascript">

      let reciverMessage = document.getElementById('reciver_messege');

      const peer = new Peer('ReciverId',{key : 'we074c3o2tv2huxr'});
      peer.on('connection', function(conn) {
       conn.on('data',function(data) {
           // 受け取ったデータをコンソールログ出力
           // 映像と、テキストを別で送信することが可能。
           console.log(data['string']);
           reciverMessage.innerText = data['string'];
       });
     });
    </script>
</html>
```

```sender.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>sender</title>
    <script src="http://cdn.peerjs.com/0.3/peer.js"></script>
</head>
<body>
<h1>送信側</h1>
</body>
    <script type="text/javascript">
      const peer = new Peer('SenderID', { key : 'we074c3o2tv2huxr'});
      const conn = peer.connect('ReciverId');

      conn.on('open',function(){
        conn.send({
          string : 'Hello World!(メッセージ受信後)',
          number : 1
        });
     });
    </script>
</html>
```

#検証手順
####1. 受信側のhtmlファイルをブラウザで開く。(今回は、Google Chromeを使用。)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180432/383561bd-af57-a2f4-d7f6-ca593f1f8af7.png)

####2. 送信側のhtmlファイルをブラウザで開く。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180432/2a6925c6-4d55-9ccf-f338-4cb189586c5a.png)

####3. 受信側の表示が変化していることが確認できれば、今回の検証は成功です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180432/2f1fb480-5ef2-43d1-9d16-a0bd61b4bef3.png)


#次回予告
最後まで、お読みいただき、ありがとうございました。
次回は、これらの基礎技術を元に、カメラ映像をリアルタイムストリーミングしたいと思います。[(応用編)](http://qiita.com/Futo23/items/c26167d48367f92fe1f3#_reference-4689df6b60c531fc0c0e)


#脚注

[^1]: ブラウザ上でリアルタイムコミュニケーションを実現するための規格。WebRTCは、HTML5で新しく策定された規格で、APIレベルでの標準化はW3C、プロトコルレベルでの標準化はIETFで進められています。WebRTCが実装されたブラウザであれば、Adobe Flash Playerなどのプラグインなしに、ブラウザ間でカメラ映像や音声の共有、データの双方向通信などが可能です。

[^2]: __PeerJSとは？__WebRTCを活用したアプリケーションを開発できるようにするためのJavaScriptライブラリ。__[PeerServerCloudService](http://peerjs.com/peerserver)__という__WebRTCを実現するための仲介サーバー(WebRTCサーバー)機能の提供__も行われています。