PeerJS docsSkyWay対応版

PeerJSは、WebRTCを利用したピア·ツー·ピアのデータ、ビデオ、オーディオ通信を簡単に実現することができます。このドキュメントでは、PeerJS APIの基本的な使い方を紹介します。PeerJSを用いた実装例をご覧になりたい方は, サンプル ページを御覧ください。

このドキュメントは、NTTコミュニケーションズが提供するクラウドサービス「SkyWay」にて利用できるようにカスタマイズしたPeerJSを対象としています。

セットアップ

1. PeerJSのクライアントライブラリをインクルード

PeerJSクライアントライブラリをあなたのアプリケーションにインクルードしてください。

<script src="https://skyway.io/dist/0.3/peer.js"></script>

PeerJSライブラリ(peer.js, peer.min.js)はあなたのサーバ上に設置することができます。 ソースコードはGithubからforkする事ができます。

2. Peerオブジェクトを作成

Peerオブジェクトは、Peerコネクションを生成、受信する為に利用します。

var peer = new Peer({key: 'APIKEY'});

Peerのコンストラクタに渡す'APIKEY'は、SkyWayのAPIキーです。APIキーの申し込みを行うことで無料で取得することができます。APIキー申込時には利用ドメインを申請していただきます。APIキーは申請したドメインからのみ利用可能です。

PeerJSのセッション情報交換やシグナリングに利用するサーバを、自身で構築することもできます。 詳しくはpeerjs-serverをご覧ください。

これで利用するための準備はすべて整いました!

使い方

Peerオブジェクトは生成時、ランダムなID(以下、PeerID)が付与されます。

peer.on('open', function(id) {
 console.log('My peer ID is: ' + id);
});

他のPeerと接続したい場合は、接続先のPeerIDが必要になります。 RestAPIを利用して接続先のPeerIDを入手するか、何らかの仕組みでPeerIDを交換してください。Peer constructorのオプションに任意のPeerIDを指定する事もできます。

その他のオプション、メソッド、イベント、エラー処理などの詳細は、Peer API リファレンスをお読みください。

Data connections

相手のPeerIDを指定してpeer.connectを実行するとData connectionを開始します。相手から接続要求はいつでもconnection イベントを利用して受け取ることができます。

var conn = peer.connect('dest-peer-id');

peer.on('connection', function(conn) { ... });

peer.connectとconnectionイベントのコールバックではDataConnectionオブジェクトを提供します。このオブジェクトを使用してデータの送受信を行うことができます。

conn.on('open', function() {
 // メッセージを受信
 conn.on('data', function(data) {
 console.log('Received', data);
 });
 // メッセージを送信
 conn.send('Hello!');
});

メソッドとイベントの詳細は、DataConnection API リファレンスをご覧ください。

Video/audio calls

相手のPeerIDを指定してpeer.callを実行することで、その相手を呼び出すことができます。相手があなたを呼び出した場合、 callイベントが発生します。

callイベントを受信した時は、必ずそのイベントに応答する必要があります。応答しなければ接続は確立しません。

// Call a peer, providing our mediaStream
var call = peer.call('dest-peer-id',
 mediaStream);

peer.on('call', function(call) {
 // Answer the call, providing our mediaStream
 call.answer(mediaStream);
});

相手を呼び出す時、または、呼び出しに応答する時には、MediaStreamを提供する必要があります。 MediaStreamにはビデオストリーム(ウェブカメラの映像)やオーディオストリームなどがあり、navigator.getUserMediaによって取得することができます。取得できる内容はブラウザによってことなります。 尚、呼び出しに応答する時のMediaStreamは必須ではありません。もし応答時にMediaStreamをセットしなければ、一方向の通話が確立されます。 通話が確立されると、openプロパティにtrueがセットされます。

peer.call と call イベントのコールバックではMediaConnectionオブジェクトを提供します。 MediaConnectionオブジェクトはstream イベントをキャッチすることができます。streamイベントのコールバックには相手の映像/音声ストリームが含まれます。

call.on('stream', function(stream) {
 // `stream` is the MediaStream of the remote peer.
 // Here you'd add it to an HTML video/canvas element.
});

詳しくは MediaConnection API reference をご覧ください。

SkyWay RestAPIの使い方

listAllPeers()

APIキー毎のアクティブなPeerIDを取得します。

peer.listAllPeers(function(list){
 //(例)取得したPeerIDリストを配列に格納する
 for(var cnt = 0;cnt < list.length;cnt++){ userList.push(list[cnt]); } }); 

SkyWay RestAPIはAPIキー申請時に申請していただいたドメインからのみアクセスが可能です。

FAQ

どのような種類のデータを送ることができますか?

PeerJSは BinaryPackシリアライゼーションフォーマットを利用しています。JSONやバイナリBlobs、ArrayBuffersなど様々なデータを簡単な手順で送受信することができます。

conn.send({
 strings: 'hi!',
 numbers: 150,
 arrays: [1,2,3],
 evenBinary: new Blob([1,2,3]),
 andMore: {bool: true}
});

serializationの設定値による、各プラットフォーム間(JavaScript, iOS, Android)でのデータ通信の可否と、送受信時のデータ型に関する情報についてはこちらをご覧ください。

PeerJSを利用することができないシーンはありますか?

シンメトリックNATの内側にいるクライアント同士はNATを超えることができないため、通信することができません。 ただし、TURNサーバを利用して接続を中継すれば回避することができます。必要であれば、SkyWayが提供するTURNサーバを利用するか別途用意してください。SkyWayが提供するTURNサーバを利用する場合は別途申請が必要です。TURNサーバの情報は、Peerオブジェクトのオプションで設定することができます。

TURNサーバはどのようにして利用するのでしょうか?

Peerオブジェクトを生成する際、オプションのiceServersにURL等の情報を設定してください。

var peer = new Peer({
 config: {'iceServers': [
 { url: 'stun:stun.skyway.io:3478' },
 { url: 'turn:homeo@turn.bistri.com:80', credential: 'homeo' }
 ]} /* Sample servers, please use appropriate ones */
});

尚、SkyWayが提供するTURNサーバを利用する場合は、オプションの設定は不要です。

現在のブラウザ対応状況は?

WebRTC仕様との互換性並びにブラウザの対応状況はこちらをご覧ください。尚、SkyWay対応版のPeerJSについては、動作に差異がある可能性があります。

接続しようとしてるピアに接続できない場合はどうなりますか?

ピアに接続できない場合はPeerServerにて接続要求を5秒間保持します。ピアが一時的に再接続するような場合、コネクションを切らずに保持することができます。

ピアとつながらない場合は何を確認するべきでしょうか?

ピア同士がシンメトリックNATの内側にいる可能性があります。この場合はTURNサーバを利用してください。

ファイアウォール等でUDPのポート3478(STUNサーバへの問い合わせに必要)をブロックしているかもしれません。STUNサーバへの問い合わせが可能な状況でご利用ください。

遅延/帯域幅は?

ピア同士のデータのやり取りは、TURNを利用する場合を除き、サーバを経由しないため、それが原因となる遅延などは発生しません。ピア同士の処理性能やネットワーク環境に依存します。

ピア同士のコネクション確立に関する遅延は、セッション情報の中継(以下、シグナリング)とユーザの識別という2つに分類できます。PeerJSでは、シグナリングの時間を短縮するために、XHRストリーミングリクエストでデータを送った後、WebSocketで送ります。ユーザの識別に関しては手動でIDを指定することで、サーバ側にてIDを生成する際のRTT(Round-Trip delay Time)を短縮することができます。

その他

SkyWay Technical Forum Google Group(日本語/英語)

PeerJS Google Group(英語のみ)

免責事項

本ドキュメントはhttp://peerjs.com/docs/を元に、NTTコミュニケーションズが提供するSkyWayを利用するための情報等を追記し公開しています。ドキュメント原本に関する個別問い合わせには応じることができませんので、予めご了承ください。

SkyWay iOS SDK docs

SkyWayは、WebRTCを利用したピア·ツー·ピアのデータ、ビデオ、オーディオ通信を簡単に実現することができます。「SkyWay iOS SDK」はSkyWayをiOSから利用できるフレームワークです。このドキュメントでは、SkyWay iOS SDKの基本的な使い方を紹介します。SkyWay iOS SDKを用いた実装例をご覧になりたい方は, サンプルアプリ を御覧ください。

セットアップ

1. 必要なライブラリ、フレームワークを追加

下記のライブラリ、フレームワークをXcodeプロジェクトに追加してください。

AudioToolbox.framework
AVFoundation.framework
CoreMedia.framework
CoreVideo.framework
VideoToolbox.framework
CoreGraphics.framework
Foundation.framework
GLKit.framework
SystemConfiguration.framework
libc++.tbd
libstdc++.6.0.9.tbd
libsqlite3.tbd
libicucore.tbd

2. SkyWay iOS SDKのインポート

SkyWay.frameworkをXcodeプロジェクトに追加後、SkyWay iOS SDKのヘッダファイルをインポートしてください。また、Build SettingsのLinking> Other Linker Flagsに-ObjCが設定されているか確認してください。

#import <SkyWay/SKWPeer.h>

※(注記)現在Bitcodeには内部ライブラリの関係上、対応しておりません。Xcode7以上をお使いの方は、Build SettingsのBuild Options> Enable BitcodeをNOに設定してください。

3. SKWPeerオブジェクトを作成

SKWPeerオブジェクトは、Peerコネクションを生成、受信する為に利用します。

SKWPeerOption* options = [[SKWPeerOption alloc] init];
options.key = @"{APIKEY}";
options.domain = @"{DOMAIN}";
SKWPeer* peer = [[SKWPeer alloc] initWithOptions:options];

SKWPeerのコンストラクタに渡す'APIKEY'は、SkyWayのAPIキーです。APIキーの申し込みを行うことで無料で取得することができます。APIキー申込時には利用ドメインを申請していただきます。APIキーは申請したドメインからのみ利用可能です。

セッション情報交換やシグナリングに利用するサーバを、自身で構築することもできます。 詳しくはpeerjs-serverをご覧ください。

これで利用するための準備はすべて整いました!

使い方

SKWPeerオブジェクトは生成時、ランダムなID(以下、PeerID)が付与されます。

[peer on:SKW_PEER_EVENT_OPEN callback:^(NSObject* obj)
{
 if (YES == [obj isKindOfClass:[NSString class]])
 {
 NSString* ownId = (NSString *)obj;
 }
}];

他のPeerと接続したい場合は、接続先のPeerIDが必要になります。 SKWPeerクラスのlistAllPeersメソッドを用いて接続先のPeerIDを入手するか、何らかの仕組みでPeerIDを交換してください。SKWPeerコンストラクタのオプションに任意のPeerIDを指定する事もできます

その他のオプション、メソッド、イベント、エラー処理などの詳細は、Peer API リファレンスをお読みください。

Data connections

相手のPeerIDを指定してSKWPeerのconnectWithIdメソッドを実行するとdata connectionを開始します。相手から接続要求はいつでもSKW_PEER_EVENT_CONNECTIONイベントを利用して受け取ることができます。

SKWDataConnection* dataConnection = [peer connectWithId:'dest-peer-id'];

[peer on:SKW_PEER_EVENT_CONNECTION callback:^(NSObject* dataConnection){ ... }];

SKWPeerのconnectWithIdメソッドとSKW_PEER_EVENT_CONNECTIONイベントのコールバックではSKWDataConnectionオブジェクトを提供します。このオブジェクトを使用してデータの送受信を行うことができます。

[dataConnection on:SKW_DATACONNECTION_EVENT_OPEN callback:^(NSObject* obj){ ... }];
[dataConnection on:SKW_DATACONNECTION_EVENT_DATA callback:^(NSObject* obj)
{
 //文字列データの受信
 NSString* strData = nil;
 if ([obj isKindOfClass:[NSString class]])
 {
 strData = (NSString *)obj;
 }
}];
// メッセージを送信
BOOL bResult = [dataConnection send:@"Hello SkyWay!"];
if (NO == bResult)
{
 // 送信失敗
}
else
{
 // 送信成功
}
 

メソッドとイベントの詳細は、DataConnection API リファレンスをご覧ください。

Video/audio calls

相手のPeerIDを指定してSKWPeerのcallWithIdメソッドを実行することで、その相手を呼び出すことができます。相手があなたを呼び出した場合、 SKW_PEER_EVENT_CALLイベントが発生します。

SKW_PEER_EVENT_CALLイベントを受信した時は、必ずそのイベントに応答する必要があります。応答しなければ接続は確立しません。

SKWMediaConnection* mediaConnection = [peer callWithId:dest-peer-id stream:mediaStream];

[peer on:SKW_PEER_EVENT_CALL callback:^(NSObject* mediaConnection){
 [mediaConnection answer:mediaStream];
}];

相手を呼び出す時、または、呼び出しに応答する時には、SKWMediaStreamを提供する必要があります。 SKWMediaStreamにはビデオストリーム(カメラの映像)やオーディオストリームなどがあり、SKWNavigatorのgetUserMediaメソッドによって取得することができます。 尚、呼び出しに応答する時のSKWMediaStreamは必須ではありません。もし応答時にSKWMediaStreamをセットしなければ、一方向の通話が確立されます。 通話が確立されると、isOpenプロパティにYESがセットされます。

SKWPeerのcallWithIdとSKW_PEER_EVENT_CALLイベントのコールバックではSKWMediaConnectionオブジェクトを提供します。 SKWMediaConnectionオブジェクトはSKW_MEDIACONNECTION_EVENT_STREAM イベントをキャッチすることができます。SKW_MEDIACONNECTION_EVENT_STREAMイベントのコールバックには相手の映像/音声ストリームが含まれます。

[mediaConnection on:SKW_MEDIACONNECTION_EVENT_STREAM callback:^(NSObject* stream)
{
 // 'stream' は接続先のSKWMediaStreamです。
 // ここでSKWVideoに追加
}];

詳しくは MediaConnection API reference をご覧ください。

SkyWay RestAPIの使い方

listAllPeers

APIキー毎のアクティブなPeerIDを取得します。

[peer listAllPeers:^(NSArray* aryPeers)
{
 for (NSString* strPeer in aryPeers)
 {
 ...
 }
}];

SkyWay RestAPIはAPIキー申請時に申請していただいたドメインからのみアクセスが可能です。

FAQ

どのような種類のデータを送ることができますか?

SkyWay iOS SDKはserializationをbinaryまたはbinary-utf8にした場合、MessagePackシリアライゼーションフォーマットを利用します。NSData*,NSString*,NSNumber*,NSDictionary*,NSArray*を簡単な手順で送受信することができます。

NSDictionary* dctData = @{
 @"1": @"one",
 @"2": @"two",
 @"3": @"three",
 @"4": @"four",
 @"5": @"five",
 };
BOOL bResult = [_dataConnection send:dctData];

serializationの設定値による、各プラットフォーム間(JavaScript, iOS, Android)でのデータ通信の可否と、送受信時のデータ型に関する情報についてはこちらをご覧ください。

SkyWay iOS SDKを利用することができないシーンはありますか?

シンメトリックNATの内側にいるクライアント同士はNATを超えることができないため、通信することができません。 ただし、TURNサーバを利用して接続を中継すれば回避することができます。必要であれば、SkyWayが提供するTURNサーバを利用するか別途用意してください。SkyWayが提供するTURNサーバを利用する場合は別途申請が必要です。TURNサーバの情報は、SKWPeerコンストラクタのオプションで設定することができます。

TURNサーバはどのようにして利用するのでしょうか?

SKWPeerオブジェクトを生成する際、SKWPeerOption内のconfigプロパティにおいてSKWIceConfigオブジェクトにURL等の情報を設定してください。

SKWIceConfig* configStun = [[SKWIceConfig alloc] init];
configStun.url = @"stun:stun.skyway.io:3478";
SKWIceConfig* configTurn = [[SKWIceConfig alloc] init];
configTurn.url = @"turn:homeo@turn.bistri.com:80";
configTurn.credential = @"homeo";
//設定例はサンプルです。利用時には適切なサーバを設定してください。
SKWPeerOption* options = [[SKWPeerOption alloc] init];
option.config = @[configStun,configTurn];
SKWPeer* peer = [[SKWPeer alloc] initWithOptions:options];

尚、SkyWayが提供するTURNサーバを利用する場合は、オプションの設定は不要です。

接続しようとしてるピアに接続できない場合はどうなりますか?

ピアに接続できない場合はPeerServerにて接続要求を5秒間保持します。ピアが一時的に再接続するような場合、コネクションを切らずに保持することができます。

ピアとつながらない場合は何を確認するべきでしょうか?

ピア同士がシンメトリックNATの内側にいる可能性があります。この場合はTURNサーバを利用してください。

ファイアウォール等でUDPのポート3478(STUNサーバへの問い合わせに必要)をブロックしているかもしれません。STUNサーバへの問い合わせが可能な状況でご利用ください。

遅延/帯域幅は?

ピア同士のデータのやり取りは、TURNを利用する場合を除き、サーバを経由しないため、それが原因となる遅延などは発生しません。ピア同士の処理性能やネットワーク環境に依存します。

ピア同士のコネクション確立に関する遅延は、セッション情報の中継(以下、シグナリング)とユーザの識別という2つに分類できます。PeerJSでは、シグナリングの時間を短縮するために、XHRストリーミングリクエストでデータを送った後、WebSocketで送ります。ユーザの識別に関しては手動でIDを指定することで、サーバ側にてIDを生成する際のRTT(Round-Trip delay Time)を短縮することができます。

対応OS

iOS 7+

動作確認機種

iPhone 5+、iPodTouch 6+、iPad 2+

その他

SkyWay Technical Forum Google Group(日本語/英語)

免責事項

本ドキュメントはhttp://peerjs.com/docs/を元に、NTTコミュニケーションズが提供するSkyWayを利用するための情報等を追記し公開しています。ドキュメント原本に関する個別問い合わせには応じることができませんので、予めご了承ください。

SkyWay Android SDK docs

SkyWayは、WebRTCを利用したピア·ツー·ピアのデータ、ビデオ、オーディオ通信を簡単に実現することができます。「SkyWay Android SDK」はSkyWayをAndroidから利用できるフレームワークです。このドキュメントでは、SkyWay Android SDKの基本的な使い方を紹介します。SkyWay Android SDKを用いた実装例をご覧になりたい方は, サンプルアプリ を御覧ください。

セットアップ

1. 必要な設定を追加

下記の設定をマニフェストファイルに追加してください。

<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-feature android:glEsVersion="0x00020000" android:required="true" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

2. SkyWay Android SDKのインポート

SkyWay.aarをアプリケーションに追加後にSkyWay Android SDKのクラスファイルをインポートしてください。

#import io.skyway.Peer.*;

3. Peerオブジェクトを作成

Peerオブジェクトは、Peerコネクションを生成、受信する為に利用します。

PeerOption options = new PeerOption();
options.key = "{APIKEY}";
options.domain = "{DOMAIN}";
Peer peer = new Peer(options);

Peerのコンストラクタに渡す'APIKEY'は、SkyWayのAPIキーです。APIキーの申し込みを行うことで無料で取得することができます。APIキー申込時には利用ドメインを申請していただきます。APIキーは申請したドメインからのみ利用可能です。

セッション情報交換やシグナリングに利用するサーバを、自身で構築することもできます。 詳しくはpeerjs-serverをご覧ください。

これで利用するための準備はすべて整いました!

使い方

Peerオブジェクトは生成時、ランダムなID(以下、PeerID)が付与されます。

peer.on(Peer.PeerEventEnum.OPEN, new OnCallback(){
 public void onCallback(Object object){
 if (object instanceof String){
 string id = (String) object;
 }
 }
 });

他のPeerと接続したい場合は、接続先のPeerIDが必要になります。 PeerクラスのlistAllPeersメソッドを用いて接続先のPeerIDを入手するか、何らかの仕組みでPeerIDを交換してください。Peerコンストラクタのオプションに任意のPeerIDを指定する事もできます

その他のオプション、メソッド、イベント、エラー処理などの詳細は、Peer API リファレンスをお読みください。

Data connections

相手のPeerIDを指定してPeerのconnect(peerId)メソッドを実行するとdata connectionを開始します。相手から接続要求はいつでもPeerEventEnum.CONNECTIONイベントを利用して受け取ることができます。

DataConnection dataConnection = peer.connect('dest-peer-id');

peer.on(Peer.PeerEventEnum.CONNECTION,new OnCallback(){
 public void onCallback(Object object){
 //接続イベント受信時の処理
 }
 });

Peerのconnect(peerId)メソッドとPeerEventEnum.CONNECTIONイベントのコールバックではDataConnectionオブジェクトを提供します。このオブジェクトを使用してデータの送受信を行うことができます。

dataConnection.on(DataEventEnum.DATA,new OnCallback(){
 public void onCallback(Object object){
 //文字列データの受信
 String strValue = null;
 if (object instanceof String){
 strValue = (String)object;
 }
 }
});
//メッセージ送信
Bool bResult = dataConnection.send("Hello SkyWay!");
if(NO == bResult){
 //送信失敗
}else{
 //送信成功
}

メソッドとイベントの詳細は、DataConnection API リファレンスをご覧ください。

Video/audio calls

相手のPeerIDを指定してPeerのcall(peerId)メソッドを実行することで、その相手を呼び出すことができます。相手があなたを呼び出した場合、 PeerEventEnum.CALLイベントが発生します。

PeerEventEnum.CALLイベントを受信した時は、必ずそのイベントに応答する必要があります。応答しなければ接続は確立しません。

MediaConnection mediaConnection = peer.call('dest-peer-id',mediaStream);

peer.on(Peer.PeerEventEnum.CALL,new OnCallback(){
 public void onCallback(Object object){
 mesiaConnection.answer(mesiastream);
 }
});

相手を呼び出す時、または、呼び出しに応答する時には、MediaStreamを提供する必要があります。 MediaStreamにはビデオストリーム(カメラの映像)やオーディオストリームなどがあり、NavigatorのgetUserMediaメソッドによって取得することができます。 尚、呼び出しに応答する時のMediaStreamは必須ではありません。もし応答時にMediaStreamをセットしなければ、一方向の通話が確立されます。 通話が確立されると、isOpenプロパティにtrueがセットされます。

Peerのcall(peerId)とPeerEventEnum.CALLイベントのコールバックではMediaConnectionオブジェクトを提供します。 MediaConnectionオブジェクトはMediaEventEnum.STREAM イベントをキャッチすることができます。MediaEventEnum.STREAMイベントのコールバックには相手の映像/音声ストリームが含まれます。

mediaConnection.on(event, new OnCallback(){
 puclic void onCallback(Object object){
 // 'stream' は接続先のMediaStreamです。
 // ここでCanvasに追加
 }
 });

詳しくは MediaConnection API reference をご覧ください。

SkyWay RestAPIの使い方

listAllPeers

APIキー毎のアクティブなPeerIDを取得します。

peer.listAllPeers(new OnCallback(){
 public void onCallback(Object object){
 if (!(object instanceof JSONArray)){
 return;
 }
 JSONArray peers = (JSONArray) object;
 }
});

SkyWay RestAPIはAPIキー申請時に申請していただいたドメインからのみアクセスが可能です。

FAQ

どのような種類のデータを送ることができますか?

SkyWay Android SDKはserializationをbinaryまたはbinary-utf8にした場合、MessagePackシリアライゼーションフォーマットを利用します。Byte, Short, Integer, Long, Float, Double, byte[], String, ByteBuffer, List, Mapを簡単な手順で送受信することができます。

HashMap< String, String> map = new HashMap();
for (int i = 0 ; 5> i ; i++){
 String strKey = String.format("%d", i);
 String strValue = String.format("Value:%d", i);
 map.put(strKey, strValue);
 }
Boolean bResult = _data.send(map);

PeerOption options = new PeerOption();
//設定例はサンプルです。利用時には適切なサーバを設定してください。
IceConfig configTurn = new IceConfig();
configTurn.url = "turn:homeo@turn.bistri.com:80";
configTurn.credential = "homeo";
options.config = {configStun,configTurn};
Peer peer = new Peer(options);