SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-
1 like3,911 views
SkyWay UG Kansai #1 スヘ?シャルハ?ーシ?ョンです。 元の資料は https://goo.gl/tzJj3X です。
SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-
- 1. Copyright ? NTT Communications Corporation. All rights reserved. #WebRTCSkyWay SkyWayを使いこなすために SkyWay UG Kansai #1 スペシャルバージョン 2018.1.12 Yusuke Naka@SkyWay DevRel @Tukimikage
- 2. ※この資料は @iwashi86 ?の資料をベースにカスタマイズしたものです 元の資料はこちら→ https://goo.gl/tzJj3X
- 4. お品書き 1. はじめに 2. 基本的な使い? 3. 応?的な使い? 4. ハックな使い? 5. その他の細かい機能
- 5. 1. はじめに
- 11. JavaScript SDK について ?外部のAPIはそのままに 最新のWebRTC APIを使いつつ、 内部はフルスクラッチ実装
- 12. JavaScript SDK について ?外部のAPIはそのままに 最新のWebRTC APIを使いつつ、 内部はフルスクラッチ実装 e.g. Safari先?実装の最新APIである RtpTransceiver もSDKで吸収 https://github.com/skyway/skyway-js-sdk/blob/master/src/peer/negotiator.js#L340-L344
- 16. ?Breakingな更新は基本実施しない ?必要な場合は、先?してDeprecationを出す ?セマンティックバージョニング (x.y.z 形式 e.g. 1.0.1) ?xの変更：後?互換性のない更新 ?yの変更：後?互換性のある機能追加 ?zの変更：後?互換制のあるバグ改修など JavaScript SDK の変更?針
- 17. 2. 基本的な使い? 以降 JavaScript ベースで説明するが、颈翱厂/础苍诲谤辞颈诲も同様
- 18. Peer シグナリングサーバ接続
- 20. Peerオブジェクトの?成① ?内部でシグナリングサーバへ接続 ?成功すると ?open? イベントが発?、 Peer ID※がランダムでサーバから割り当てされる ※ Peer IDとは、イメージ的には電話番号みたいなもの
- 21. Peerオブジェクトの?成② ?開発者??が Peer ID 指定も可能 Peer IDの値が重複しないように注意。 重複時はサーバ側でエラーとなる。
- 22. Peerオブジェクトの?成③ ?詳細なログ出?にはdebugオプションを付与 WebRTC的にどこで失敗しているのか判別できるので、 SkyWayサポートへの問い合わせ時などに、返答確率UPかも？
- 26. P2P Media Channel(?声/映像)で接続する① ?Peer IDを指定して、call関数を呼び出す => 相?に発信
- 27. P2P Media Channel(?声/映像)で接続する① ?Peer IDを指定して、call関数を呼び出す => 相?に発信 ?相?側で着信すると ?call? イベントが発?、 応答可能ならanswer関数を呼び出す
- 28. P2P Media Channel(?声/映像)で接続する② ??声/映像は ?stream? イベントで取得可能
- 29. P2P Media Channel(?声/映像)で接続する② ??声/映像は ?stream? イベントで取得可能 <video autoplay> と autoplay と宣?的に設定しても、 ?動再?されないケースもあるので、明?的に play() を推奨 モバイルブラウザは、ユーザアクションも必要な点にも注意
- 32. MultiParty(フルメッシュ / SFU接続) で接続する① ?ルーム名?modeを指定して、 joinRoom()でルーム参加
- 33. MultiParty(フルメッシュ / SFU接続) で接続する② ?ルームで新規の?声/映像ストリームがあれば ?stream? イベントを発?
- 37. P2P Data Channelで接続する① ?Peer 滨顿を指定して、肠辞苍苍别肠迟関数を呼び出す
- 38. P2P Data Channelで接続する① ?Peer 滨顿を指定して、肠辞苍苍别肠迟関数を呼び出す ?接続されると ?connection? イベントが発?する
- 45. 3. 応?的な使い?
- 46. コーデック?帯域指定
- 47. P2P/フルメッシュにて発信時に最?帯域を指定 ネットワーク帯域が?さい場合、 TURN利?帯域を節約したい場合などに有効 補?：上記コード例は call() だが、joinRoom() でも利?可能 e.g. 最?帯域を 200 kbps に設定したい
- 49. 帯域＆コーデック指定の組み合わせも可能 SFU接続は 2018/1時点 で、コーデック指定＆帯域指定機能は未対応だが、今後実装予定 ユースケースによっては、 パラメタ設定することでSFUが不要に
- 50. メタデータ
- 51. P2P call時に任意のメタデータを渡す e.g. 発信時に、Peer 滨顿ではなく名前を渡したい
- 57. 映像??声の受信可否制御
- 60. 4. ハックな使い?
- 65. getStats() を使う③ : e.g. 送受信量が分かる
- 66. getStats() を使う③ : e.g. 選択されてる経路が分かる
- 67. getStats() を使う③ : e.g. 選択されてる経路が分かる
- 68. getStats() を使う③ : e.g. 選択されてる経路が分かる
- 69. getStats() を使う③ : e.g. 選択されてる経路が分かる
- 71. TURN as a Service (SkyWayのTURNのみ使いたい)
- 72. TURN as a Service として使う SkyWayの提供するTURNサーバだけ使いたい ? new Peer() -> ?open? の後に以下のプロパティを参照
- 73. TURN as a Service として使う SkyWayの提供するTURNサーバだけ使いたい ? new Peer() -> ?open? の後に以下のプロパティを参照
- 74. TURN as a Service として使う SkyWayの提供するTURNサーバだけ使いたい ? new Peer() -> ?open? の後に以下のプロパティを参照
- 75. 少しだけ里侧绍介
- 76. STUN/TURN
- 78. TURNのトランスポート?式 ?以下全てに対応※ ?TURN-UDP ?TURN-TCP ?TURN-TLS ?ポート番号は 443 (HTTPSで使われるもの) ? 途中でTLSを解くネットワーク装置(プロキシなど) が無ければ、接続可能 ※ デスクトップ?モバイル共にブラウザ側が対応していない場合を除く
- 79. SFU
- 81. SFUの裏側 ?現時点では配置は東京のみ 需要を?つつ海外配備していく予定 ?SFUのトランスポート?式 ?ICE-UDP ?ICE-TCP ?ICE-SSLTCP (Chromeのみ) ?SSLハンドシェイクのみ実施する擬似SSL ?ポート番号は 10000(UDP) / 443 (TCP/SSLTCP)
- 82. 安定性?スケーラビリティ
- 85. 安定性、スケーラビリティ ??期接続も検証済み ?e.g. 24時間超の動作も シグナリング/TURN/SFU含めて確認済み ?SkyWayを構成するサーバは全て冗?化 ?負荷に応じてスケールアウト、 12 Factor Appsや、Infrastructure as Code などの ベストプラクティスに沿って開発
- 86. 5. その他 細かいトピック
- 87. 厂顿碍対応状况
- 88. 厂顿碍対応状况: 4種類に対応
- 89. JavaScript SDKについての補?① ?JavaScript SDKの対応状況補? ?P2P: Chrome / Firefox / Safari / Edge ?SFU: Chrome / Firefox 徐々に追加対応を増やす予定 (e.g. SFU: Safari)
- 90. JavaScript SDKについての補?② ?npmを利? ?CDNを利? $ npm install -s skyway-js //cdn.webrtc.ecl.ntt.com/skyway-latest.js
- 91. iOS SDKについての補?① ?iOS SDKの対応状況補? ?iOS 8+ ?Objective-C / Swiftのサンプルコード公開中
- 92. iOS SDKについての補?② ?CocoaPodsからインストール可能 注：SkyWay-iOS-SDK は 旧厂顿碍なのでご注意を！
- 93. Android SDKについての補?① ?Android SDKの対応状況補? ?Android 4.2+ (API Level 17+) ?kotlinのサンプルコードも増やす予定
- 94. 画?共有
- 95. 画?共有① ?Chrome / Firefox 向けにライブラリを提供 ?Chromeはホワイトリスト?式のため要Extension ?Firefoxはプラグインが不要
- 97. 认証
- 103. 认証フロー ユーザ側 认証Server 1. Peer IDと任意の情報 (e.g. トークンやパスワード)を送信 クライアント
- 104. 认証フロー ユーザ側 认証Server 1. Peer IDと任意の情報 (e.g. トークンやパスワード)を送信 クライアント 2. 送信された情報が 正しいか確認
- 105. 认証フロー ユーザ側 认証Server 1. Peer IDと任意の情報 (e.g. トークンやパスワード)を送信 クライアント 2. 送信された情報が 正しいか確認 3. シークレットキー、 タイムスタンプなどを 活?して认証トークン?成※ ※ https://github.com/skyway/skyway-peer-authentication-samples で?成ロジック?参考実装を複数?語で?意済み。
- 106. 认証フロー ユーザ側 认証Server 1. Peer IDと任意の情報 (e.g. トークンやパスワード)を送信 クライアント 2. 送信された情報が 正しいか確認 3. シークレットキー、 タイムスタンプなどを 活?して认証トークン?成 4. 认証トークンなどを返信
- 107. 认証フロー ユーザ側 认証Server 1. Peer IDと任意の情報 (e.g. トークンやパスワード)を送信 クライアント 2. 送信された情報が 正しいか確認 3. シークレットキー、 タイムスタンプなどを 活?して认証トークン?成 4. 认証トークンなどを返信 5. 取得した认証トークンを オプション付与してnew Peer()実?
- 108. 认証フロー ユーザ側 认証Server 1. Peer IDと任意の情報 (e.g. トークンやパスワード)を送信 クライアント 2. 送信された情報が 正しいか確認 3. シークレットキー、 タイムスタンプなどを 活?して认証トークン?成 4. 认証トークンなどを返信 5. 取得した认証トークンを オプション付与してnew Peer()実? 6. 认証トークンが 正しいか確認 突 合
- 111. 最后に