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

動機

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

完成サイト

動画です、

環境

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を購入したので、世界遺産は無理でも観光地ぐらいだったら
当初の目的を果たせるかなと思い、撮影の練習してます