/

M5Stack UnitV2 でサンプルアプリの認識結果と画像を（ほぼ）同時にブラウザで表示する

syagawa

M5Stack UnitV2のサンプルアプリは画像と認識結果JSONの取得が面倒なので、それを少し楽にするための方法を以前紹介しました。

ただ、上記の方法だとJSONか画像どちらかだけしか取得できないので微妙に使いづらいと思います。

まずこちらのファイルをUnitV2と繋げるPCにダウンロードしてください。ファイルの内容は上記の2つのリンクとほぼ同様です。

M5Stack UnitV2への適用

# @PC UnitV2にsshでログイン
$ ssh m5stack@unitv2.py

# @UnitV2 /dev/nullのpermissionを変えないとscpできない
$ sudo chmod 666 /dev/null

# @PC PCからUnitV2へscpでファイルをもっていく
# コピー先を/media/sdcardにしたのは~/だとm5stackユーザーが直で置けないため、m5stackユーザ用のディレクトリをどこかに作ってもいい
$ scp <ファイルを置いたディレクトリ>/server_core.py  m5stack@10.254.239.1:/media/sdcard/

# @UnitV2 一応置き換える予定のserver_core.pyをリネームしておく
$ sudo mv ~/payload/server_core.py ~/payload/_server_core.py

# @UnitV2 server_core.pyを~/payload/にコピー
$ sudo cp /media/sdcard/server_core.py ~/payload/

M5Stack UnitV2を再起動する

  1. M5Stack UnitV2を再起動する。USBを再接続でもいいと思いますが、私はsudo haltしてからUSBを抜き差ししています。

  2. M5Stack UnitV2が再起動したら ブラウザでhttp://10.254.239.1/ を表示します。

  3. "Face Recognition"などのモードに変更します。

（ほぼ）同時にJSONと画像を取得する

PCでブラウザを立ち上げてください。特に理由がない限りはChromeを使ってください。

ブラウザでhttp://10.254.239.1/aaa を開いてください。aaaの部分は何でもいいですが存在しないURLの方がいいです。

たぶんnot foundページが表示されます。

  1. 開発者ツールを開く(Chromeの場合はF12キー)

  2. 開発者ツールが開いたらConsoleを開く(Chromeの場合はEscキー)

  3. Consoleが開いたら下記のコードを貼り付けてEnterを叩く

const func = function(){
  const elm = document.createElement("div");
  const j = document.createElement("p");
  const hr = document.createElement("hr");
  const img = document.createElement("img");
  elm.append(j);
  elm.append(img);
  elm.append(hr);
  fetch("http://10.254.239.1/result_json").then(res=>res.json()).then(res=> {
    j.textContent = JSON.stringify(res);
  });
  fetch("http://10.254.239.1/image_shot").then(res=> res.blob()).then(blob=> {
    const url = window.URL.createObjectURL(blob);
    img.src = url;
    document.body.append(elm);
  });
};

  1. consoleにfunc();と入力してEnterを叩く

  2. しばらくするとJSONと画像がページに表示される

  3. 以降consoleにfunc();と入力してEnterを叩けば新しいJSONと画像が下にドンドン表示されていく

上記の方法でJSONと画像をほぼ同時に取得できます。JSONと画像データにちょっと時間差があるとは思いますが概ね正しい値が取れるのではないでしょうか。