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

8696 ワード
HTML obniz JavaScript camera HTML テキストリンク

obniz を使って、顔追尾カメラを作ったよ。

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

ほとんどこの記事のソースコードをコピぺしただけなんだけど、なぜかそのままだと、canvasOutput に何も出力されないので困った。

いろいろ試してみたけど、うまく行かなくて、最終的にはメンターの方にみてもらい、html に足りない記述があることが判明した。
それがこの記述↓

index.html
<script src="https://docs.opencv.org/3.4.1/opencv.js"></script>

つまり index.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/[email protected]/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)のカメラの設定を顔追尾用の外部webカメラに変更する。ここはおそらくサクッとできる人が多いと思う。

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

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

ブラウザのカメラの設定はどこから行けるかというと、、、
ここだーーー！！

押すとこんな画面がでるので
『管理』と書いてあるところを押そう。

そしたら無事、使用するwebカメラが選択できるので、pcのwebカメラに切り替えよう(macはFaceTimeHDcameraかな)。

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

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

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