M5Stack CoreS3 lite でカメラ機能を使ってみる
せっかく手に入れた M5Stack をもう少し触ってみたくなり、今回はカメラ機能を試してみました。
GPSに続いて「とりあえず動かしてみるシリーズ」です。
参考
以下のサイトのソースコードを使わせていただきました。ありがとうございます。
- CORE S3コピペで簡単カメラ画像をスマホ,PCに表示する方法
https://logikara.blog/cores3-camera-stream/
やってみたこと
参考サイトの内容をベースに、
- M5Stackの画面にカメラ映像を表示
- ブラウザからもストリーミング表示
この2点を目標に試してみます。
環境
- M5Stack CoreS3 lite
- Ubuntu 22.04
- VSCode + PlatformIO
プロジェクト作成
1. PlatformIOでプロジェクト作成
VSCodeのPlatformIO（アリのアイコン）から新規プロジェクトを作成。
2. platformio.ini の設定
以下のライブラリを追加します。
lib_deps =
m5stack/M5Unified @ ^0.1.14
m5stack/M5CoreS3 @ ^1.0.0
mikalhart/TinyGPSPlus @ ^1.0.3
3. Wi-Fi設定の修正
参考コードをそのまま使いつつ、Wi-Fi設定だけ自宅の環境に変更します。
const char ssid[] = ""; // 接続先SSID
const char pass[] = ""; // 接続先パスワード
4. M5Stackへ書き込み
PlatformIOからビルド＆書き込みを実行。
ブラウザで確認
M5Stackの画面にIPアドレスが表示されるので控えておきます。
そのままHTMLを開くと表示されない…
参考サイトのHTMLをそのまま使ってブラウザで開いてみたところ、
画像が表示されない問題が発生しました。
原因として考えられるのは：
file://で開いている- JavaScriptの制限（CORS絡み）
解決方法
ローカルで簡易Webサーバを立てることで解決しました。
HTMLファイルがあるディレクトリで以下を実行：
python3 -m http.server 8000
ブラウザで以下にアクセス：
http://localhost:8000
👉 これで無事ストリーミング表示されるようになりました。
まとめ
今回のポイントはここですね：
- カメラ自体はすぐ動く（さすがM5Stack）
- つまずいたのは「ブラウザ側の扱い」
file://ではなく HTTP経由で開くのが重要。Same Origin Policy、情報処理安全確保支援士の勉強が役に立ちました
ひとこと
最初は「なんで映らない…？」ってなりましたが、
原因が分かると「ああ、そりゃそうだよね」というやつでした。
組み込み側より、むしろWeb側の仕様にやられた感じですね。
以上になります。
