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

SkyWay で
ビデオチャットサービス
を構築してみた！
澤井　友恵
@tomoeine

今日話すこと
● ビデオチャットサービス構築の背景
● WebRTC とは？
● SkyWay とは？
● SkyWay でビデオチャットサービスを構築
● デモはなし（宣言）

自己紹介
フリーランスWebエンジニア
澤井友恵　@tomoeine
● 宮崎の山の中でリモートワーク
● 東京生まれ・宮崎移住
● SIer → Web系に転身した人
● Laravel, Vue.js, Ruby on Rails, AWS 等
● 2018年6月〜フルリモートでフリーランス

構築の背景

ビデオチャットサービス構築の背景
● ４月の緊急事態宣言を受けて
リモートワークが広がった
● これまで、一部の業務では対面が前提になって
いたが、リモートで代替する手段を提供したい
（というプロダクトオーナーからの要望）

● 自社サービスのデータを画面共有するなど、
よりシームレスで使いやすいUXを提供したい
● 企業向けのサービスのため、
会社PCにZoomアプリのインストールができない
可能性がある
どうしてZoomじゃダメなの？

WebRTC の仕組み
P2P(Peer to Peer) で映像や音声を交換する仕組み
P2Pの確立
ICEサーバー

ICEサーバーとは？
略
よくわかってない・・・😇

SkyWay の特長
・無料で始められる
・専用の JS SDK やネイティブアプリのSDKを提供
・ICEサーバーをSaaSで提供
WebRTC SDK + API プラットフォーム
・日本語のサポート・ドキュメントが充実！

SkyWayを使うと・・・
P2P(Peer to Peer) で映像や音声を交換する仕組み
P2Pの確立
ICEサーバー
SkyWay

ビデオチャットの実装方法比較
独立サービス系：Zoom、Whereby など
フルスクラッチ系：ICE サーバーも含めた、WebRTC の自前実装
クラウドサービス系：SkyWay（後述）、OpenTok など

実装の留意点（WebRTCの仕様上）
● スマートフォンのブラウザでは使えない
（ネイティブアプリ向けのSDKが別途提供されている）
● IE非対応
● 画面共有機能は、Safari非対応

SkyWay でビデオチャット
サービスを構築

JavaScript 処理の大まかな流れ（簡略化しています）
SkyWay
①peer を作る ②peer を作る
① peer ID をユーザー
情報に紐付け
③ Aさんのpeer IDを
問い合わせる
④ Aさんのpeer IDに
call する
⑤ Bさんからの call を
受信したら、応答する
自前サービスのバックエンド
Peer 接続❤
Aさん
Bさん

アカウント＆アプリケーション登録
https://webrtc.ecl.ntt.com/

アカウント＆アプリケーション登録

HTMLの準備
←自分の映像
←相手の映像

自分のカメラ映像の取得・再生
↓WebRTCで重要なやつ

JS SDK を読み込んで peer を作る

着信に応答する（Aさん）

まとめ・感想
● チュートリアル動かすだけなら半日でできた
● リリースまでも2週間ぐらいでできた
● とはいえ、JSのコードは結構たくさん書いた
（SkyWayというより、WebRTCの仕様的に仕方ないと思っている）
● 自分でコード書いてビデオチャット機能作れる
のは結構楽しかった

ご清聴ありがとうございました！
澤井　友恵
@tomoeine
SkyWay で
を構築してみた！

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

Similaire à SkyWay でビデオチャットサービスを構築してみた！ (20)

Plus de Tomoe Sawai

Plus de Tomoe Sawai (17)

Dernier

Dernier (8)