読者です 読者をやめる 読者になる 読者になる

#iosdc 2016 A-8 iOSアプリのリモートサポートツール「ミレタ」の作り方 #WebRTC #Swift #PrivatePod

twitter.com

B2Bアプリではサポートが大事です。トレタでは24H/365Dのサポートを行っていますが、電話だけでは相手の状況が分からず困難です。そこでアプリの画面をリモートから見ること、相手の画面に手書きする事のできる「ミレタ」を開発し搭載しました。このシステムはCocoaPodsにしてあり導入が数行で行えること、またまだ導入事例の少ないWebRTCを採用しており技術的にも面白い内容になっています。

iosdc.jp

iOSアプリのリモートサポートツール「ミレタ」の作り方

f:id:niwatako:20160820145553j:plain

f:id:niwatako:20160820145606j:plain

f:id:niwatako:20160820145611j:plain

f:id:niwatako:20160820145619j:plain

f:id:niwatako:20160820145625j:plain

サーバーサイドやっていますがSwiftもくもく会をやったりしています。

f:id:niwatako:20160820145641j:plain

こうした中で作ったツールをご紹介します。

f:id:niwatako:20160820145657j:plain

f:id:niwatako:20160820145703j:plain

f:id:niwatako:20160820145729j:plain

バイスの画面をリモートでブラウザから見られるツール。

f:id:niwatako:20160820145800j:plain

手書きで指示をしたり出来る。

f:id:niwatako:20160820145825j:plain

設定やOSのバージョンも確認できる。

f:id:niwatako:20160820145844j:plain

f:id:niwatako:20160820145910j:plain

WebRTCプロトコルでつながっています。聞いたことあったとしてもビデオ用として聞いたことがあるのではないでしょうか。ブラウザP2P通信技術。

f:id:niwatako:20160820145951j:plain

f:id:niwatako:20160820145954j:plain

WebKitでも開発が進んでいる。

なんとネイティブSDKがある。

f:id:niwatako:20160820150018j:plain

ファイルなどのビットストリームのやり取りも出来る。ブラウザからドラッグアンドドロップiOSにファイル送信なども出来る。

f:id:niwatako:20160820150058j:plain

問題はどうやって相手のIPアドレスを知るか。

f:id:niwatako:20160820150121j:plain

間にIP交換サーバーを用意する。そしてファイアウォールに穴を開けるためにSTUNを使う。ファイアウォールに一時的に特定の間だけ穴を開けてP2P接続する。

f:id:niwatako:20160820150207j:plain

STUN・シグナリングサーバーとSDKをなんとNTTが用意してくれている!

f:id:niwatako:20160820150216j:plain

f:id:niwatako:20160820150243j:plain

最短これぐらいでP2P通信が出来る。

もう仕組みがわかったと思います。

f:id:niwatako:20160820150301j:plain

2秒に1回ぐらいスクリーンショットを撮って送っている。ブラウザはキャンバスでスクリーンショットPNGで送って、iOSに送って上に描画している。

でもセキュリティなどは考える必要がある

f:id:niwatako:20160820150350j:plain

f:id:niwatako:20160820150444j:plain

Peer ID を交換して Connect を押すことでセッションを開始する。

f:id:niwatako:20160820150519j:plain

f:id:niwatako:20160820150601j:plain

f:id:niwatako:20160820150627j:plain

f:id:niwatako:20160820150732j:plain

f:id:niwatako:20160820150734j:plain

f:id:niwatako:20160820150747j:plain

f:id:niwatako:20160820150813j:plain

中継サーバーを通すとレイテンシーが大きくなる。WebRTCを使えばレイテンシーが少ない。

WebRTCを使うとiOS, Android, ブラウザ間で直接データのやり取りができるので、何か皆さんが作るきっかけになれば良いなと思います。

f:id:niwatako:20160820150936j:plain

TORETAではこういうことに挑戦しています。

f:id:niwatako:20160820151020j:plain