はじめに
本稿は、「PeerJSを使ったリアルタイムビデオ通話のデモを実装してみた話(1)」の続きです。
もし、まだこちらの記事をお読みでない方は、ご一読いただいてから本稿をお読みいただけると、
より__WebRTC(Web Real-Time Communication)1__に対する理解が深まるのではないかと思います。
基本的に、執筆者である私がWebRTCについて初心者なので、
本稿の技術レベルも、WebRTC初心者向けであると考えていただいて構いません。
__本記事__では、2. について、ご説明させていただこうと思います。
1. 端末自体のカメラ映像を取得する機能
2. PeerJSサーバーを用いて、コネクションをはる機能(疎通確認)
3. 2.で確立したコネクションを元に、動画をストリーミング配信する機能
それでは、さっそく本題へ。
WebRTCの通信フロー(おさらい)
WebRTCは、よくP2P(Peer-to-Peer)通信と言われますが、通信開始時は、
お互い__シグナリングサーバー__へアクセスし、接続に必要な情報をやり取りします。
[(WebRTCとは？より抜粋)](
http://qiita.com/Futo23/items/1afef27ae78170de6f02)
この__P2P通信に必要な事前情報(IPアドレス、UDPポート番号)のやり取りを仲介するサーバー__を、
一から構築するのは難易度が高いので、今回は__PeerJS (PeerServerCloudService)__2を使用したいと思います。
さっそく、__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']);
});
});
いざ、実践
<!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>
<!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サーバー)機能の提供__も行われています。 ↩