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

Transcript

1. Multipeer Connectivityを使った 動画のリアルタイム端末間共有 料理動画撮影アプリの事例 いまじん #iOSDC #b
2. 自己紹介 • 名前 ◦ いまじん, imajin, imjn, @mrimjn • 所属 ◦ クックパッド株式会社 • つくっているもの ◦ cookpadLive, cookpad studio, 個人開発
3. 対象 • Multipeer Connectivity ってなんですかという人 • Multipeer Connectivity の実用例が知りたい人 • Peer-to-Peer のアプリを何かつくってみたいと思っている人
4. 今日はなすこと 実際の利用事例を通じてMultipeer Connectivityを紹介 • 事例の紹介 • 実際の実装をみていく ◦ 接続 ◦ 送受信 • まとめ
5. cookpad studio について
6. cookpad studio 料理動画を 誰でも簡単に 撮影して編集できる
7. cookpad studioの要件 • 手元と撮影用に2台の端末を連携 • 撮影端末を手元の端末で操作できる • 手元の端末で撮影の様子を確認できる • 撮影端末から動画の編集をする端末に 動画ファイルを転送できる • ネットワーク環境がない場所でも使える
8. 候補 • iBeacon • Core Bluetooth • Multipeer Connectivity
9. 候補 • iBeacon • Core Bluetooth • Multipeer Connectivity
10. • 2013年のWWDCで公開された標準のフレームワーク • iOS 7で導入 ◦ AirDropと同じタイミングで発表 • Bluetooth + WiFiを使ったローカル通信 • 高レベルなAPIが用意されていて実装が比較的簡単 • 大きなファイル転送やストリーミングが可能 Multipeer Connectivity について https://developer.apple.com/documentation/multipeerconnectivity
11. • 稀に不安定になったりする • Apple familyのDeviceでしか使えない • バックグラウンドでは使えない • スループットは3-4MB/s程度 (非公式) 注意ポイント
12. studioの実装をみていく
13. studioの実装をみていく • 2台の端末の接続 • 撮影中のデータのやりとり • 撮影終了後のデータのやりとり
14. 接続
15. 接続で使う主なclass • MCPeerID ◦ Peerを識別するID • 探索側 ◦ MCNearbyServiceBrowser ◦ MCBrowserViewController (必要なUIも提供してくれる) • 受信側 ◦ MCNearbyServiceAdvertiser ◦ MCAdvertiserAssistant (必要なUIも提供してくれる)
16. Bonjour • zero-configuration networking • デバイスやサービスが同じネットワーク上 で互いを検出できる • Bonjourを使うためにはinfo.plistに設定が 必要 (iOS 14) ◦ Privacy - Local Network Usage Description ◦ Bonjour services https://developer.apple.com/bonjour/ https://developer.apple.com/forums/thread/659563
17. デバイスを探す let mcBrowser: MCNearbyServiceBrowser mcBrowser = MCNearbyServiceBrowser(peer: myPeerID, serviceType: cookpad-studio-camera") mcBrowser.startBrowsingForPeers() • MCNearbyServiceBrowserを使用 ◦ 独自のUIを組むため
18. 見つけてもらう let mcAdvertiser: MCNearbyServiceAdvertiser let identifier = UIDevice.current.identifierForVendor?.uuidString ?? "N/A" mcAdvertiser = MCNearbyServiceAdvertiser( peer: myPeer.peerID, discoveryInfo: [ "modelName" : Device.current.safeDescription, "identifier" : identifier ], serviceType: "cookpad-studio-camera" ) mcAdvertiser.startAdvertisingPeer()
19. リクエストを送る mcBrowser.invitePeer(peerIDToInvite.peerID, to: mcSession, withContext: nil, timeout: 20)
20. リクエストを承認する func advertiser(_ advertiser: MCNearbyServiceAdvertiser, didReceiveInvitationFromPeer peerID: MCPeerID, withContext context: Data?, invitationHandler: @escaping (Bool, MCSession?) -> Void) { let viewControllerToPresentAlert = UIApplication.shared.topViewController() let confirmationDialog = prepareConfirmationDialog(for: peerID, invitationHandler: invitationHandler) // confirmationDialog↑の 中で接続の許可をinvitationHandlerに返しています DispatchQueue.main.async { viewControllerToPresentAlert?.present(confirmationDialog, animated: true, completion: nil) } }
21. 接続できた func connect(peerToConnect: MCPeerID, invitationHandler: @escaping (Bool, MCSession?) -> Void) { invitationHandler(true, mcSession) // このMCSessionを使ってデータのやり取りをする }
22. 撮影中のデータのやりとり
23. MCには3つのデータ送信手段がある • message-based ◦ send(_:toPeers:with:) ▪ Data型に格納したメッセージを送信 ◦ sendResource(at:withName:toPeer:withCompletionH andler:) ▪ URLコンテンツを送信 • stream-based ◦ startStream(withName:toPeer:) ▪ ストリームをオープン
24. studioで撮影中にやりとりが必要なもの • 再生・停止などのコマンド ◦ send(_:toPeers:with:) • ライブプレビュー ◦ send(_:toPeers:with:) • 動画ファイル ◦ sendResource(at:withName:toPeer:withCompletionH andler:)
25. コマンドを定義 互いが解釈できる操作をコマ ンド(Kind)として定義 接続端末は受け取ったコマン ドに応じて処理を行う enum Kind: Codable { case cameraPreview(Data) case command(type: CommandType) enum CommandType: Codable { case presentRemoteController(ProjectInfo?) case switchCamera case whilebalanceValueChanged(Float) case contrastValueChanged(Float) case shadowValueChanged(Float) case cameraIsReady(Bool) case didTapRecordButton case didStartRecording case didStopRecording struct RemoteControlData: Codable {
26. 操作コマンドの送信 カメラ切り替え、撮影開始・停止・終了、ホワイトバランスやコントラストなどの調整、 ping、撮影準備 完了... func sendCommand(type: RemoteControlData.Kind.CommandType) throws { let data = RemoteControlData(kind: .command(type: type)) try mcSession.send( JSONEncoder().encode(data), // 受け取り側ではこれをdecodeしてハンドリングする toPeers: [connectedPeer.peerID], with: .reliable // MCSessionSendDataMode UDP(unreliable)かTCP(reliable)かを設定できる ) }
27. ライブプレビューの送信 高速のパラパラ漫画を動かしているような実装 受け取る側はUIImageに変換してUIImageViewにセット func sendCameraPreview(imageData: Data) throws { let data = RemoteControlData(kind: .cameraPreview(imageData)) try mcSession.sendData(connectorData: data, reliability: .unreliable) // 順序や送信の保証の必要はないため .unreliableとして いる } func captureOutput(_ output: AVCaptureOutput, didOutput sampleBuffer: CMSampleBuffer, from connection: AVCaptureConnection) { let imageData = // ここでコネコネしてsampleBufferからimageDataを生成する try? sendCameraPreview(imageData: imageData) }
28. 撮影完了後のデータのやりとり
29. 動画ファイルの送信 func sendResource(resourceURL: URL, fileID: UUID, complitionHandler: ((Error?) -> Void)?) -> Progress? { guard let connectedPeer = connectedPeer else { assertionFailure("connectedPeer must not be nil") return nil } let progress = mcSession.sendResource( at: resourceURL, // 端末に保存された動画の URL withName: fileID.uuidString, toPeer: connectedPeer.peerID, withCompletionHandler: complitionHandler ) return progress // UIProgressViewの表示に使っている }
30. 動画ファイルの受信 func session(_ session: MCSession, didStartReceivingResourceWithName resourceName: String, fromPeer peerID: MCPeerID, with progress: Progress) func session(_ session: MCSession, didFinishReceivingResourceWithName resourceName: String, fromPeer peerID: MCPeerID, at localURL: URL?, withError error: Error?) 受信開始時に呼ばれるメソッド。受信側ではこの progressをUIProgressViewに使っている。 受信完了時に呼ばれるメソッド。 error時のハンドリングなども可能。
31. DEKITA！
32. 最近困っていること
33. 最近の困り① 長時間プレビューをしていたらモッサリしてくる 確かに手元で再現できた
34. 状況を知る プレビューでは大体1.0MB/s弱のデータを送受信している スループットは~4MB/s程度ありそうなので問題ないはず
35. もしかして他に原因があるんじゃないの... • Multipeer Connectivityという物珍しいフレームワークに 引っ張られて他の部分をあまり見れていなかった • Encode・Decodeの部分やUIの描画部分を見直す予定
36. 最近の困り② • studioでは撮影を停止したらすぐ動画ファイルの送信を開 始 • プレビューがカクカクしたり遅延する問題や動画の送信が一 向に終わらない事象が発生したと報告
37. 最近の困り② • プレビューがカクカクしたり遅延する問題や、動画の送信が 一向に終わらない事象が発生したと報告 • studioでは撮影を停止したらすぐ動画ファイルの送信を開 始 ◦ プレビューの送信と動画ファイルの送信を同時にやると 厳しい...？
38. 状況 プレビューのみのときは1MB/s 弱 動画ファイルの転送も同時にすると4MB/s程度出ている
39. 状況 • プレビューのみのときは1MB/s 弱 • 動画ファイルの転送も同時にすると4MB/s程度出てる という事実から安直に推理すると動画ファイルの転送 (sendResource)のMAXが3MB/s程度なのではないか！ send()とsendResource()のスループットがそれぞれ独立してい るのか、一緒になっているのかわからん。
40. sendResourceの上限を知りたい サンプルアプリつくって大きな動画ファイルを送信してみた スループットは1弱-2MB/sで推移
41. sendResourceの上限を知りたい 3MB/s出ないじゃん。
42. sendResourceの上限を知りたい 3MB/s出ないじゃん。 なんもわからん。
43. sendResourceの上限を知りたい 3MB/s出ないじゃん。 なんもわからん。 そしてタイムオーバー。
44. 仕様で解決 結局送信量がMultipeer Connectivityの限界に達したのかはき ちんと確認できず... 撮影停止後にすぐ送信するのではなく、撮影が終了した後にま とめて送るようにした。
46. 仕様で解決 → 今回は仕様で解決してしまった... これもMultipeer Connectivity関係ない説をこれから調べる。
47. 仕様で解決したあとの様子がこれ 撮影終了後に、プレビューは停止した状態で動画ファイルの転 送を行っている(~3MB/s)。
48. デバッグむずかしい • カクツキや遅延が発生したユーザーの端末のそれぞれの 状況を正確に把握・再現できない • 実機検証するときには端末が複数必要 ◦ ビルドめんどくさい • Instrumentsをあまり使いこなせてないので うまく使えるようになりたい
49. Multipeer Connectivity まとめ
50. Multipeer Connectivityまとめ • 高レベルなAPIが用意されていて結構簡単にPeer-to-Peer 通信が実装できる • 通信のスループットは最大3-4MB程度 ◦ こちら何か情報があれば教えてください🙏 • Apple Watchとの連携のためのWatch Connectivityという のもある (別物) なにかつくって遊んでみてください〜
51. 🙏
52. Make everyday cooking fun! 🍳 Thank You! @mrimjn