複数のM5CameraでWigglegramカメラを作ってみた part1 #Node.js

こちらの記事を見て自分も作ってみたいと思いました！

Wigglegramカメラという用語が初耳で面白そう

調査

http://www.jtt.ne.jp/products/original/3dcamera/
- 以前自分が作ったVRカメラと呼称したカメラと同じようなことしている
- 2枚の画像だがその差分がすごくスムーズ
- https://akiba-pc.watch.impress.co.jp/docs/news/news/1094171.html
  - 3万くらいしてる
  - M5Camera二個だと4000円しないくらいですが…

要件、目標

いったん同時っぽくなくていいのでサンプルコードの「CameraWebServer」のcaptureの機能でやってみる
GIF作ってみる
- なれてるNode.jsでやる
2枚の画像差分を埋めてくれるようななにかも調べてやってみたい
おまけで動画挑戦

環境、使ったもの

M5Camera 4台（持っている分だけやる）
固定台
- 100均　有孔ボード
- 100均　有孔ボードにぶら下げるS字フック
Node.js v14.15.0
Mac OS 11.4

完全に固定しないS字フックを使うことで自然のスタビライザー

のちにケーブルをつけたら張力でバラバラになったので、結局テープで固定…

これも有孔ボードの有孔部分を有効的に使っていきたい

参考記事のように3Dプリンタできたらいいなぁ

レゴでもいいのか…探すか

作ってみる

M5Camera側

自分が作ったMDNSに対応させたM5Camera用のプラグラムです

M5Cameraと同じLAN内であれば、「m5camera_1.local」、「m5camera_2.local」などでアクセスできるようにしていきます

最初にあったコードに追記する形なのでできることは変わりません

Node.js側

まず2枚撮影して画像保存

const axios = require('axios');
const fs = require('fs');

axios.get('http://m5camera_1.local/capture', {
  'responseType': 'arraybuffer',
  'headers': {
    'Content-Type': 'image/png'
  }
}).then(function (res) {
  fs.writeFile('cam1.png', res.data, (err) => {
    if (err) console.log(err);
  });
});
axios.get('http://m5camera_2.local/capture', {
  'responseType': 'arraybuffer',
  'headers': {
    'Content-Type': 'image/png'
  }
}).then(function (res) {
  fs.writeFile('cam2.png', res.data, (err) => {
    if (err) console.log(err);
  });
});