SkyWayを利用したハンズオンの資料です。

1. SkyWay HandsOn
WebRTC Meetup Tokyo #5
https://atnd.org/events/58755
Copyright © NTT Communications Corporation. All right reserved.

2. Copyright © NTT Communications Corporation. All right reserved.
自己紹介
 なかゆうすけ（Twitter : @Tukimikage）
 所属
• NTTコミュニケーションズ技術開発部
 オフィシャルワーク
• HTML5 Experts.jp（HTML5 Experts Works） 副編集長
• WebRTC開発者向けフレームワーク「SkyWay」中の人
 コミュニティワーク
• html5j自動車部部長
• html5jエンタープライズ部スタッフ

3. Copyright © NTT Communications Corporation. All right reserved.
今日の流れ
 WebRTC開発者向けプラットフォーム「SkyWay」の概要
 ハンズオン事前準備
 作るものの概要
 開発しよう！

4. SkyWayの概要
SkyWayを使えば簡単に
WebRTCのアプリを開発できる
Copyright © NTT Communications Corporation. All right reserved.

5. Copyright © NTT Communications Corporation. All right reserved.
SkyWayの概要
WebRTC利用アプリを簡単に開発できるクラウド基盤
 2013年12月5日に提供開始
 無料！
 提供内容
• シグナリング等のAPI
• ライブラリ
• サンプルアプリ
• ドキュメント
 開発者登録
• 専用APIキーの払い出し
• 利用状況の確認
http://skyway.io

6. WebRTCはWeb開発者にとって難しい技術
ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を
行う必要があり、実装にはネットワークの知識が必要。
Copyright © NTT Communications Corporation. All right reserved.
ようやく直接6 通信できる
これらの通信が
完了してから…

7. Copyright © NTT Communications Corporation. All right reserved.
SkyWayの特徴
SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので、
開発者は簡単にWebRTC利用アプリを開発できる。
STUN
API
Signaling
API STUN
API
ライブラリライブラリ
APIとライブ
ラリが複雑な
処理を担う

8. Copyright © NTT Communications Corporation. All right reserved.
開発に必要な情報
 クライアントライブラリの日本語ドキュメント
• クライアントはオープンソースのPeerJS互換
• PeerJSのドキュメントに一部修正を加え日本語化して公開中
http://nttcom.github.io/skyway/docs/

9. Copyright © NTT Communications Corporation. All right reserved.
開発に必要な情報
 開発者向けフォーラムを用意
• SkyWay Technical Forum
 だれでも参加可能！
 中の人が懇切丁寧に開発者の疑問質問にお答え！
 WebRTCに関す日本語での情報交換に活用してください
http://goo.gl/enBkcF

10. ハンズオン事前準備
Copyright © NTT Communications Corporation. All right reserved.

11. Copyright © NTT Communications Corporation. All right reserved.
ハンズオンを行う前に
ハンズオンの手引
http://goo.gl/oa3HP2

12. 作るものの概要
Copyright © NTT Communications Corporation. All right reserved.

13. 簡単マルチパーティビデオチャットアプリ
SkyWayでSkyWay
シグナリング
WebRTCを利用しメッシュ状に接続
ビデオチャットをおこなう
Copyright © NTT Communications Corporation. All right reserved.
※APIキー毎にルームを作る

14. 開発しよう！
Copyright © NTT Communications Corporation. All right reserved.

15. Copyright © NTT Communications Corporation. All right reserved.
STEP1
・APIキーは各自取得したものを設定
・利用可能ドメインにlocalhost を設定
・TURNサーバに関する設定は空白

16. Copyright © NTT Communications Corporation. All right reserved.
STEP2

17. Copyright © NTT Communications Corporation. All right reserved.
STEP3

18. Copyright © NTT Communications Corporation. All right reserved.
STEP4

19. Copyright © NTT Communications Corporation. All right reserved.
STEP5

20. Copyright © NTT Communications Corporation. All right reserved.
STEP6

21. Copyright © NTT Communications Corporation. All right reserved.
STEP7

22. Copyright © NTT Communications Corporation. All right reserved.
STEP8

23. Copyright © NTT Communications Corporation. All right reserved.
STEP9

24. Copyright © NTT Communications Corporation. All right reserved.
STEP10

25. Copyright © NTT Communications Corporation. All right reserved.
STEP11

26. Copyright © NTT Communications Corporation. All right reserved.
STEP12

27. Copyright © NTT Communications Corporation. All right reserved.
STEP12

28. ローカルで動かしてみる！
Ex http://localhost:8080
Copyright © NTT Communications Corporation. All right reserved.

29. Copyright © NTT Communications Corporation. All right reserved.
STEP13
・APIキーを上記の者に書換える

30. ローカルで動かしてみる！
Ex http://localhost:8080
Copyright © NTT Communications Corporation. All right reserved.

31. ウィンドウはいっぱい出てくるけど
Copyright © NTT Communications Corporation. All right reserved.
映像が出ないはず

32. Copyright © NTT Communications Corporation. All right reserved.
STEP14
・TURNサーバの設定を追加
（このTURNサーバはOSSのものを今回の為に用意）

33. Copyright © NTT Communications Corporation. All right reserved.
STEP15
・configを書換える

34. Copyright © NTT Communications Corporation. All right reserved.
つながったかな？

35. Copyright © NTT Communications Corporation. All right reserved.
以上です。

36. SkyWayで素敵なWebRTCライフを！
Copyright © NTT Communications Corporation. All right reserved.