ブラウザで、廃墟を探索しお化けと自撮りしたい

#動機
mediapipe のhuman seqmentationを使ってゲームを作りたかった。
jsを勉強中なので、ブラウザで作りたい。
最初は、世界遺産で自撮りできるものを考えていたが、素材が集まらなかったので
https://qiita.com/im02kai/items/31fa6cfc8e50855bebff
を使って、素材を作成。
素材ありきで、廃墟探索になり静止画ではつまらないので、VRツアーにしました。

#完成サイト
https://www.web-tools.app/ghosttop

#動画です、
https://www.youtube.com/watch?v=Tbij9g68Hzs

#環境
mediapipeを使うので、レンタルサーバーでは、無理、ということで
https://qiita.com/im02kai/items/948dd616b86596e748d2
で環境構築

#構成
こちらも、mediapipeがpythonインターフェイスを持つので
flask
flask-socket.io
になりました。

#スクリプト は、この記事をもとにしてます
https://qiita.com/im02kai/items/2b150b875bea6a3035b8
https://qiita.com/im02kai/items/e460fa86be1501474275

肝心のmediapipe 部分は、上記 の合成部分をmediapipeで書き換え

app.py

results = selfie_segmentation.process(img1)
mask = np.stack((results.segmentation_mask, ) * 3, axis=-1) >= 0.1
dst = np.where(mask, img1, img2)

これだけです　簡単。
ただ、場合によってはmediapipeが、インストールできないことがあります
私の場合は、ubuntu18.04だったためpythonが古く、python3.8.5をソースからビルドしました
apt では入りませんでした。
ubuntu20.04 にすれば何も問題ないです。

#デプロイ後の修正
最安プランを選択したため、リアルタイムでは処理が追いつかないので
カメラ画像を半透明にし、jsだけで擬似合成させ、１フレームのみ最終処理するという手段をとりました。

#これを使って、、、
insta360を購入したので、世界遺産は無理でも観光地ぐらいだったら
当初の目的を果たせるかなと思い、撮影の練習してます