Add prototypal support for camera background blurring

The purpose here is to evaluate the performance
of doing this client-side, both in terms of runtime behavior,
and quality of the resulting video.
Note that it just unconditionally blurs the background,
i.e. there is no UI to control the blur, yet.

It uses the `@shiguredo/virtual-background` package,
and while it works we probably don't want to use it "in prod,"
for several reasons:

* Its documentation is almost entirely in Japanese,
* they have some questionable rules regarding contributions,
* and it doesn't even work in every Browser.
  Specifically Firefox doesn't work at all, sadly.

There are some other libraries, but weirdly they all have
similar negative aspects. Yes, there even is another Japanese one!
So if we want this, there is likely going to be
some "manual tinkering" involved.

package.json

@@ -26,6 +26,7 @@
     "@fontsource-variable/roboto-flex": "^5.0.8",
     "@iarna/toml": "^2.2.5",
     "@opencast/appkit": "^0.2.2",
+    "@shiguredo/virtual-background": "^2023.2.0",
     "@svgr/webpack": "^8.1.0",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
@@ -57,11 +58,13 @@
     "@types/react-beforeunload": "^2.1.4",
     "@types/react-dom": "^18.2.15",
     "@types/react-page-visibility": "^6.4.4",
+    "@types/webpack-env": "^1.18.4",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "eslint": "^8.42.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "^4.0.1",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",

src/capturer.tsx

@@ -1,3 +1,4 @@
+import { VirtualBackgroundProcessor } from "@shiguredo/virtual-background";
 import { Settings } from "./settings";
 import { Dispatcher } from "./studio-state";
 
@@ -96,12 +97,24 @@ export async function startUserCapture(
   };
 
   try {
-    const stream = await navigator.mediaDevices.getUserMedia(constraints);
-    stream.getTracks().forEach(track => {
+    let stream = await navigator.mediaDevices.getUserMedia(constraints);
+
+    const assetLoader = require.context("@shiguredo/virtual-background/dist?asset", true, /.*/);
+    const assetsPath = assetLoader(assetLoader.keys()[0])
+      .split("/").slice(0, -1).join("/");
+
+    const tracks = await Promise.all(stream.getTracks().map(
+      async track => track.kind === "video"
+        ? await new VirtualBackgroundProcessor(assetsPath)
+          .startProcessing(track as MediaStreamVideoTrack, { blurRadius: 15 })
+        : track,
+    ));
+    tracks.forEach(track => {
       track.onended = () => {
         dispatch({ type: "USER_UNEXPECTED_END" });
       };
     });
+    stream = new MediaStream(tracks);
     dispatch({ type: "SHARE_USER", stream });
   } catch (err) {
     // TODO: there 7 types of exceptions; certainly we should differentiate here one day

webpack.config.ts

@@ -49,6 +49,13 @@ const config: CallableOption = (_env, argv) => ({
           },
         }],
       },
+      {
+        resourceQuery: /asset/,
+        type: "asset/resource",
+        generator: {
+          filename: "[path][name][ext]",
+        },
+      },
     ],
   },
   plugins: [