JavaScriptでもバーチャル背景する

実装

コードもシンプルで、

• 事前に抜きたい色を決めておく
• `canvas`に映像を貼り付ける
• 指定された色を探して見つかったらそこを透過にする
• 背景の上に貼り付ける

ってだけ。

そんなコードを使いやすくラップしてライブラリにしたのがこちら。

GitHub - leader22/chromakey: Minimum chroma key processing for your camera stream.

コードはこんな感じで使えるようにした。

import { create } from "chromakey";

(async () => {
  // setup input and output HTMLVideoElement
  const [$in, $out] = document.querySelectorAll("video");
  $in.muted = $in.playsInline = true;
  $out.muted = $out.playsInline = true;

  // get media to process
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  $in.srcObject = stream;
  await $in.play();

  // create ChromaKey instance w/ base img, video, or canvas
  const ck = create($in);

  ck.setColor([255, 255, 255]);
  ck.setThreshold(100);

  // your background
  ck.setBackgroundColor([
    Math.random() * 255,
    Math.random() * 255,
    Math.random() * 255,
  ]);
  // ck.setBackgroundMedia();

  // run it
  ck.start();

  // display processed output
  $out.srcObject = ck.destination.captureStream();
  await $out.play();

  // ck.stop();
})();

指定の色かどうかを判定する部分はある程度のしきい値をもうけて調整できるようにしてみた。

`video`を受け取って`canvas`を返すAPIになってるので、`captureStream()`すればWebRTCで飛ばすこともできます。

パフォーマンス

そういうベタ塗り画像の背景を消す用途にはバッチリ使えた。

ただWeb会議に組み込んで使うとなると・・・、そもそもグリーンバックがない！！
家の白っぽい壁だと、照明との兼ね合いで調整がだいぶ難しいし、顔が白飛びしたりする！

という感じで、ちゃんとした設備があるなら使えるけど、そうでないならだいぶ厳しかったのが正直なところ。

デモもあるのでこの厳しさをぜひお試しあれ。

https://leader22.github.io/chromakey

実装

幸いなことにTensorFlowにずばりそれ用の`BodyPix`というモデルがあったのでそれを使ってみる。

tfjs-models/body-pix at master · tensorflow/tfjs-models · GitHub

試したバージョンはこのとおり。

• tfjs@1.5.2
  • tf.setBackend("wasm")
• body-pix@2.0.4

コードはこんな感じになる。

(async () => {
  const net = await bodyPix.load();

  // input source
  const $video = document.querySelector("video");
  // output source
  const $destCanvas = document.querySelector("canvas");

  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  $video.srcObject = stream;

  document.querySelector("button").onclick = async () => {
    // THESE LINES ARE REQUIRED!
    $video.width = $destCanvas.width = $video.videoWidth;
    $video.height = $destCanvas.height = $video.videoHeight;

    const destCtx = $destCanvas.getContext("2d");

    // to remove background, need another canvas
    const $tempCanvas = document.createElement("canvas");
    $tempCanvas.width = $video.videoWidth;
    $tempCanvas.height = $video.videoHeight;
    const tempCtx = $tempCanvas.getContext("2d");

    (async function loop() {
      requestAnimationFrame(loop);

      // create mask on temp canvas
      const segmentation = await net.segmentPerson($video);
      const mask = bodyPix.toMask(segmentation);
      tempCtx.putImageData(mask, 0, 0);

      // draw original
      destCtx.drawImage($video, 0, 0, $destCanvas.width, $destCanvas.height);
      // then overwrap, masked area will be removed
      destCtx.save();
      destCtx.globalCompositeOperation = "destination-out";
      destCtx.drawImage($tempCanvas, 0, 0, $destCanvas.width, $destCanvas.height);
      destCtx.restore();
    })();
  };
})();

注意点としては、`segmentPerson()`に渡すインプットで、これに`width`と`height`のプロパティに値が必須なこと。（`video`ならとりあえず`videoHeight`と`videoWidth`をコピーするだけでいい）
これに気付かずめっちゃハマった・・・。

仕組みとしてはMLでセグメンテーションして、その結果を使ってマスクを作って、あわせて描画してるだけ。
`canvas`の`globalCompositeOperation`で重なりをどう合成するか指定するシンプルなコードになったはず。

`tfjs/body-pix`は、こういった描画の部分でいくつか便利メソッドを公開してて、体の一部をぼかすとか、背景をぼかすのがあったりするけど、バーチャル背景用途に透過するものはなかった。
あったら嬉しくない？ってIssue立てたけど、いまだ返事はない・・。

ちなみに背景ボケはこんな感じでできちゃう。

const img = document.getElementById('image');
const canvas = document.getElementById('canvas');

const net = await bodyPix.load();
const segmentation = await net.segmentPerson(img);

const backgroundBlurAmount = 3;
const edgeBlurAmount = 3;
const flipHorizontal = false;

bodyPix.drawBokehEffect(
  canvas, img, segmentation, 
  backgroundBlurAmount, edgeBlurAmount, flipHorizontal
);

簡単すぎる・・。

パフォーマンス

こっちはライブラリにはしてないけど、さっきのクロマキーのリポジトリに簡単なデモだけ置いといた。

https://leader22.github.io/chromakey/tfjs-body-pix/index.html

かがくのちからってすげー！
どうみてもこれが顧客が欲しかったものであり、バーチャル背景って聞いたらこっちのアプローチになるんかなー。

ただ長時間やってるとファンが結構回ってくる（WASMバックエンドにしてもそれなりに）ので、学習モデルのパラメータを調整したりする余地はあるかなーという感じ。
なのでZoomもデスクトップクライアントでだけ使えるんかなーと。