Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

SkyWay で ビデオチャットサービス を構築してみた!

Webナイト宮崎での発表資料です

  • Als Erste(r) kommentieren

SkyWay で ビデオチャットサービス を構築してみた!

  1. 1. SkyWay で ビデオチャットサービス を構築してみた! 澤井 友恵 @tomoeine
  2. 2. 今日話すこと ● ビデオチャットサービス構築の背景 ● WebRTC とは? ● SkyWay とは? ● SkyWay でビデオチャットサービスを構築 ● デモはなし(宣言)
  3. 3. 自己紹介 フリーランスWebエンジニア 澤井友恵 @tomoeine ● 宮崎の山の中でリモートワーク ● 東京生まれ・宮崎移住 ● SIer → Web系に転身した人 ● Laravel, Vue.js, Ruby on Rails, AWS 等 ● 2018年6月〜 フルリモートでフリーランス
  4. 4. ビデオチャットサービス 構築の背景
  5. 5. ビデオチャットサービス構築の背景 ● 4月の緊急事態宣言を受けて リモートワークが広がった ● これまで、一部の業務では対面が前提になって いたが、リモートで代替する手段を提供したい (というプロダクトオーナーからの要望)
  6. 6. ● 自社サービスのデータを画面共有するなど、 よりシームレスで使いやすいUXを提供したい ● 企業向けのサービスのため、 会社PCにZoomアプリのインストールができない 可能性がある どうしてZoomじゃダメなの?
  7. 7. WebRTCとは
  8. 8. WebRTC の仕組み P2P(Peer to Peer) で映像や音声を交換する仕組み P2Pの確立 ICEサーバー
  9. 9. ICEサーバーとは? 略 よくわかってない・・・😇
  10. 10. SkyWay とは?
  11. 11. SkyWay の特長 ・無料で始められる ・専用の JS SDK やネイティブアプリのSDKを提供 ・ICEサーバーをSaaSで提供 WebRTC SDK + API プラットフォーム ・日本語のサポート・ドキュメントが充実!
  12. 12. SkyWayを使うと・・・ P2P(Peer to Peer) で映像や音声を交換する仕組み P2Pの確立 ICEサーバー SkyWay
  13. 13. ビデオチャットの実装方法比較 独立サービス系:Zoom、Whereby など フルスクラッチ系:ICE サーバーも含めた、WebRTC の自前実装 クラウドサービス系:SkyWay(後述)、OpenTok など
  14. 14. 実装の留意点(WebRTCの仕様上) ● スマートフォンのブラウザでは使えない (ネイティブアプリ向けのSDKが別途提供されている) ● IE非対応 ● 画面共有機能は、Safari非対応
  15. 15. SkyWay でビデオチャット サービスを構築
  16. 16. JavaScript 処理の大まかな流れ(簡略化しています) SkyWay ①peer を作る ②peer を作る ① peer ID をユーザー 情報に紐付け ③ Aさんのpeer IDを 問い合わせる ④ Aさんのpeer IDに call する ⑤ Bさんからの call を 受信したら、応答する 自前サービスのバックエンド Peer 接続❤ Aさん Bさん
  17. 17. アカウント&アプリケーション登録 https://webrtc.ecl.ntt.com/
  18. 18. アカウント&アプリケーション登録
  19. 19. キーを控えておく
  20. 20. HTMLの準備 ←自分の映像 ←相手の映像
  21. 21. 自分のカメラ映像の取得・再生 ↓WebRTCで重要なやつ
  22. 22. JS SDK を読み込んで peer を作る
  23. 23. JS SDK を読み込んで peer を作る
  24. 24. 発信する(Bさん)
  25. 25. 着信に応答する(Aさん)
  26. 26. 実際にできたもの
  27. 27. まとめと感想
  28. 28. まとめ・感想 ● チュートリアル動かすだけなら半日でできた ● リリースまでも2週間ぐらいでできた ● とはいえ、JSのコードは結構たくさん書いた (SkyWayというより、WebRTCの仕様的に仕方ないと思っている) ● 自分でコード書いてビデオチャット機能作れる のは結構楽しかった
  29. 29. ご清聴ありがとうございました! 澤井 友恵 @tomoeine SkyWay で ビデオチャットサービス を構築してみた!

×