ArduCAM-Mini-2MP-Plusをobnizで使う

# 概要
obnizでArducam Miniを使った遠隔監視カメラを作ろうとしたが，Arducam Miniのバージョンの違いで，そのままでは動かなかった．
カメラモジュールの基板下部に`Mini-2MP-Plus`等と書かれているものはArduCAM-Mini-2MP-Plusという新しいバージョンであり，obnizの`cam.takeWait()`で取得した画像データの配列の最初に`0xFF`を追加する必要がある．

```javascript:index.js
  const data = await cam.takeWait('1024x768');
  data.unshift(255); //配列の最初に0xFFを追加する
  console.log("image size = " + data.length + " bytes");
  const base64 = cam.arrayToBase64(data);
  document.getElementById("image").src = "data:image/jpeg;base64, " + base64;
```

これは，オリジナルのArduCAM-Mini-2MPでは先頭1バイトは無効なデータのため読み飛ばす必要があったが，2MP-Plusでは先頭から有効なデータが出力されるという変更があり，obniz パーツライブラリはオリジナル版に基いて作成されているためだと思われる．

# ArducamをAmazonで注文したらPlus版が届いた
外部から家の様子を遠隔監視しつつ，室内のスイッチを遠隔操作できるものを簡単に作りたいと思い，obniz公式にパーツライブラリが用意されている，Arducam MiniをAmazonで購入したのですが，そのままobnizのサンプルを動かしても画像が表示されなかったので，解決までの道のりを記しておきます．

[obniz公式パーツライブラリのArduCAMMiniのページ](https://obniz.io/ja/sdk/parts/ArduCAMMini/README.md)では[スイッチサイエンスでのArducam Miniモジュール（2メガピクセル）商品ページ](https://www.switch-science.com/catalog/3780/)へのリンクが貼られていますが，私はAmazonでも同様の商品を見つけ，そちらで購入しました．

[Arducam Arduino UNO Mega2560ボード用OV2640 2メガピクセルレンズ付きミニモジュールカメラシールド](https://www.amazon.co.jp/dp/B012UXNDOY/ref=cm_sw_em_r_mt_dp_U_W8s6CbYK9WH7C)

早速obnizに繋いで動作確認をしようとしたものの，[obniz公式パーツライブラリのArduCAMMiniのページ](https://obniz.io/ja/sdk/parts/ArduCAMMini/README.md)のサンプルを動かしても，データは送られてきてはいるものの，画像が正しく表示されません．
![arducam_error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401669/34719a44-53ac-f679-78b2-dac523fd190f.png)

[Arducam公式サイト](http://www.arducam.com/)等で調べてみると，AmazonやArducam公式サイトにある写真の通り，どうやら手に入れたものは新しいバージョンのArduCAM-Mini-2MP-Plusのようでした．

# Arducamオリジナル版とPlus版の違い
オリジナル版とPlus版の違いは，以下のサイトに記載されていました．
http://indoor.lolipop.jp/IndoorCorgiElec/ESP-SensorCam.php

>(2) ArduCAM-Mini-2MPにおいてSPIで画像を読み出す際に、先頭1バイトは無効なデータのため読み飛ばす必要がありました。 2MP-Plusでは先頭から有効なデータが出力されるため、読み飛ばす必要はありません。

[Arducam公式のソフトウェアアプリケーションノート](http://www.arducam.com/downloads/shields/ArduCAM_Camera_Shield_Software_Application_Note.pdf)では，5.5節 "Burst Read Operation" に，この違いについて詳しく説明されています．
[obniz公式ライブラリのソース](https://github.com/obniz/obniz/blob/master/parts/Camera/ArduCAMMini/index.js)を参照すると，確かにこのモードが使用されていました．

#JPEGのヘッダー
obnizパーツライブラリではオリジナル版に適応して作られているようで，先頭1バイトを読み飛ばす処理が含まれているようです．

では逆に失われた先頭１バイトを配列の最初に追加すればよいのですが，JPEGファイルのヘッダーは`FFD8`とのことなので，最初の１バイトに`0xFF`を追加すればよいことが分かります．

[Arducam Mini 2MP camera module is obsolete the official demo seem not work with the new Arducam Mini 2MP Plus camera](https://devzone.nordicsemi.com/f/nordic-q-a/45649/arducam-mini-2mp-camera-module-is-obsolete-the-official-demo-seem-not-work-with-the-new-arducam-mini-2mp-plus-camera)


# 解決策
`cam.takeWait()`したデータに`unshift(255)`すれば良いだけでした．

```html:index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@latest/obniz.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<img id="image">

<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
  obniz.io11.output(true);
  var cam = obniz.wired("ArduCAMMini", { cs:0, mosi:1, miso:2, sclk:3, gnd:4, vcc:5, sda:6, scl:7 });
  await cam.startupWait();
  const data = await cam.takeWait('1024x768');
  data.unshift(255); //配列の最初に0xFFを追加する
  console.log("image size = " + data.length + " bytes");

  const base64 = cam.arrayToBase64(data);
  document.getElementById("image").src = "data:image/jpeg;base64, " + base64;
}
</script>
</body>
</html>
```