SkyWayとsocket.ioで作るボイスチャット

1. SkyWayで作るボイスチャット

2. 今日話す内容
1.SkyWayとは
2.ボイスチャットのしくみ
3.デモについて解説
4.おまけ

3. 1.SkyWayとは

4. SkyWayとは
NTT Communicationsが提供している
PeerJS互換のプラットフォーム
WebRTCを使うときに必要となる
Peer ServerやSTUN/TURN Serverを
無料で提供してくれるので、誰でも簡単に
P2Pボイスチャットが作れちゃう！

5. 用語解説

6. WebRTCとは
Web上でP2Pでリアルタイムに動画や音声の
交換を行うためのAPI
ブラウザでP2P方式の何かを作る場合に
避けては通れない技術

7. Peer Serverとは
PeerJSで使用するユーザーID変換などを
全部やってくれるシグナリングサーバ

8. STUN Serverとは
クライアントのIPアドレスやポート番号、
NATが間に入っているかどうかを判別して、
NATの種類やNATによって割り当てられた
ローカルポート番号などを取得してくれる

9. TURN Serverとは
STUN ServerがNATやファイアーウォールに
よりP2Pでの接続が無理と判断した場合に、
クライアントとクライアントとの間に入って
通信を中継してくれる

10. なぜ今頃SkyWayなのか
• 使えるブラウザが増えてきた
AndroidブラウザやChrome Firefox Operaなどで
使えるようになってきた！
• 情報が貯まってきた
当時はまだ新しい技術だったWebRTCもある程度
認知されてきた！
（検索すればほしい情報が見つかる！）

11. 2.ボイスチャットのしくみ

12. ボイスチャットの方式
• クライアント・サーバ方式
サーバを立ててそこにアクセスする方式
(TeamSpeak3やVentriloなんかがこれ）
• P2P方式 ←今回はこれ
サーバを持たずにクライアント間で通信する方式
(Skypeがこれ）

13. クライアント・サーバ方式
１台のサーバに複数人で接続する方式
ユーザーはサーバに音声データを送信、
サーバは受け取った音声データを処理して
他のユーザーに送信する
サーバ
ユーザーA ユーザーB
音声データ 音声データ

14. P2P方式（Skypeの場合)
マスタ
ノード
ユーザーA ユーザーB
音声データ
Skype
サーバ
ユーザー情報ユーザー情報
ユーザー情報
サーバを経由せずユーザー間で音声データを
送受信し合う方式
サーバはユーザーの接続情報を管理し、
マスタノードによって通話する相手の情報
（IPやポート番号)など交換させている

15. P2P方式（Skypeの場合)
マスタ
ノード
ユーザーA ユーザーB
Skype
サーバ
ユーザー情報
ユーザー情報
ユーザー情報
リレー
ノード
もしもNATを越えられなくてP2P接続が
出来なかった場合は、リレーノードを
経由してクライアント・サーバ型のよ
うに通信する

16. 3.デモについて解説

17. 構成
• Webサーバ
PHPかなにかで適当にページを出すだけ
• ルームサーバ
MilkCocoaを使うと言っていたのですが、node.jsとsocket.ioで
(サービスとして作る時に自由度が低いのと価格が高いので）
• フロントまわり
TypeScriptでごりごり書いた感じ
使用したライブラリ
(RouterJS、RequireJS、jQuery、socket.io-client、PeerJS)

18. デモの流れ
ユーザーA
Redis
(マスタ)
Node.js
(ルーム)
Node.js
(ルーム) 既にユーザーAが入室している部屋に
ユーザーBが入ったとします。
ユーザーB

19. デモの流れ
ユーザーA ユーザーB
Redis
(マスタ)
Node.js
(ルーム)
Node.js
(ルーム)
入室するタイミングでSkyWayの
PeerServerにPeerIDをリクエストします
SkyWay
PeerID

20. デモの流れ
ユーザーA ユーザーB
入退室情報
Redis
(マスタ)
Node.js
(ルーム)
入退室情報
Node.js
(ルーム)
SkyWay
PeerID
SkyWayから受け取ったPeerIDを入室時に
Node.jsのルームサーバに送信します
Redisを通して複数のルームサーバ間で情
報を同期します

21. デモの流れ
ユーザーA ユーザーB
入退室情報
Redis
(マスタ)
Node.js
(ルーム)
入退室情報
Node.js
(ルーム)
SkyWay
PeerID
音声データ
ルームサーバを経由してPeerIDを交換す
ることでユーザー間のP2P接続をできるよ
うにします

22. デモの流れ
ユーザーA ユーザーB
入退室情報
Redis
(マスタ)
Node.js
(ルーム)
入退室情報
Node.js
(ルーム)
SkyWay
音声データ
ユーザーC
PeerID
入退室情報
ここで同じルームにユーザCが入室したと
します

23. デモの流れ
ユーザーA ユーザーB
入退室情報
Redis
(マスタ)
Node.js
(ルーム)
入退室情報
Node.js
(ルーム)
SkyWay
音声データ
ユーザーC
PeerID
入退室情報
PeerIDの取得・交換までは正常にできた
のですが、ファイアウォールの設定によ
りP2Pでの接続に失敗してしまいます
音声データ

24. デモの流れ
ユーザーA ユーザーB
入退室情報
Redis
(マスタ)
Node.js
(ルーム)
入退室情報
Node.js
(ルーム)
SkyWay
音声データ
ユーザーC
PeerID
入退室情報
そんな場合はTURN Serverを経由させることで
NATやファイアーウォールを越えさせます！
（これもSkyWayで提供されている機能です)
TURN
(SkyWay)
音声データ 音声データ

25. PeerJSでの通信方法
API KEYをSkyWayの公式サイトから取得後、
getUserMediaから取得できるMediaStreamを
相手のPeerIDに送ります

26. PeerJSでの通信方法
受け取った相手はPeerJSのcallイベントのcallbackに
自分のMediaStreamを送り返す処理を入れます

27. PeerJSでの通信方法
今回はルームに参加しているユーザーとそれぞれ
同じようにStreamを送り合うことでグループ通話を
実現しています
ユーザーA
ユーザーB
ユーザーC
音声データ 音声データ
音声データ

28. できたのがこれ
LOLTeeemo
ゲームでマッチングした瞬間に、
ボタン１つでボイスチャットルームを
誰でも簡単につくれるサービス！
LOLの日本サーバの公開に向けて鋭意開発中

29. おまけ

30. Node.jsについて

31. ユーザーA
Redis
(マスタ)
Node.js
(ルーム)
Node.js
(ルーム)
ユーザーB
デモではRedisをマスタにすることで複数台の
Node.jsサーバに情報を同期させていたのですが、
実はPHPから直接ルームに対してメッセージや
通知を送ることが可能です

32. ユーザーA
Redis
(マスタ)
Node.js
(ルーム)
Node.js
(ルーム)
ユーザーB
PHP
テキストデータとか
受け取った
データ
DB保存
今回はチャットサービスを想定します
チャットの場合ユーザーBはWebサーバに対して
テキストデータをPOSTします

33. ユーザーA
Redis
(マスタ)
Node.js
(ルーム)
Node.js
(ルーム)
ユーザーB
PHP
テキストデータとか
受け取った
データ
DB保存
サーバは受け取ったテキストデータをデータベース
などに保存したり、禁止文字チェックなどの処理を
して、その後にチャットが投稿されたルームに対し
てメッセージデータを送信します

34. ユーザーA
Redis
(マスタ)
Node.js
(ルーム)
Node.js
(ルーム)
ユーザーB
PHP
テキストデータとか
受け取った
データ
DB保存
Node.jsはRedisを常に監視しているのでデータ
が来た瞬間にユーザーに対してチャットメッ
セージを送信します

35. Node.jsの用意
• Node.jsのインストール
yum install nodejs
yum install npm
• 次にNode.jsがインストールされている環境
に必要なパッケージを入れます
npm install socket.io
npm install socket.io-redis
npm install forever

36. Redisの用意
• Redisのインストール
・とりあえずRemiからインストール
yum --enablerepo=remi install redis
・デフォルトポートで起動
/etc/init.d/redis start

37. socket.io-php-emitterの用意
• phpredisのインストール
yum --enablerepo=remi install php-pecl-redis
PHPからRedisを扱う時に必要なライブラリなので入れてく
ださい。
• socket.io-php-emitter
git clone https://github.com/rase-/socket.io-php-
emitter.git
パスの通ったディレクトリにGitHubからクローンして
composer installを実行してください。

38. socket.io-redisの使い方
Server側のNode.jsに追記

39. PHPからRedisにpublish
書き込み時にsocket.io-php-emitterを使い書き込み先
のチャットルームとチャットルームに入室しているユー
ザーそれぞれに通知を出します

40. ノイズキャンセラー

41. ノイズキャンセラーとは
WebRTCで送信しているMediaStreamの音声は周囲
の音を拾ってしまう上に音割れが酷いので、グルー
プ通話のような複数人で話すサービスには向いてい
ません・・・
そこでWebAudioAPIを使って特定の音量以外の音と
人間の出せない高音の音域を消す事で周囲のノイズ
や音割れの雑音を消すことができます！

42. WebAudioAPIのしくみ
WebAudioAPIは受け取ったAudioStreamに対して
エフェクトフィルターを直列につなぐことでギターの
エフェクターのように音を加工できます！

43. デモでの使用例
入力
音声データ
getUserMediaで取得した音声データ
音量
フィルター
ノイズ
キャンセラー
ボイス
チェンジャー
出力

44. デモでの使用例
入力
音声データ
ミュートや音量変更の機能用に音量調整
用のフィルターをかける
(送信側の設定)
音量
フィルター
ノイズ
キャンセラー
ボイス
チェンジャー
出力

45. デモでの使用例
入力
音声データ
特定の音量以下の音と人間が出せない音域
の音を消すフィルター
音量
フィルター
ノイズ
キャンセラー
ボイス
チェンジャー
出力

46. デモでの使用例
入力
音声データ
ユーザーの声に細工をするフィルター
(デモでは準備はしてるけど未実装)
音量
フィルター
ノイズ
キャンセラー
ボイス
チェンジャー
出力

47. デモでの使用例
入力
音声データ
３つのフィルターを通ったあとWebRTC
で音声データを送信
音量
フィルター
ノイズ
キャンセラー
ボイス
チェンジャー
出力

48. WebAudioAPIの記述
Chrome以外は不安定なので処理をさせないようにしていますが、
これだけで音量フィルターとノイズキャンセラーを実装しています

49. 最後に
ちょっと前までブラウザでSkype並のボイス
チャットを作るなんて夢の技術でしたが、
WebRTCとWebAudioAPIにより誰でも
手が届く技術になりました！
一見意味の無さそうな技術でも応用すれば何
か新しいものが作れるかもしれないので、
新しい技術は積極的に勉強しましょう！