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

SkyWay HandsOn

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

SkyWay HandsOn

WebRTC Meetup Tokyo #5

https://atnd.org/events/58755

Page 2: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

自己紹介

なかゆうすけ(Twitter : @Tukimikage)

所属

• NTTコミュニケーションズ 技術開発部

オフィシャルワーク

• HTML5 Experts.jp(HTML5 Experts Works) 副編集長

• WebRTC開発者向けフレームワーク「SkyWay」中の人

コミュニティワーク

• html5j自動車部部長

• html5jエンタープライズ部スタッフ

Page 3: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

今日の流れ

WebRTC開発者向けプラットフォーム「SkyWay」の概要

ハンズオン事前準備

作るものの概要

開発しよう!

Page 4: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

SkyWayの概要

SkyWayを使えば簡単にWebRTCのアプリを開発できる

Page 5: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

SkyWayの概要

WebRTC利用アプリを簡単に開発できるクラウド基盤

2013年12月5日に提供開始

無料!

提供内容

• シグナリング等のAPI

• ライブラリ

• サンプルアプリ

• ドキュメント

開発者登録

• 専用APIキーの払い出し

• 利用状況の確認

http://skyway.io

Page 6: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

WebRTCはWeb開発者にとって難しい技術

ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を行う必要があり、実装にはネットワークの知識が必要。

6ようやく直接通信できる

これらの通信が完了してから…

Page 7: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

SkyWayの特徴

SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので、開発者は簡単にWebRTC利用アプリを開発できる。

STUNAPI

SignalingAPI STUN

API

ライブラリ ライブラリ

APIとライブラリが複雑な処理を担う

Page 8: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

開発に必要な情報

クライアントライブラリの日本語ドキュメント

• クライアントはオープンソースのPeerJS互換

• PeerJSのドキュメントに一部修正を加え日本語化して公開中

http://nttcom.github.io/skyway/docs/

Page 9: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

開発に必要な情報

開発者向けフォーラムを用意

• SkyWay Technical Forum

だれでも参加可能!

中の人が懇切丁寧に開発者の疑問質問にお答え!

WebRTCに関す日本語での情報交換に活用してください

http://goo.gl/enBkcF

Page 10: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

ハンズオン事前準備

Page 11: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

ハンズオンを行う前に

ハンズオンの手引

http://goo.gl/oa3HP2

Page 12: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

作るものの概要

Page 13: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

簡単マルチパーティビデオチャットアプリ

SkyWaySkyWayでシグナリング

WebRTCを利用しメッシュ状に接続ビデオチャットをおこなう

※APIキー毎にルームを作る

Page 14: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

開発しよう!

Page 15: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP1

・APIキーは各自取得したものを設定・利用可能ドメインに localhost を設定・TURNサーバに関する設定は空白

Page 16: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP2

Page 17: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP3

Page 18: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP4

Page 19: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP5

Page 20: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP6

Page 21: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP7

Page 22: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP8

Page 23: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP9

Page 24: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP10

Page 25: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP11

Page 26: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP12

Page 27: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP12

Page 28: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

ローカルで動かしてみる!

Ex http://localhost:8080

Page 29: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP13

・APIキーを上記の者に書換える

Page 30: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

ローカルで動かしてみる!

Ex http://localhost:8080

Page 31: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

ウィンドウはいっぱい出てくるけど映像が出ないはず

Page 32: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP14

・TURNサーバの設定を追加(このTURNサーバはOSSのものを今回の為に用意)

Page 33: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

STEP15

・configを書換える

Page 34: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

つながったかな?

Page 35: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

以上です。

Page 36: SkyWay HandsOn

Copyright © NTT Communications Corporation. All right reserved.

SkyWayで素敵なWebRTCライフを!