WebRTC映像をAirPlayに対応させる挑戦.pdf

iOSDC 2026の登壇
https://fortee.jp/iosdc-japan-2026/proposal/0c1ce951-7d39-4a90-bfa8-bd08b4c56cca

Transcript

1. WebRTC映像をAirPlayに対応させる挑戦 2026/09/11 iOSDC 2026 セーフィー株式会社 アプリケーション開発部 iOS エンジニア ヘンリーアダム
2. ⾃⼰紹介 aaaaa © Safie Inc.｜2
3. ⾃⼰紹介 Adam Henry(アダムヘンリー） • 2024年3⽉セーフィー⼊社 • iOS エンジニア • 2018, 2022, 2026 iOSDC Speaker @monolithic-adam @monolithic_adam © Safie Inc.｜3
4. Safie Viewer for iOS の紹介 Safie Viewer for iOS クラウド録画サービスSafie（セーフィー）は Safie Viewerでリアルタイム映像や過去の録画映 像を⾒ることができます。 • • • DAU 25,000前後 ストア評価 4.4 iOS 17.0+ ◦ • • 直近の 3 バージョンサポート ⽇本語/英語/タイ語/ベトナム語対応 WebRTC / HLSのハイブリッド動画再⽣に 対応 © Safie Inc.｜4
5. アジェンダ aaaaa © Safie Inc.｜5
6. アジェンダ • 外部ディスプレイに配信したい • 軽く今⽇話す技術の紹介 ◦ HLS ◦ WebRTC ◦ AirPlay • AirPlayに対応させる挑戦 • 成功したか‧仕様どこに落ち着いたか • まとめ © Safie Inc.｜6
7. 外部ディスプレイに配信したい aaaaa © Safie Inc.｜7
8. 外部ディスプレイに配信したい • 「現場の⼤画⾯モニターに映像を流したいユースケースは⼀定ある」→ AirPlay で簡単に⾶ば せたら嬉しい © Safie Inc.｜8
9. 技術紹介 aaaaa © Safie Inc.｜9
10. HLS • Appleが開発したProtocol • HTTP Live Streaming (HLS) は⼀般的な Web サーバーから HTTP 経由で⾳声や映像を配信する 技術です。 © Safie Inc.｜10
11. WebRTC • World Wide Web Consortium (W3C)が開発したProtocol • WebRTC（Web Real-Time Communication）は、プラグインや追加のソフトウェアを必要と せず、ブラウザやアプリケーション間で⾳声、映像、および任意のデータをユーザー同⼠が直 接、リアルタイムにやり取りできるプロトコル。 © Safie Inc.｜11
12. AirPlay • iOS 4, 2010年にリリースされました(Originally AirTunes) ◦ 画像‧映像‧オーディオをApple TV, スマートテレビなどに配信できる技術で す。 • iOS 11.4でAirPlay 2で複数台のスピーカー‧Apple TV同時に配信できる ようになったり、反応速度の改善あったりする © Safie Inc.｜12
13. 課題 aaaaa © Safie Inc.｜13
14. 課題 • Safie Viewer には2つの再⽣モードがある ◦ 通常モード: AVPlayer を利⽤して再⽣、 AVPlayerLayer に映像がレンダリングされる ◦ 低遅延モード: WebRTC を利⽤して再⽣、 RTCMTLVideoView に映像がレンダリングされる • HLS の場合はAudioSessionの.airplay設定とAVPlayer にて allowsExternalPlayback = true を 指定すると AirPlay に乗ってくれる • WebRTC はAVPlayerを通らないのでExternal Playback の⼊⼝がない © Safie Inc.｜14
15. 課題 © Safie Inc.｜15
16. 課題 • ここで⼀回⽴ち⽌まってどうやってできそうか © Safie Inc.｜16
17. 課題 © Safie Inc.｜17
18. フレーム変換 aaaaa © Safie Inc.｜18
19. AVSampleBufferDisplayLayer • AVFoundation 系レイヤーのAVSampleBufferDisplayLayerにWebRTC のフレームを流し込め ば、AirPlay に載せることはできるのかな？ © Safie Inc.｜19
20. RTCVideoTrackのRenderer • RTCVideoTrack.add()はRTCVideoRenderer何枚でも接続できる。 ◦ アプリの 3D デワープ機能が、カスタムレンダラーでフレームを受け取って Metal テクスチャ化してい る。 © Safie Inc.｜20
21. RTCVideoFrame → CVPixelBuffer: バッファは2形態ある © Safie Inc.｜21
22. CMSampleBuffer 化 © Safie Inc.｜22
23. displayImmediately の設定 © Safie Inc.｜23
24. enqueue © Safie Inc.｜24
25. WebRTC のフレームは、AVFoundation の世界へ © Safie Inc.｜25
26. AirPlay State判定 • © Safie Inc.｜26
27. 切り替え • © Safie Inc.｜27
28. AirPlay State判定 • © Safie Inc.｜28
29. パフォーマンス © Safie Inc.｜29
30. フレーム変換全体図 • © Safie Inc.｜30
31. ということで。。。 aaaaa © Safie Inc.｜31
32. 失敗 © Safie Inc.｜32
33. 今後 aaaaa © Safie Inc.｜33
34. 代替案 • 現実的な範囲でベストな代替案を、ユーザー体験を考えて４つの案が出てきました ◦ Screen Mirroring ◦ Second Screen ◦ HLS Bridge ◦ HLS Fallback © Safie Inc.｜34
35. Screen Mirroring © Safie Inc.｜35
36. Screen Mirroring © Safie Inc.｜36
37. Second Screen © Safie Inc.｜37
38. Second Screen © Safie Inc.｜38
39. HLS Bridge © Safie Inc.｜39
40. HLS Bridge © Safie Inc.｜40
41. HLS Fallback © Safie Inc.｜41
42. HLS Fallback © Safie Inc.｜42
43. 外部ディスプレイ対応 © Safie Inc.｜43
44. まとめ aaaaa © Safie Inc.｜44
45. まとめ • HLS対応するにはAudioSessionの設定とallowsExternalPlaybackさえ設定すれば簡単に AirPlay対応できる • • WebRTC映像をAirPlayに対応まで持っていけなかったです ◦ 映像を取り出せる⽅法を⾒つかったが、AirPlayまで載せる⽅法はなかった。。。 ◦ 挑戦のおかげでちょっとAVFoundation/AirPlay周り詳しくなりました 現実的な代替としては「AirPlay 中だけ HLS に切り替える」案が最有⼒(導⼊は今後の判断) © Safie Inc.｜45
46. 参考資料 • https://developer.apple.com/documentation/avfoundation/integrating-airplay-for-long-f orm-video-apps • https://developer.apple.com/library/archive/referencelibrary/GettingStarted/AboutHTTP LiveStreaming/about/about.html • https://developer.apple.com/documentation/avfoundation/avsamplebufferdisplaylayer • https://developer.apple.com/documentation/avfoundation/avplayer/allowsexternalplay back • https://developer.apple.com/documentation/avfaudio/avaudiosession/routesharingpoli cy-swift.enum/longformaudio • https://webrtc.googlesource.com/src/ © Safie Inc.｜46
47. ご清聴ありがとうございました Thank you! © Safie Inc.｜47
48. We are hiring! © Safie Inc.｜48