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 HandsOn

1,768 views

Published on

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

Published in: Internet
  • Be the first to comment

SkyWay HandsOn

  1. 1. SkyWay HandsOn WebRTC Meetup Tokyo #5 https://atnd.org/events/58755 Copyright © NTT Communications Corporation. All right reserved.
  2. 2. Copyright © NTT Communications Corporation. All right reserved. 自己紹介  なかゆうすけ(Twitter : @Tukimikage)  所属 • NTTコミュニケーションズ技術開発部  オフィシャルワーク • HTML5 Experts.jp(HTML5 Experts Works) 副編集長 • WebRTC開発者向けフレームワーク「SkyWay」中の人  コミュニティワーク • html5j自動車部部長 • html5jエンタープライズ部スタッフ
  3. 3. Copyright © NTT Communications Corporation. All right reserved. 今日の流れ  WebRTC開発者向けプラットフォーム「SkyWay」の概要  ハンズオン事前準備  作るものの概要  開発しよう!
  4. 4. SkyWayの概要 SkyWayを使えば簡単に WebRTCのアプリを開発できる Copyright © NTT Communications Corporation. All right reserved.
  5. 5. Copyright © NTT Communications Corporation. All right reserved. SkyWayの概要 WebRTC利用アプリを簡単に開発できるクラウド基盤  2013年12月5日に提供開始  無料!  提供内容 • シグナリング等のAPI • ライブラリ • サンプルアプリ • ドキュメント  開発者登録 • 専用APIキーの払い出し • 利用状況の確認 http://skyway.io
  6. 6. WebRTCはWeb開発者にとって難しい技術 ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を 行う必要があり、実装にはネットワークの知識が必要。 Copyright © NTT Communications Corporation. All right reserved. ようやく直接6 通信できる これらの通信が 完了してから…
  7. 7. Copyright © NTT Communications Corporation. All right reserved. SkyWayの特徴 SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので、 開発者は簡単にWebRTC利用アプリを開発できる。 STUN API Signaling API STUN API ライブラリライブラリ APIとライブ ラリが複雑な 処理を担う
  8. 8. Copyright © NTT Communications Corporation. All right reserved. 開発に必要な情報  クライアントライブラリの日本語ドキュメント • クライアントはオープンソースのPeerJS互換 • PeerJSのドキュメントに一部修正を加え日本語化して公開中 http://nttcom.github.io/skyway/docs/
  9. 9. Copyright © NTT Communications Corporation. All right reserved. 開発に必要な情報  開発者向けフォーラムを用意 • SkyWay Technical Forum  だれでも参加可能!  中の人が懇切丁寧に開発者の疑問質問にお答え!  WebRTCに関す日本語での情報交換に活用してください http://goo.gl/enBkcF
  10. 10. ハンズオン事前準備 Copyright © NTT Communications Corporation. All right reserved.
  11. 11. Copyright © NTT Communications Corporation. All right reserved. ハンズオンを行う前に ハンズオンの手引 http://goo.gl/oa3HP2
  12. 12. 作るものの概要 Copyright © NTT Communications Corporation. All right reserved.
  13. 13. 簡単マルチパーティビデオチャットアプリ SkyWayでSkyWay シグナリング WebRTCを利用しメッシュ状に接続 ビデオチャットをおこなう Copyright © NTT Communications Corporation. All right reserved. ※APIキー毎にルームを作る
  14. 14. 開発しよう! Copyright © NTT Communications Corporation. All right reserved.
  15. 15. Copyright © NTT Communications Corporation. All right reserved. STEP1 ・APIキーは各自取得したものを設定 ・利用可能ドメインにlocalhost を設定 ・TURNサーバに関する設定は空白
  16. 16. Copyright © NTT Communications Corporation. All right reserved. STEP2
  17. 17. Copyright © NTT Communications Corporation. All right reserved. STEP3
  18. 18. Copyright © NTT Communications Corporation. All right reserved. STEP4
  19. 19. Copyright © NTT Communications Corporation. All right reserved. STEP5
  20. 20. Copyright © NTT Communications Corporation. All right reserved. STEP6
  21. 21. Copyright © NTT Communications Corporation. All right reserved. STEP7
  22. 22. Copyright © NTT Communications Corporation. All right reserved. STEP8
  23. 23. Copyright © NTT Communications Corporation. All right reserved. STEP9
  24. 24. Copyright © NTT Communications Corporation. All right reserved. STEP10
  25. 25. Copyright © NTT Communications Corporation. All right reserved. STEP11
  26. 26. Copyright © NTT Communications Corporation. All right reserved. STEP12
  27. 27. Copyright © NTT Communications Corporation. All right reserved. STEP12
  28. 28. ローカルで動かしてみる! Ex http://localhost:8080 Copyright © NTT Communications Corporation. All right reserved.
  29. 29. Copyright © NTT Communications Corporation. All right reserved. STEP13 ・APIキーを上記の者に書換える
  30. 30. ローカルで動かしてみる! Ex http://localhost:8080 Copyright © NTT Communications Corporation. All right reserved.
  31. 31. ウィンドウはいっぱい出てくるけど Copyright © NTT Communications Corporation. All right reserved. 映像が出ないはず
  32. 32. Copyright © NTT Communications Corporation. All right reserved. STEP14 ・TURNサーバの設定を追加 (このTURNサーバはOSSのものを今回の為に用意)
  33. 33. Copyright © NTT Communications Corporation. All right reserved. STEP15 ・configを書換える
  34. 34. Copyright © NTT Communications Corporation. All right reserved. つながったかな?
  35. 35. Copyright © NTT Communications Corporation. All right reserved. 以上です。
  36. 36. SkyWayで素敵なWebRTCライフを! Copyright © NTT Communications Corporation. All right reserved.

×