【SkyWay】Peerをブラウザのみでマッチングさせる方法(JavaScriptSDK)

作成されたPeer同士を、クライアントサイドのみでマッチングさせる方法を紹介します。

紹介する内容は、偶数番目のPeerが奇数番目のPeerに発信する方法で、Peerが2つ作成されたタイミングでマッチングします。

#接続中のPeerIDを取得する
JavaScriptSDKには接続中のPeerIDを取得するメソッドが用意されています。
listAllPeers()を使用することで、SkyWayのサーバからREST APIでPeerID一覧を取得します。
SkyWayのコンソールのPeerID一覧に表示される内容と同じです。

sample.js

peer.listAllPeers((peers) => {
  console.log(peers);
});

Peersに、作成されたPeerIDが配列で格納されます。
複数実行すると、新しいPeerIDを加えた配列が表示されます。

#偶数番目のPeerが奇数番目のPeerに発信する

listAllPeers()で取得したPeerIDの数が、奇数の場合と偶数の場合の処理を分けます。

sample.js

peer.on("open", () => {
  peer.listAllPeers((peers) => {
    if (peers.length % 2 === 0) {
      // 偶数番目のユーザー
      const OpponentPeerId = peers[peers.length - 2]; // 自分のひとつ前に作成されたPeerID
      console.log(`相手のpeerIDは ${OpponentPeerId} です。`);
      // ここに発信処理
    } else {
      // 奇数番目のユーザー
      console.log(`誰かが ${peer.id} にかけるのを待っています。`);
      // ここに着信処理
    }
  });
});

#途中退席した場合の処理

しかし、どちらかのユーザーが途中退出した場合、以下のようなことが想定されます。

1. PeerAが作成される ["A"]
2. PeerBが作成され、PeerAとマッチングする ["A", "B"]
3. PeerBが退出する ["A"]
4. PeerCが作成される ["A", "C"]
5. PeerCがひとつ前のPeerAに発信する ["A", "C"]

この場合、Aが2回着信してしまいます。
これを回避するため、すでにマッチングしたPeerAとPeerBを取得されないようにする処理を追加します。

##シグナリングサーバとの接続を切断する

listAllPeers()は、シグナリングサーバに接続されているPeerIDを取得します。
すでにマッチングしたPeerのシグナリングサーバとの接続を切断することで、第三者から取得されることを防ぎます。
つまり、listAllPeers()には3つ以上のPeerIDが表示されません。

一度マッチングすれば相手のPeerのあらゆる情報をmediaConnectionで取得できるため、シグナリングサーバとの通信は必要なくなります。

発信/着信処理の後に以下を追加します。

sample.js

mediaConnection.on("stream", (stream) => {
  peer.disconnect();
});

MediaStreamを受け取り次第、disconnect()でシグナリングサーバとの接続を切断しています。

##disconnect()にバッファを持たせる

しかし、上記のようにMediaStreamを受け取った瞬間にdisconnect()を実行すると、必要な情報を取得する前に切断してしまい、映像の取得に不具合が起こります。
記事作成時点で、シグナリングが終了したことを検知する方法が無いので、streamイベントの一定時間後にdisconnect()することで対応しています。

sample.js

mediaConnection.on("stream", (stream) => {
  // ここで一定時間待つ
  peer.disconnect();
});

具体的な時間はユーザーの環境にもよるため、一概に何秒と決めることが出来ません。
また、disconnect()を待っている間にどちらかが退出した場合、上記のような意図しないマッチングが起きてしまいます。
良い方法があればコメントお願いします

#参考文献
公式ドキュメント
SkyWay JavaScriptリファレンス