fix: offline clients can't load webrtc shim

Issue: #197

Author: gruhn

package-lock.json

@@ -31,7 +31,8 @@
   "dependencies": {
     "callforth": "^0.3.1",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "webrtc-adapter": "7.7.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",

package.json

@@ -1,7 +1,7 @@
 import { StreamApiNotSupportedError, InsecureContextError } from "./errors.js";
 import { imageDataFromVideo } from "./image-data.js";
 import { eventOn, timeout } from "callforth";
-import { indempotent } from "./util.js"
+import shimGetUserMedia from "./shimGetUserMedia"
 
 class Camera {
   constructor(videoEl, stream) {
@@ -64,15 +64,6 @@ const narrowDownFacingMode = async camera => {
   }
 };
 
-const applyWebRTCShim = indempotent(() => {
-  const script = document.createElement("script");
-  script.src = "https://webrtc.github.io/adapter/adapter-7.6.3.js";
-
-  document.head.appendChild(script);
-
-  return eventOn(script, "load");
-});
-
 export default async function(videoEl, { camera, torch }) {
   // At least in Chrome `navigator.mediaDevices` is undefined when the page is
   // loaded using HTTP rather than HTTPS. Thus `STREAM_API_NOT_SUPPORTED` is
@@ -90,7 +81,7 @@ export default async function(videoEl, { camera, torch }) {
 
   // This is a browser API only shim. It patches the global window object which
   // is not available during SSR. So we lazily apply this shim at runtime.
-  await applyWebRTCShim()
+  await shimGetUserMedia()
 
   const constraints = {
     audio: false,

src/misc/camera.js

@@ -0,0 +1,29 @@
+import { shimGetUserMedia as chromeShim } from 'webrtc-adapter/src/js/chrome/getusermedia';
+import { shimGetUserMedia as edgeShim } from 'webrtc-adapter/src/js/edge/getusermedia';
+import { shimGetUserMedia as firefoxShim } from 'webrtc-adapter/src/js/firefox/getusermedia';
+import { shimGetUserMedia as safariShim } from 'webrtc-adapter/src/js/safari/safari_shim';
+import { detectBrowser } from 'webrtc-adapter/src/js/utils';
+
+import { StreamApiNotSupportedError } from './errors';
+import { indempotent } from './util';
+
+export default indempotent(() => {
+  const { browser } = detectBrowser(window);
+
+  switch (browser) {
+    case 'chrome':
+      chromeShim(window);
+      break;
+    case 'firefox':
+      firefoxShim(window);
+      break;
+    case 'edge':
+      edgeShim(window);
+      break;
+    case 'safari':
+      safariShim(window);
+      break;
+    default:
+      throw new StreamApiNotSupportedError()
+  }
+})

src/misc/shimGetUserMedia.js

@@ -1,5 +1,7 @@
 module.exports = {
   css: { extract: false },
 
-  lintOnSave: false
+  lintOnSave: false,
+
+  transpileDependencies: ['webrtc-adapter']
 };