ハイパーウルトラ監視社会(obniz)


obniz を使って、顔追尾カメラを作ったよ。
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/ncjh82L6an">pic.twitter.com/ncjh82L6an</a></p>&mdash; caz(ドライブ) (@cazu_PR) <a href="https://twitter.com/cazu_PR/status/1258096760993406978?ref_src=twsrc%5Etfw">May 6, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

顔を認識してサーボモーターを動かすやり方は下の記事を参考に。
https://blog.obniz.io/ja/make/facefan-that-can-recognize-your-face-with-opencv/

ほとんどこの記事のソースコードをコピぺしただけなんだけど、なぜかそのままだと、canvasOutput に何も出力されないので困った。
![スクリーンショット 2020-05-06 22.56.58aaaaa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603301/b81f6ff9-6980-6453-1d97-c22b3fcd2815.jpeg)
いろいろ試してみたけど、うまく行かなくて、最終的にはメンターの方にみてもらい、html に足りない記述があることが判明した。
それがこの記述↓

```html:index.html
<script src="https://docs.opencv.org/3.4.1/opencv.js"></script>
```
つまり index.html の全体はこうなる。↓

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <script src="https://unpkg.com/obniz@3.5.0/obniz.js"></script>
    <script src="https://docs.opencv.org/3.4.1/opencv.js"></script>
  </head>

  <body>
    <div id="obniz-debug"></div>
    <div>
      <div class="control"><button id="startAndStop">Start</button></div>
    </div>
    <p class="err" id="errorMessage"></p>
    <div>
      <table cellpadding="0" cellspacing="0" width="0" border="0">
        <tr>
          <td>
            <video
              id="videoInput"
              autoplay
              playsinline
              width="320"
              height="240"
              class="refrect-lr"
            ></video>
          </td>
          <td>
            <canvas
              id="canvasOutput"
              width="320"
              height="240"
              style="-webkit-font-smoothing:none"
              class="refrect-lr"
            ></canvas>
          </td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><div class="caption">videoInput</div></td>
          <td><div class="caption">canvasOutput</div></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
    <script
      src="https://webrtc.github.io/adapter/adapter-5.0.4.js"
      type="text/javascript"
    ></script>
    <script
      src="https://docs.opencv.org/3.4/utils.js"
      type="text/javascript"
    ></script>
    <script src="./code.js"></script>
  </body>
</html>
```

残りのファイルは特にいじらない。

これで無事 canvasOutput に顔追尾された動画が出力されると思う。
顔追尾の準備はこれで完了。

次は実際のビデオチャットで使用する時の設定(コードは書かない)。
---


単刀直入にいうと、顔認識用の定常カメラと、顔追尾用の可変カメラ2つをセッティングする必要がある。

オススメは、顔認識用の定常カメラは、ノートPCを使用するのであれば、PCのインカメラに。
顔追尾用の可変カメラは外部のwebカメラに。というセッティング。

というわけで、上記の仕組みをセッティングしていく。

まず使用するチャットツール(今回はhangout)のカメラの設定を<b>顔追尾用の外部webカメラに変更する。</b>ここはおそらくサクッとできる人が多いと思う。

次に、顔認識用の定常カメラを、PCのインカメラの方に変更する方法なんだけど、ここが意外とわかりずらかった。

というのも、外部のwebカメラをpcに接続すると、ブラウザで起動するカメラがそれに引っ張られる。
そこで、ブラウザの起動するカメラをpcのインカメに切り替えないといけない。

ブラウザのカメラの設定はどこから行けるかというと、、、
ここだーーー！！
![スクリーンショット 2020-05-06 22.56.58aaaa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603301/1e7edf36-e797-739b-7ccf-4de1adaee542.jpeg)
押すとこんな画面がでるので
『管理』と書いてあるところを押そう。
![スクリーンショット 2020-05-06 22.56.58aaa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603301/fa3f8948-ff46-c9c2-529a-5fe0253147b0.jpeg)
そしたら無事、使用するwebカメラが選択できるので、pcのwebカメラに切り替えよう(macはFaceTimeHDcameraかな)。
![スクリーンショット 2020-05-06 22.57.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603301/35219282-626a-833d-0a8d-6c42a2a7db5a.png)

さて、これで、顔認識用の定常カメラをpcのインカメラに。
顔追尾用の可変カメラを外部のwebカメラにできたね。

あとは、それぞれを無理やりpcにくっつけて細かく位置調整すれば、ハイパーウルトラ監視社会を助長する、顔追尾カメラの完成だよ！

みんなの会社に導入してみよう！！
ではまた！！