はじめに

本稿は、「PeerJSを使ったリアルタイムビデオ通話のデモを実装してみた話(1)」の続きです。
もし、まだこちらの記事をお読みでない方は、ご一読いただいてから本稿をお読みいただけると、
よりWebRTC(Web Real-Time Communication)¹に対する理解が深まるのではないかと思います。

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

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

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

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

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

WebRTCは、よくP2P(Peer-to-Peer)通信と言われますが、通信開始時は、
お互いシグナリングサーバーへアクセスし、接続に必要な情報をやり取りします。
(WebRTCとは？より抜粋)

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

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

PeerServerCloudServiceを使用する手順(概要)

PeerJS公式サイトよりアカウント登録を行い、APIキーを発行する。
発行されたAPIキーをソースコードに組み込む。

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

1.PeerJS公式サイトよりアカウント登録を行い、APIキーを発行する。

PeerJS公式サイトにアクセスし、右上の「PeerServer Cloud」ボタンをクリックします。

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

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

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

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

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

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

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

※間違い
<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より抜粋

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

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

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

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

※発信側も同様にPeerオブジェクトを生成する必要がある。(コネクションを生成するため！)

Peerオブジェクトは、1.Peerコネクションの生成、2.メッセージの受信を行うために
利用します。Skyway - GETTING STARTEDより抜粋

3.`2.`で生成したPeerオブジェクトのIDを指定して、Peerオブジェクトに接続をする。(発信側)

Data Connection
相手のPeerID(今回は受信側)を指定してpeer.connectを実行すると、
Data connectionを開始します。

ex.

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

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

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

ex.

// 接続イベントの受信
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を使用。)

2. 送信側のhtmlファイルをブラウザで開く。

3. 受信側の表示が変化していることが確認できれば、今回の検証は成功です。

次回予告

最後まで、お読みいただき、ありがとうございました。
次回は、これらの基礎技術を元に、カメラ映像をリアルタイムストリーミングしたいと思います。(応用編)

脚注

ブラウザ上でリアルタイムコミュニケーションを実現するための規格。WebRTCは、HTML5で新しく策定された規格で、APIレベルでの標準化はW3C、プロトコルレベルでの標準化はIETFで進められています。WebRTCが実装されたブラウザであれば、Adobe Flash Playerなどのプラグインなしに、ブラウザ間でカメラ映像や音声の共有、データの双方向通信などが可能です。 ↩
PeerJSとは？WebRTCを活用したアプリケーションを開発できるようにするためのJavaScriptライブラリ。PeerServerCloudServiceというWebRTCを実現するための仲介サーバー(WebRTCサーバー)機能の提供も行われています。 ↩

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