Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SkyWayで作るボイスチャット
今日話す内容
1.SkyWayとは
2.ボイスチャットのしくみ
3.デモについて解説
4.おまけ
1.SkyWayとは
SkyWayとは
NTT Communicationsが提供している
PeerJS互換のプラットフォーム
WebRTCを使うときに必要となる
Peer ServerやSTUN/TURN Serverを
無料で提供してくれるので、誰でも簡単に
P...
用語解説
WebRTCとは
Web上でP2Pでリアルタイムに動画や音声の
交換を行うためのAPI
ブラウザでP2P方式の何かを作る場合に
避けては通れない技術
Peer Serverとは
PeerJSで使用するユーザーID変換などを
全部やってくれるシグナリングサーバ
STUN Serverとは
クライアントのIPアドレスやポート番号、
NATが間に入っているかどうかを判別して、
NATの種類やNATによって割り当てられた
ローカルポート番号などを取得してくれる
TURN Serverとは
STUN ServerがNATやファイアーウォールに
よりP2Pでの接続が無理と判断した場合に、
クライアントとクライアントとの間に入って
通信を中継してくれる
なぜ今頃SkyWayなのか
• 使えるブラウザが増えてきた
AndroidブラウザやChrome Firefox Operaなどで
使えるようになってきた!
• 情報が貯まってきた
当時はまだ新しい技術だったWebRTCもある程度
認知されてき...
2.ボイスチャットのしくみ
ボイスチャットの方式
• クライアント・サーバ方式
サーバを立ててそこにアクセスする方式
(TeamSpeak3やVentriloなんかがこれ)
• P2P方式 ←今回はこれ
サーバを持たずにクライアント間で通信する方式
(Skypeがこれ)
クライアント・サーバ方式
1台のサーバに複数人で接続する方式
ユーザーはサーバに音声データを送信、
サーバは受け取った音声データを処理して
他のユーザーに送信する
サーバ
ユーザーA ユーザーB
音声データ 音声データ
P2P方式(Skypeの場合)
マスタ
ノード
ユーザーA ユーザーB
音声データ
Skype
サーバ
ユーザー情報ユーザー情報
ユーザー情報
サーバを経由せずユーザー間で音声データを
送受信し合う方式
サーバはユーザーの接続情報を管理し、
マ...
P2P方式(Skypeの場合)
マスタ
ノード
ユーザーA ユーザーB
Skype
サーバ
ユーザー情報
ユーザー情報
ユーザー情報
リレー
ノード
もしもNATを越えられなくてP2P接続が
出来なかった場合は、リレーノードを
経由してクライア...
3.デモについて解説
構成
• Webサーバ
PHPかなにかで適当にページを出すだけ
• ルームサーバ
MilkCocoaを使うと言っていたのですが、node.jsとsocket.ioで
(サービスとして作る時に自由度が低いのと価格が高いので)
• フロントまわり
...
デモの流れ
ユーザーA
Redis
(マスタ)
Node.js
(ルーム)
Node.js
(ルーム) 既にユーザーAが入室している部屋に
ユーザーBが入ったとします。
ユーザーB
デモの流れ
ユーザーA ユーザーB
Redis
(マスタ)
Node.js
(ルーム)
Node.js
(ルーム)
入室するタイミングでSkyWayの
PeerServerにPeerIDをリクエストします
SkyWay
PeerID
デモの流れ
ユーザーA ユーザーB
入退室情報
Redis
(マスタ)
Node.js
(ルーム)
入退室情報
Node.js
(ルーム)
SkyWay
PeerID
SkyWayから受け取ったPeerIDを入室時に
Node.jsのルームサー...
デモの流れ
ユーザーA ユーザーB
入退室情報
Redis
(マスタ)
Node.js
(ルーム)
入退室情報
Node.js
(ルーム)
SkyWay
PeerID
音声データ
ルームサーバを経由してPeerIDを交換す
ることでユーザー間の...
デモの流れ
ユーザーA ユーザーB
入退室情報
Redis
(マスタ)
Node.js
(ルーム)
入退室情報
Node.js
(ルーム)
SkyWay
音声データ
ユーザーC
PeerID
入退室情報
ここで同じルームにユーザCが入室したと
...
デモの流れ
ユーザーA ユーザーB
入退室情報
Redis
(マスタ)
Node.js
(ルーム)
入退室情報
Node.js
(ルーム)
SkyWay
音声データ
ユーザーC
PeerID
入退室情報
PeerIDの取得・交換までは正常にでき...
デモの流れ
ユーザーA ユーザーB
入退室情報
Redis
(マスタ)
Node.js
(ルーム)
入退室情報
Node.js
(ルーム)
SkyWay
音声データ
ユーザーC
PeerID
入退室情報
そんな場合はTURN Serverを経由...
PeerJSでの通信方法
API KEYをSkyWayの公式サイトから取得後、
getUserMediaから取得できるMediaStreamを
相手のPeerIDに送ります
PeerJSでの通信方法
受け取った相手はPeerJSのcallイベントのcallbackに
自分のMediaStreamを送り返す処理を入れます
PeerJSでの通信方法
今回はルームに参加しているユーザーとそれぞれ
同じようにStreamを送り合うことでグループ通話を
実現しています
ユーザーA
ユーザーB
ユーザーC
音声データ 音声データ
音声データ
できたのがこれ
LOLTeeemo
ゲームでマッチングした瞬間に、
ボタン1つでボイスチャットルームを
誰でも簡単につくれるサービス!
LOLの日本サーバの公開に向けて鋭意開発中
おまけ
Node.jsについて
ユーザーA
Redis
(マスタ)
Node.js
(ルーム)
Node.js
(ルーム)
ユーザーB
デモではRedisをマスタにすることで複数台の
Node.jsサーバに情報を同期させていたのですが、
実はPHPから直接ルームに対してメッセ...
ユーザーA
Redis
(マスタ)
Node.js
(ルーム)
Node.js
(ルーム)
ユーザーB
PHP
テキストデータとか
受け取った
データ
DB保存
今回はチャットサービスを想定します
チャットの場合ユーザーBはWebサーバに対して...
ユーザーA
Redis
(マスタ)
Node.js
(ルーム)
Node.js
(ルーム)
ユーザーB
PHP
テキストデータとか
受け取った
データ
DB保存
サーバは受け取ったテキストデータをデータベース
などに保存したり、禁止文字チェック...
ユーザーA
Redis
(マスタ)
Node.js
(ルーム)
Node.js
(ルーム)
ユーザーB
PHP
テキストデータとか
受け取った
データ
DB保存
Node.jsはRedisを常に監視しているのでデータ
が来た瞬間にユーザーに対し...
Node.jsの用意
• Node.jsのインストール
yum install nodejs
yum install npm
• 次にNode.jsがインストールされている環境
に必要なパッケージを入れます
npm install socket...
Redisの用意
• Redisのインストール
・とりあえずRemiからインストール
yum --enablerepo=remi install redis
・デフォルトポートで起動
/etc/init.d/redis start
socket.io-php-emitterの用意
• phpredisのインストール
yum --enablerepo=remi install php-pecl-redis
PHPからRedisを扱う時に必要なライブラリなので入れてく
ださい...
socket.io-redisの使い方
Server側のNode.jsに追記
PHPからRedisにpublish
書き込み時にsocket.io-php-emitterを使い書き込み先
のチャットルームとチャットルームに入室しているユー
ザーそれぞれに通知を出します
ノイズキャンセラー
ノイズキャンセラーとは
WebRTCで送信しているMediaStreamの音声は周囲
の音を拾ってしまう上に音割れが酷いので、グルー
プ通話のような複数人で話すサービスには向いてい
ません・・・
そこでWebAudioAPIを使って特定の音量以...
WebAudioAPIのしくみ
WebAudioAPIは受け取ったAudioStreamに対して
エフェクトフィルターを直列につなぐことでギターの
エフェクターのように音を加工できます!
デモでの使用例
入力
音声データ
getUserMediaで取得した音声データ
音量
フィルター
ノイズ
キャンセラー
ボイス
チェンジャー
出力
デモでの使用例
入力
音声データ
ミュートや音量変更の機能用に音量調整
用のフィルターをかける
(送信側の設定)
音量
フィルター
ノイズ
キャンセラー
ボイス
チェンジャー
出力
デモでの使用例
入力
音声データ
特定の音量以下の音と人間が出せない音域
の音を消すフィルター
音量
フィルター
ノイズ
キャンセラー
ボイス
チェンジャー
出力
デモでの使用例
入力
音声データ
ユーザーの声に細工をするフィルター
(デモでは準備はしてるけど未実装)
音量
フィルター
ノイズ
キャンセラー
ボイス
チェンジャー
出力
デモでの使用例
入力
音声データ
3つのフィルターを通ったあとWebRTC
で音声データを送信
音量
フィルター
ノイズ
キャンセラー
ボイス
チェンジャー
出力
WebAudioAPIの記述
Chrome以外は不安定なので処理をさせないようにしていますが、
これだけで音量フィルターとノイズキャンセラーを実装しています
最後に
ちょっと前までブラウザでSkype並のボイス
チャットを作るなんて夢の技術でしたが、
WebRTCとWebAudioAPIにより誰でも
手が届く技術になりました!
一見意味の無さそうな技術でも応用すれば何
か新しいものが作れるかもしれな...
Upcoming SlideShare
Loading in …5
×

SkyWayで作るボイスチャット

3,354 views

Published on

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

Published in: Technology
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/2Qu6Caa ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

SkyWayで作るボイスチャット

  1. 1. SkyWayで作るボイスチャット
  2. 2. 今日話す内容 1.SkyWayとは 2.ボイスチャットのしくみ 3.デモについて解説 4.おまけ
  3. 3. 1.SkyWayとは
  4. 4. SkyWayとは NTT Communicationsが提供している PeerJS互換のプラットフォーム WebRTCを使うときに必要となる Peer ServerやSTUN/TURN Serverを 無料で提供してくれるので、誰でも簡単に P2Pボイスチャットが作れちゃう!
  5. 5. 用語解説
  6. 6. WebRTCとは Web上でP2Pでリアルタイムに動画や音声の 交換を行うためのAPI ブラウザでP2P方式の何かを作る場合に 避けては通れない技術
  7. 7. Peer Serverとは PeerJSで使用するユーザーID変換などを 全部やってくれるシグナリングサーバ
  8. 8. STUN Serverとは クライアントのIPアドレスやポート番号、 NATが間に入っているかどうかを判別して、 NATの種類やNATによって割り当てられた ローカルポート番号などを取得してくれる
  9. 9. TURN Serverとは STUN ServerがNATやファイアーウォールに よりP2Pでの接続が無理と判断した場合に、 クライアントとクライアントとの間に入って 通信を中継してくれる
  10. 10. なぜ今頃SkyWayなのか • 使えるブラウザが増えてきた AndroidブラウザやChrome Firefox Operaなどで 使えるようになってきた! • 情報が貯まってきた 当時はまだ新しい技術だったWebRTCもある程度 認知されてきた! (検索すればほしい情報が見つかる!)
  11. 11. 2.ボイスチャットのしくみ
  12. 12. ボイスチャットの方式 • クライアント・サーバ方式 サーバを立ててそこにアクセスする方式 (TeamSpeak3やVentriloなんかがこれ) • P2P方式 ←今回はこれ サーバを持たずにクライアント間で通信する方式 (Skypeがこれ)
  13. 13. クライアント・サーバ方式 1台のサーバに複数人で接続する方式 ユーザーはサーバに音声データを送信、 サーバは受け取った音声データを処理して 他のユーザーに送信する サーバ ユーザーA ユーザーB 音声データ 音声データ
  14. 14. P2P方式(Skypeの場合) マスタ ノード ユーザーA ユーザーB 音声データ Skype サーバ ユーザー情報ユーザー情報 ユーザー情報 サーバを経由せずユーザー間で音声データを 送受信し合う方式 サーバはユーザーの接続情報を管理し、 マスタノードによって通話する相手の情報 (IPやポート番号)など交換させている
  15. 15. P2P方式(Skypeの場合) マスタ ノード ユーザーA ユーザーB Skype サーバ ユーザー情報 ユーザー情報 ユーザー情報 リレー ノード もしもNATを越えられなくてP2P接続が 出来なかった場合は、リレーノードを 経由してクライアント・サーバ型のよ うに通信する
  16. 16. 3.デモについて解説
  17. 17. 構成 • Webサーバ PHPかなにかで適当にページを出すだけ • ルームサーバ MilkCocoaを使うと言っていたのですが、node.jsとsocket.ioで (サービスとして作る時に自由度が低いのと価格が高いので) • フロントまわり TypeScriptでごりごり書いた感じ 使用したライブラリ (RouterJS、RequireJS、jQuery、socket.io-client、PeerJS)
  18. 18. デモの流れ ユーザーA Redis (マスタ) Node.js (ルーム) Node.js (ルーム) 既にユーザーAが入室している部屋に ユーザーBが入ったとします。 ユーザーB
  19. 19. デモの流れ ユーザーA ユーザーB Redis (マスタ) Node.js (ルーム) Node.js (ルーム) 入室するタイミングでSkyWayの PeerServerにPeerIDをリクエストします SkyWay PeerID
  20. 20. デモの流れ ユーザーA ユーザーB 入退室情報 Redis (マスタ) Node.js (ルーム) 入退室情報 Node.js (ルーム) SkyWay PeerID SkyWayから受け取ったPeerIDを入室時に Node.jsのルームサーバに送信します Redisを通して複数のルームサーバ間で情 報を同期します
  21. 21. デモの流れ ユーザーA ユーザーB 入退室情報 Redis (マスタ) Node.js (ルーム) 入退室情報 Node.js (ルーム) SkyWay PeerID 音声データ ルームサーバを経由してPeerIDを交換す ることでユーザー間のP2P接続をできるよ うにします
  22. 22. デモの流れ ユーザーA ユーザーB 入退室情報 Redis (マスタ) Node.js (ルーム) 入退室情報 Node.js (ルーム) SkyWay 音声データ ユーザーC PeerID 入退室情報 ここで同じルームにユーザCが入室したと します
  23. 23. デモの流れ ユーザーA ユーザーB 入退室情報 Redis (マスタ) Node.js (ルーム) 入退室情報 Node.js (ルーム) SkyWay 音声データ ユーザーC PeerID 入退室情報 PeerIDの取得・交換までは正常にできた のですが、ファイアウォールの設定によ りP2Pでの接続に失敗してしまいます 音声データ
  24. 24. デモの流れ ユーザーA ユーザーB 入退室情報 Redis (マスタ) Node.js (ルーム) 入退室情報 Node.js (ルーム) SkyWay 音声データ ユーザーC PeerID 入退室情報 そんな場合はTURN Serverを経由させることで NATやファイアーウォールを越えさせます! (これもSkyWayで提供されている機能です) TURN (SkyWay) 音声データ 音声データ
  25. 25. PeerJSでの通信方法 API KEYをSkyWayの公式サイトから取得後、 getUserMediaから取得できるMediaStreamを 相手のPeerIDに送ります
  26. 26. PeerJSでの通信方法 受け取った相手はPeerJSのcallイベントのcallbackに 自分のMediaStreamを送り返す処理を入れます
  27. 27. PeerJSでの通信方法 今回はルームに参加しているユーザーとそれぞれ 同じようにStreamを送り合うことでグループ通話を 実現しています ユーザーA ユーザーB ユーザーC 音声データ 音声データ 音声データ
  28. 28. できたのがこれ LOLTeeemo ゲームでマッチングした瞬間に、 ボタン1つでボイスチャットルームを 誰でも簡単につくれるサービス! LOLの日本サーバの公開に向けて鋭意開発中
  29. 29. おまけ
  30. 30. Node.jsについて
  31. 31. ユーザーA Redis (マスタ) Node.js (ルーム) Node.js (ルーム) ユーザーB デモではRedisをマスタにすることで複数台の Node.jsサーバに情報を同期させていたのですが、 実はPHPから直接ルームに対してメッセージや 通知を送ることが可能です
  32. 32. ユーザーA Redis (マスタ) Node.js (ルーム) Node.js (ルーム) ユーザーB PHP テキストデータとか 受け取った データ DB保存 今回はチャットサービスを想定します チャットの場合ユーザーBはWebサーバに対して テキストデータをPOSTします
  33. 33. ユーザーA Redis (マスタ) Node.js (ルーム) Node.js (ルーム) ユーザーB PHP テキストデータとか 受け取った データ DB保存 サーバは受け取ったテキストデータをデータベース などに保存したり、禁止文字チェックなどの処理を して、その後にチャットが投稿されたルームに対し てメッセージデータを送信します
  34. 34. ユーザーA Redis (マスタ) Node.js (ルーム) Node.js (ルーム) ユーザーB PHP テキストデータとか 受け取った データ DB保存 Node.jsはRedisを常に監視しているのでデータ が来た瞬間にユーザーに対してチャットメッ セージを送信します
  35. 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. 36. Redisの用意 • Redisのインストール ・とりあえずRemiからインストール yum --enablerepo=remi install redis ・デフォルトポートで起動 /etc/init.d/redis start
  37. 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. 38. socket.io-redisの使い方 Server側のNode.jsに追記
  39. 39. PHPからRedisにpublish 書き込み時にsocket.io-php-emitterを使い書き込み先 のチャットルームとチャットルームに入室しているユー ザーそれぞれに通知を出します
  40. 40. ノイズキャンセラー
  41. 41. ノイズキャンセラーとは WebRTCで送信しているMediaStreamの音声は周囲 の音を拾ってしまう上に音割れが酷いので、グルー プ通話のような複数人で話すサービスには向いてい ません・・・ そこでWebAudioAPIを使って特定の音量以外の音と 人間の出せない高音の音域を消す事で周囲のノイズ や音割れの雑音を消すことができます!
  42. 42. WebAudioAPIのしくみ WebAudioAPIは受け取ったAudioStreamに対して エフェクトフィルターを直列につなぐことでギターの エフェクターのように音を加工できます!
  43. 43. デモでの使用例 入力 音声データ getUserMediaで取得した音声データ 音量 フィルター ノイズ キャンセラー ボイス チェンジャー 出力
  44. 44. デモでの使用例 入力 音声データ ミュートや音量変更の機能用に音量調整 用のフィルターをかける (送信側の設定) 音量 フィルター ノイズ キャンセラー ボイス チェンジャー 出力
  45. 45. デモでの使用例 入力 音声データ 特定の音量以下の音と人間が出せない音域 の音を消すフィルター 音量 フィルター ノイズ キャンセラー ボイス チェンジャー 出力
  46. 46. デモでの使用例 入力 音声データ ユーザーの声に細工をするフィルター (デモでは準備はしてるけど未実装) 音量 フィルター ノイズ キャンセラー ボイス チェンジャー 出力
  47. 47. デモでの使用例 入力 音声データ 3つのフィルターを通ったあとWebRTC で音声データを送信 音量 フィルター ノイズ キャンセラー ボイス チェンジャー 出力
  48. 48. WebAudioAPIの記述 Chrome以外は不安定なので処理をさせないようにしていますが、 これだけで音量フィルターとノイズキャンセラーを実装しています
  49. 49. 最後に ちょっと前までブラウザでSkype並のボイス チャットを作るなんて夢の技術でしたが、 WebRTCとWebAudioAPIにより誰でも 手が届く技術になりました! 一見意味の無さそうな技術でも応用すれば何 か新しいものが作れるかもしれないので、 新しい技術は積極的に勉強しましょう!

×