【ブラウザだけ、Zoom/ Teamsほかで動く】「mmhmm」のようなプレゼン+人物動画リアルタイム合成を自作してみる

10181 ワード
DeepLearning VisualStudioCode p5.js Markdown 機械学習 Markdown テキストリンク

TL;DR

  • HTML5のプレゼン上に、背景を削除した自身の映像を重ね、オンラインで、一味違ったプレゼンができます
  • デモをこちらで試せます
    • 1. Webカメラが付いたPCで上のページを開く
    • 2. Webカメラを有効化する(ブラウザのセキュリティ設定)
    • 3. プレゼン風のデッキをカーソルキーで行き来しながら、mmhmm気分? が味わえます。

背景

  • Evernote創業者であるフィル・リービン氏が2020/7/7に「mmhmm(んーふー)」を発表
  • 現状はプライベートベータ(招待制でのプレビュー)
  • ローカルにソフトウェアをインストールして、仮想カメラデバイスとして使うと思われる
  • より軽量にブラウザだけで動かしたら、どこまでいけるか試してみたいと思った

動作確認

  • Chrome
  • Macbook Pro (macOS Catalina 10.15.3)

やり方

VSCode + MarpなどでHTML5プレゼンデッキを作成する

所定のCSS、JavaScriptをHTML5のプレゼンデッキに追記する

<html>
<head>
<!-- インポートするJavaScriptライブラリの記述 -->
<script>
// カメラキャプチャ、背景削除、重畳ロジックの記述(JavaScript)
</script>
<style>
/* 上のロジックに関連したスタイルの適用 */
</style>
...
</head>
<body>
...
</body>
</html>
  • JavaScript部分は以下を実行している
    • 簡易に学習済み機械学習モデルとカメラ、表示のためのcanvasを扱うため、ml5js, p5jsを使った
    • 背景削除にBodyPixを使った
    • 処理の流れ
      • Webブラウザ上でローカルマシンのカメラ利用を承諾
      • HTML5プレゼンの前面に、透過度0.4で大きなキャンバスを重畳
      • カメラから得た画像に対して、BodyPixで人以外の部分(背景)を削除
      • 人の部分をマウスカーソル位置に表示

スクリプト

インポート

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script　src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>

本体

 let bodypix;
 let video;
 let segmentation;
 let img;

 const options = {
   outputStride: 8, // 8, 16, or 32, default is 16
   segmentationThreshold: 0.3 // 0 - 1, defaults to 0.5 
 }

 function preload(){
   bodypix = ml5.bodyPix(options);
 }

 function setup() {
   createCanvas(1400, 1600);
   video = createCapture(VIDEO);
   video.size(400, 300);
   bodypix.segment(video, gotResults)
 }

 function gotResults(err, result) {
   if (err) {
     console.log(err);
     return;
   }
   segmentation = result;
   background(255,255,255);
   image(segmentation.backgroundMask, mouseX, mouseY, 266, 200);
   bodypix.segment(video, gotResults)
 }

スタイルシート

canvas {
  opacity:0.4;
  z-index:5;
}

できあがり!

  • あとでGitHubへリソースU/Lし、追記

まとめ

  • HTML5のプレゼンを準備する(ここではVSCode + Marp)
  • ml5jsを使い、TensorFlow.js + BodyPixで機械学習による背景削除、プレゼン重畳してmmhmmもどきが動かせた

今後の発展

  • CSSで透過度を指定し、プレゼンにオーバーレイしているだけなので、少しデッキの色味が変わっている
    • ちゃんとマスクして、オーバーレイして、とやれるはず
  • BodyPixによるTensorFlow.js上での背景削除では、フレームレートに限界がある
  • また、合成にあたって、例えばマスクにぼかしをかけるなど、自然に見せるためのロジックを軽く組み込むのは難しい
  • Chroma key(クロマキー)合成により、もう少し軽く、綺麗な合成ができるかも

参考リソース