Multipeer connectivityを使った動画のリアルタイム端末間共有

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Multipeer Connectivityを使った
動画のリアルタイム端末間共有
料理動画撮影アプリの事例
いまじん #iOSDC #b

自己紹介
● 名前
○ いまじん, imajin, imjn, @mrimjn
● 所属
○ クックパッド株式会社
● つくっているもの
○ cookpadLive, cookpad studio, 個人開発

対象
● Multipeer Connectivity ってなんですかという人
● Multipeer Connectivity の実用例が知りたい人
● Peer-to-Peer のアプリを何かつくってみたいと思っている人

今日はなすこと
実際の利用事例を通じてMultipeer Connectivityを紹介
● 事例の紹介
● 実際の実装をみていく
○ 接続
○ 送受信
● まとめ

cookpad studio について

cookpad studio
料理動画を
誰でも簡単に
撮影して編集できる

cookpad studioの要件
● 手元と撮影用に2台の端末を連携
● 撮影端末を手元の端末で操作できる
● 手元の端末で撮影の様子を確認できる
● 撮影端末から動画の編集をする端末に
動画ファイルを転送できる
● ネットワーク環境がない場...

候補
● iBeacon
● Core Bluetooth
● Multipeer Connectivity

候補
● iBeacon
● Core Bluetooth
● Multipeer Connectivity

● 2013年のWWDCで公開された標準のフレームワーク
● iOS 7で導入
○ AirDropと同じタイミングで発表
● Bluetooth + WiFiを使ったローカル通信
● 高レベルなAPIが用意されていて実装が比較的簡単
● 大きな...

● 稀に不安定になったりする
● Apple familyのDeviceでしか使えない
● バックグラウンドでは使えない
● スループットは3-4MB/s程度 (非公式)
注意ポイント

studioの実装をみていく

studioの実装をみていく
● 2台の端末の接続
● 撮影中のデータのやりとり
● 撮影終了後のデータのやりとり

接続で使う主なclass
● MCPeerID
○ Peerを識別するID
● 探索側
○ MCNearbyServiceBrowser
○ MCBrowserViewController (必要なUIも提供してくれる)
● 受信側
○ MCN...

Bonjour
● zero-conﬁguration networking
● デバイスやサービスが同じネットワーク上
で互いを検出できる
● Bonjourを使うためにはinfo.plistに設定が
必要 (iOS 14)
○ Privac...

デバイスを探す
let mcBrowser: MCNearbyServiceBrowser
mcBrowser = MCNearbyServiceBrowser(peer: myPeerID, serviceType:
cookpad-stud...

見つけてもらう
let mcAdvertiser: MCNearbyServiceAdvertiser
let identifier = UIDevice.current.identifierForVendor?.uuidString ?? "...

リクエストを送る
mcBrowser.invitePeer(peerIDToInvite.peerID, to: mcSession, withContext: nil, timeout:
20)

リクエストを承認する
func advertiser(_ advertiser: MCNearbyServiceAdvertiser, didReceiveInvitationFromPeer peerID: MCPeerID, withCon...

接続できた
func connect(peerToConnect: MCPeerID, invitationHandler: @escaping (Bool,
MCSession?) -> Void) {
invitationHandler(t...

撮影中のデータのやりとり

MCには3つのデータ送信手段がある
● message-based
○ send(_:toPeers:with:)
■ Data型に格納したメッセージを送信
○ sendResource(at:withName:toPeer:withCompl...

studioで撮影中にやりとりが必要なもの
● 再生・停止などのコマンド
○ send(_:toPeers:with:)
● ライブプレビュー
○ send(_:toPeers:with:)
● 動画ファイル
○ sendResource(at...

コマンドを定義
互いが解釈できる操作をコマ
ンド(Kind)として定義
接続端末は受け取ったコマン
ドに応じて処理を行う
enum Kind: Codable {
case cameraPreview(Data)
case command(ty...

操作コマンドの送信
カメラ切り替え、撮影開始・停止・終了、ホワイトバランスやコントラストなどの調整、
ping、撮影準備
完了...
func sendCommand(type: RemoteControlData.Kind.CommandTy...

ライブプレビューの送信
高速のパラパラ漫画を動かしているような実装
受け取る側はUIImageに変換してUIImageViewにセット
func sendCameraPreview(imageData: Data) throws {
let d...

撮影完了後のデータのやりとり

動画ファイルの送信
func sendResource(resourceURL: URL, fileID: UUID, complitionHandler: ((Error?) -> Void)?) ->
Progress? {
guard l...

動画ファイルの受信
func session(_ session: MCSession, didStartReceivingResourceWithName resourceName: String, fromPeer peerID:
MCPe...

DEKITA！

最近困っていること

最近の困り①
長時間プレビューをしていたらモッサリしてくる
確かに手元で再現できた

状況を知る
プレビューでは大体1.0MB/s弱のデータを送受信している
スループットは~4MB/s程度ありそうなので問題ないはず

もしかして他に原因があるんじゃないの...
● Multipeer Connectivityという物珍しいフレームワークに
引っ張られて他の部分をあまり見れていなかった
● Encode・Decodeの部分やUIの描画部分を見直す予定

最近の困り②
● studioでは撮影を停止したらすぐ動画ファイルの送信を開
始
● プレビューがカクカクしたり遅延する問題や動画の送信が一
向に終わらない事象が発生したと報告

最近の困り②
● プレビューがカクカクしたり遅延する問題や、動画の送信が
一向に終わらない事象が発生したと報告
● studioでは撮影を停止したらすぐ動画ファイルの送信を開
始
○ プレビューの送信と動画ファイルの送信を同時にやると
厳しい....

状況
プレビューのみのときは1MB/s 弱
動画ファイルの転送も同時にすると4MB/s程度出ている

状況
● プレビューのみのときは1MB/s 弱
● 動画ファイルの転送も同時にすると4MB/s程度出てる
という事実から安直に推理すると動画ファイルの転送
(sendResource)のMAXが3MB/s程度なのではないか！
send()とse...

sendResourceの上限を知りたい
サンプルアプリつくって大きな動画ファイルを送信してみた
スループットは1弱-2MB/sで推移

sendResourceの上限を知りたい
3MB/s出ないじゃん。

sendResourceの上限を知りたい
3MB/s出ないじゃん。
なんもわからん。

sendResourceの上限を知りたい
3MB/s出ないじゃん。
なんもわからん。
そしてタイムオーバー。

仕様で解決
結局送信量がMultipeer Connectivityの限界に達したのかはき
ちんと確認できず...
撮影停止後にすぐ送信するのではなく、撮影が終了した後にま
とめて送るようにした。

仕様で解決
→ 今回は仕様で解決してしまった...
これもMultipeer Connectivity関係ない説をこれから調べる。

仕様で解決したあとの様子がこれ
撮影終了後に、プレビューは停止した状態で動画ファイルの転
送を行っている(~3MB/s)。

デバッグむずかしい
● カクツキや遅延が発生したユーザーの端末のそれぞれの
状況を正確に把握・再現できない
● 実機検証するときには端末が複数必要
○ ビルドめんどくさい
● Instrumentsをあまり使いこなせてないので
うまく使えるよう...

Multipeer Connectivity まとめ

Multipeer Connectivityまとめ
● 高レベルなAPIが用意されていて結構簡単にPeer-to-Peer
通信が実装できる
● 通信のスループットは最大3-4MB程度
○ こちら何か情報があれば教えてください🙏
● Apple...

Make everyday cooking fun! 🍳
Thank You!
@mrimjn

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1031532 views
Storytelling For The Web: Integrate... by Chiara Aliotta 942577 views
Artificial Intelligence, Data and C... by OECD Directorate ... 861630 views
How to Leverage AI to Boost Employe... by SocialHRCamp 361199 views
2024 State of Marketing Report – by... by Marius Sescu 205359 views
Everything You Need To Know About C... by Expeed Software 226150 views

View on Slideshare

1 of 52 Ad

View on Slideshare

1 of 52 Ad