Tensorflow.jsで人物セグメンテーションを使いWebカメラ映像から背景を透過する

npm create svelte@lastest my-app

Which Svelte app template?
│  Skeleton project (テンプレートはBlankであるSkeltonを選択)
~~
cd my-app
npm install
npm run dev -- --open (ブラウザが開いて、Welcome to SvelteKitが表示されたらOK)

<!-- Webカメラ映像取得用 -->
<video id="video" width="1920" height="1080">
  <track kind="captions" />
</video>
<!-- 出力用キャンバス -->
<canvas id="output"></canvas>

<style>
  video {
  display: none;
  }
  canvas {
  width: 640px;
  height: auto;
  aspect-ratio: 16/9;
  }
</style>

<script lang="ts">
  import { onMount } from 'svelte';

  let video: HTMLVideoElement;
  let canvas: HTMLCanvasElement;
  let ctx: CanvasRenderingContext2D;

  onMount(async () => {
    // DOM要素の取得
    video = document.getElementById('video') as HTMLVideoElement;
    canvas = document.getElementById('output') as HTMLCanvasElement;
    ctx = canvas.getContext('2d');

    // カメラからの映像ストリームを取得し、ビデオ要素にセット
    const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        width: { ideal: 1920 },
        height: { ideal: 1080 }
      }
    });
    video.srcObject = stream;
    video.play();

    // ビデオのメタデータが読み込まれたら、キャンバスのサイズを設定し初期化
    video.onloadedmetadata = () => {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      processFrame();
    };
  });

  async function processFrame() {
    if (!video || !ctx) return;

      // ビデオフレームをCanvasに描画
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    // 次のフレームの処理
    requestAnimationFrame(processFrame);
  }
</script>

npm i @tensorflow/tfjs-core @tensorflow/tfjs-converter @tensorflow/tfjs-backend-webgl @mediapipe/selfie_segmentation @tensorflow-models/body-segmentation

  import { onMount } from 'svelte';

+ import '@mediapipe/selfie_segmentation';
+ import '@tensorflow/tfjs-core';
+ import '@tensorflow/tfjs-backend-webgl';
+ import * as bodySegmentation from '@tensorflow-models/body-segmentation';


  let video: HTMLVideoElement;
  let canvas: HTMLCanvasElement;
  let ctx: CanvasRenderingContext2D;
+ let segmenter: any;

  onMount(async () => {
    // DOM要素の取得
    video = document.getElementById('video') as HTMLVideoElement;
    canvas = document.getElementById('output') as HTMLCanvasElement;
    ctx = canvas.getContext('2d');

    // カメラからの映像ストリームを取得し、ビデオ要素にセット
    const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        width: { ideal: 1920 },
        height: { ideal: 1080 }
      }
    });
    video.srcObject = stream;
    video.play();

    // ビデオのメタデータが読み込まれたら、キャンバスのサイズを設定し初期化
    video.onloadedmetadata = () => {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

-     processFrame();
+     init();
    };

+   async function init() {
+     // ボディセグメンテーションモデルの作成
+     await createBodySegmentation();
+     // フレーム処理の開始
+     processFrame();
+   }

  async function processFrame() {
    if (!video || !ctx) return;

+   // 人物のセグメンテーションを実行
+   const segmentation = await segmentPeople();

+   const coloredPartImage = await bodySegmentation.toBinaryMask(segmentation);
+   const opacity = 0.7;
+   const flipHorizontal = false;
+   const maskBlurAmount = 0;
+   await bodySegmentation.drawMask(canvas, video, coloredPartImage, opacity, maskBlurAmount, flipHorizontal);

-   // ビデオフレームをCanvasに描画
-   ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    // 次のフレームの処理
    requestAnimationFrame(processFrame);
  }

+ async function createBodySegmentation() {
+   // ボディセグメンテーションモデルの設定
+   const model = bodySegmentation.SupportedModels.MediaPipeSelfieSegmentation;
+   const segmenterConfig = {
+     runtime: 'mediapipe' as const,
+     solutionPath: '/node_modules/@mediapipe/selfie_segmentation',
+     modelType: 'general'
+   };
+   // セグメンターの作成
+   segmenter = await bodySegmentation.createSegmenter(model, segmenterConfig);
+ }

+ async function segmentPeople() {
+   // ビデオフレームから人物のセグメンテーションを実行
+   const estimationConfig = { flipHorizontal: false };
+   return await segmenter.segmentPeople(video, estimationConfig);
+ }
});

    // 人物のセグメンテーションを実行
    const segmentation = await segmentPeople();

+   const foregroundColor = {r: 12, g: 12, b: 12, a: 12};
+   const backgroundColor = {r: 16, g: 16, b: 16, a: 16};

-   const coloredPartImage = await bodySegmentation.toBinaryMask(segmentation);
+   const backgroundDarkeningMask = await bodySegmentation.toBinaryMask(segmentation, foregroundColor, backgroundColor);

-   const opacity = 0.7;
-   const flipHorizontal = false;
-   const maskBlurAmount = 0;
-   await bodySegmentation.drawMask(canvas, video, coloredPartImage, opacity, maskBlurAmount, flipHorizontal);
+   const opacity = 1;
+   const maskBlurAmount = 10;
+   const flipHorizontal = false;
+   await bodySegmentation.drawMask(canvas, video, backgroundDarkeningMask, opacity, maskBlurAmount, flipHorizontal);

+   const mask = backgroundDarkeningMask;
+   const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

+   // マスクを使用して背景ピクセルを透明に設定
+   for (let i = 0; i < imageData.data.length; i += 4) {
+     const maskValue = mask.data[i];
+     if (maskValue > 12) { // 閾値を調整して結果を改善できます
+       imageData.data[i + 3] = 0; // アルファチャンネルを0に設定して透明にする
+     }
+   }

+   // 処理後の画像データをキャンバスに描画
+   ctx.putImageData(imageData, 0, 0);

    // 次のアニメーションフレームで再度処理を実行
    requestAnimationFrame(processFrame);