iOSDC2021で使った資料です

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