Nuxt.js + Skyway ( WebRTC ) で簡易ベビーモニタを作った
TL;DR
やりたかったこと
- iOSのカメラを使う
- リアルタイムで送ってほしい
- 音声も拾いたい
やったこと
- iOSのカメラを使う
- 音声も拾いたい
MediaDevices.getUserMedia() - Web API | MDN
を使った
- リアルタイムで送ってほしい
を使った
公開するまでの流れ
最初はリアルタイムで配信すること & 音声の取得は難しいと思っていたので、 ブラウザで撮影したカメラの画像をサーバに送信する方法 - NaCl非公式ブログ とを参考にして、 Rails 5.2 + Stimulusjsで作っていた。
お世話になっていた FJORD BOOT CAMP（フィヨルドブートキャンプ） のシステムでも似たような実装があったのを記憶していたのでそのコード部分の実装*1*2 も参考にした。（余談だけどこの機能は今は消えちゃってた）
ただ取得時間が短かったせいかうまく画像を表示させることができなかったので断念。
上掲のSkywayを試したら思ったよりもすぐ出来、Railsじゃなくても良くなったので Nuxt.js（デザインはbootstrap-vue）を導入。 全公開されちゃうのはちょっとなーと思ったので、合言葉と合致したら閲覧と配信ができるよう vuex-persistedstate を使った。Basic認証っぽいことをしたかったんだけど、SPAモードでそれができるやり方がわからず。なんか良いやり方があったら教えてください。
ホスティング先は
zeit.co を使った。 初めてだったけど、now だけでデプロイされるのはすごい。 URLが毎デプロイごとに変わったので、now && now alias を実行している。この辺もこのやり方でいいか気になっている。
感想
Nuxt.js + Skywayで簡易ベビーモニターを作って今日から使ってみてるけど、いちいち様子を見に行かずに済んで便利だ…
— 妬み、嫉み、僻み。 (@kimihito_) February 18, 2019
当たり前のことだけど、自分たちにとって「便利〜」というものを作るのはとてもいいなぁと思った。
