猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam

Mobile Act OSAKA 16
https://mobileact.connpass.com/event/358331/

iOSアプリでGoogle Nest CamにWebRTC接続
https://yutailang0119.hatenablog.com/entry/2025/07/04/100000

Transcript

1. 猫と暮らす Google Nest Cam生活 🐈 id:yutailang0119 / @yutailang0119 2025/07/04 Mobile Act Osaka 16 1
2. yutailang0119 • 世話係 (飼い主) • 株式会社はてな ◦ @京都オフィス ◦ アプリケーションエンジニア ◦ サービスプラットフォームチーム • try! Swift Tokyo Organizer • AVP座談会 🥽 2
3. ビビ • 本日の主役 • yutailang0119の飼い猫 • 茶トラ • オス • 10歳 (推定) ◦ 元野良猫 (保護) • 好きなもの ◦ ごはん、おやつ ◦ ひなたぼっこ 3
4. 4 猫がやってきた
5. 猫がやって来た • 2023年2月の引っ越しから、ビビとの暮らし がスタート ◦ 動物との生活が初めて • 外出中も様子を見れないと心配 5
6. 6 ネットワークカメラ (ペットカメラ) を 導入しよう
7. ネットワークカメラ 7 • Google Nest Cam • Ring (Amazon) • SwitchBot • and more…
8. ネットワークカメラ 8 • 用途は様々 ◦ 見守り、防犯、屋内外 • アピールポイントが各社それぞれある
9. Google Nest Cam （屋内用 / 電源アダプター式） • Google Homeに連携 ◦ アプリ ◦ Web • Google Nest Aware ◦ サブスクリプションプラン ◦ 無課金は3時間以内の履歴 • (屋内、屋外対応 / バッテリー 式)もある • APIが提供されている 9 https://store.google.com/jp/product/nest_cam_indoor?hl=ja
10. Google Nest Cam 10 • Google Homeアプリは便利 ◦ macOSでアプリがない不便さはある • APIがあるので、自由に拡張できる
11. 11 Google Nest Camに WebRTC接続しよう
12. 話すこと 12 1. Google Cloud OAuth 2.0 2. Smart Device Management API 3. WebRTC
13. 13 1. Google Cloud OAuth 2.0
14. Google Cloud OAuth 2.0 • APIの認証にGoogle Cloudを経由 • Google Cloudのプロジェクトを作成 • Smart Device Management APIを有効化 • OAuth 2.0 Client IDの作成 ◦ OAuthクライアントにiOSを選択 ◦ Bundle IDを入力 14
16. 16 2. Smart Device Management API
17. Smart Device Management API • SDM API ◦ smartdevicemanagement.googleapis.com • Nestデバイスにアクセス、操作、管理 ◦ Thermostat、Cam、Doorbell、Hub Max • 登録料 US$5+tax が必要 17
18. Smart Device Management API • Device Access Consoleでプロジェクト作成 ◦ https://developers.google.com/nest/device-access • Google CloudのOAuth client IDを設定 18
19. 19 Google Sign-In (iOS)
20. Google Sign-In • google/GoogleSignIn-iOS ◦ https://github.com/google/GoogleSignIn-iOS • Info.plistの設定 ◦ GIDClientID ◦ CFBundleURLSchemes 20
21. Google Sign-In • google/GoogleSignIn-iOS ◦ https://github.com/google/GoogleSignIn-iOS • Info.plistの設定 ◦ GIDClientID ◦ CFBundleURLSchemes 21 import GoogleSignIn Task { let result = try await GIDSignIn.sharedInstance.signIn( withPresenting: UIViewController, hint: String?, additionalScopes: ["https://www.googleapis.com/auth/sdm.service"] ) }
23. e.g. enterprises.devices.list • google/GoogleSignIn-iOS ◦ https://github.com/google/GoogleSignIn-iOS • Info.plistの設定 ◦ GIDClientID ◦ CFBundleURLSchemes 23 import GoogleSignIn Task { let user = try await GIDSignIn.sharedInstance.restorePreviousSignIn() let token = user.accessToken.tokenString let url = "https://smartdevicemanagement.googleapis.com/v1/enterprises/\(id)/devices" var request = URLRequest(url: URL(string: url)!) request.httpMethod = "GET” request.setValue("Bearer \(token)”, forHTTPHeaderField: "Authorizaton”) request.setValue("application/json”, forHTTPHeaderField: "Content-Type”) let (data, response) = try await URLSession.shared.data(for: request) }
24. e.g. enterprises.devices.list • google/GoogleSignIn-iOS ◦ https://github.com/google/GoogleSignIn-iOS • Info.plistの設定 ◦ GIDClientID ◦ CFBundleURLSchemes 24 { "devices": [ { "name": "enterprises/.../devices/...", "type": "sdm.devices.types.CAMERA", "assignee": "enterprises/.../structures/...", "traits": { "sdm.devices.traits.Info": { "customName": "..." }, "sdm.devices.traits.CameraLiveStream": {"videoCodecs": ["H264"], "audioCodecs": ["OPUS"], "supportedProtocols": ["WEB_RTC"]}, "sdm.devices.traits.CameraPerson": {}, "sdm.devices.traits.CameraMotion": {} }, "parentRelations": [ { "parent": "enterprises/.../structures/...", "displayName": "..." } ] }, ... ] }
25. 25 3. WebRTC
26. WebRTC • Web Real-Time Communication • https://webrtc.org ◦ > It supports video, voice, and generic data to be sent between peers • MDN Web Docsが詳しい ◦ https://developer.mozilla.org/en-US/docs/Web/ API/WebRTC_API 26
27. WebRTC (iOS) • モバイル向けの公式バイナリは配布停止 • ① 自身でコンパイル ◦ https://webrtc.googlesource.com/src • ② stasel/WebRTC を使う ◦ https://github.com/stasel/WebRTC 27
28. WebRTC接続手順 1. RTCPeerConnectionを作成 w/RTCDataChannel 2. SDP Offerを生成 3. SDM APIにSDP Offerを送信 sdm.devices.commands.CameraLiveStream.GenerateWebRtcStream 4. SDP Answerを受信 5. RTCPeerConnectionにSDP Answerを適用 28
30. 30 https://youtu.be/vcSExqtV0yQ
31. 31 まとめ
32. まとめ • Google CloudのOAuth 2.0を用意 • iOSアプリでGoogle Sign-In • Smart Device Management APIを実行 • WebRTCでGoogle Nest Camと接続 32
33. References • iOSアプリでGoogle Smart Device Management APIを使う (2025) ◦ https://yutailang0119.hatenablog.com/entry/2 025/01/19/180000 • iOSアプリでGoogle Nest CamにWebRTC接続 ◦ https://yutailang0119.hatenablog.com/entry/2 025/07/04/100000 33
34. 34 この先の拡張は iOSDC Japan 2025に プロポーザル応募中!!! https://iosdc.jp/2025/
35. iOSDC Japan 2025 • LT（5分） ◦ 猫と暮らすネットワークカメラ生活🐈 ~Vision.frameworkでペットを愛でよう~ ◦ https://fortee.jp/iosdc-japan-2025/proposal/292e2ec3-d74b-49a6-a8cb-63c2883d589e • レギュラートーク（20分） ◦ Vision.frameworkを活用したネットワークカメラの猫映像解析🐈 ◦ https://fortee.jp/iosdc-japan-2025/proposal/3e9de062-c08e-43ce-a82e-c832ad345424 35
36. 36 Advertisement
38. WWDC25 Recap - Japan-\(region).swift • 2025/07/06 ◦ https://japan-region-swift.connpass.com/event/353002/ • 大阪コミュニティ会場あります ◦ Osaka.swift ◦ https://osaka-swift.connpass.com/event/353736/ 38
39. 39 To Be Continued…