ソラカメとAmplifyでお手軽ライブカメラを作ってみた（制限あり） #ゆるWeb札幌

ゆるWeb勉強会@札幌 #24での発表資料
https://mild-web-sap.connpass.com/event/292535/

SORACOM社のソラカメの映像を、AWS Amplifyを使ってブラウザで閲覧できるようにした話。

Transcript

1. ソラカメとAmplifyで
   お手軽ライブカメラを
   作ってみた（制限あり）
   ゆるWeb勉強会@札幌 #24 / Java Do共催
   2023/09/02
   tacck (Kihara, Takuya)
   ゆるWeb勉強会@札幌 #24 / Java Do共催 #ゆるWeb札幌 #javado 1
   

   View Slide

2. ゆるWeb勉強会@札幌 #24 / Java Do共催 #ゆるWeb札幌 #javado 2
   木原 卓也
   Kihara, Takuya / @tacck
   生活協同組合コープさっぽろ
   デジタル推進本部システム部
   Amplify Japan User Group
   運営メンバー
   ゆるWeb勉強会@札幌
   主催
   AWS Community Builder
   Since Q2 2021 / Category: Front-end Web and Mobile
   好きなフィギュアスケートの技
   スプレッド・イーグル
   

   View Slide

3. Soracom Cloud Camera Services
   ソラカメ
   - SORACOM社の提供しているカメラ連携サービス
   - ATOM社の “ATOM Cam 2” および “ATOM Cam Swing” をデバイスとして登録可能
   ゆるWeb勉強会@札幌 #24 / Java Do共催 #ゆるWeb札幌 #javado 3
   https://www.atomtech.co.jp/
   

   View Slide

4. アーキテクチャ的なもの
   ゆるWeb勉強会@札幌 #24 / Java Do共催 #ゆるWeb札幌 #javado 4
   

   View Slide

5. デモ
   ゆるWeb勉強会@札幌 #24 / Java Do共催 #ゆるWeb札幌 #javado 5
   https://twitter
   .com/tacck/status/1696885139505082498?s=20
   

   View Slide

6. 実装ポイント
   ゆるWeb勉強会@札幌 #24 / Java Do共催 #ゆるWeb札幌 #javado 6
   - 配信されるストリーミング形式は “MPEG-DASH”
   - JavaScript で再生するために “dash.js” を利用。使い方は簡単。
   プレイヤー生成
   プレイヤーと
   を連携
   ここにURL設定すれ
   ば良い
   

   View Slide

7. 制限
   ゆるWeb勉強会@札幌 #24 / Java Do共催 #ゆるWeb札幌 #javado 7
   - 配信されるURLは時間制限あり
   - リアルタイム映像は 300 秒 (5 分)
   - 録画済みのものの時間指定は最大 900 秒 (15 分)
   - 月の動画再生可能時間は 72時間
   - SORACOM API リファレンス
   https://users.soracom.io/ja-jp/tools/api/reference/
   - リファレンスページで実際にAPI実行できるので、便利!!
   

   View Slide

8. まとめ
   - ソラカメを使うと、簡単にカメラを使ったシステムを作り込める！
   - 動画や静止画のダウンロードも、APIがあるので実装可能。
   - ATOM Cam 2 自体もSDカード録画やタイムラプス機能があるので、
   単体でも楽しめる。
   - 個体差かもしれないが、手持ちの ATOM Cam 2 は
   数日起動しっぱなしにすると固まるっぽい。
   (ちょいちょい再起動する仕組みを入れている)
   - とにかくお手軽に始められるので、ぜひみんなやってみよう！！
   ゆるWeb勉強会@札幌 #24 / Java Do共催 #ゆるWeb札幌 #javado 8
   

   View Slide

9. END
   ゆるWeb勉強会@札幌 #24 / Java Do共催 #ゆるWeb札幌 #javado 9
   

   View Slide