More error checking. Increased stability in safari

custom_components/browser_mod/manifest.json

@@ -5,7 +5,7 @@
   "dependencies": ["panel_custom", "websocket_api", "http", "frontend", "lovelace"],
   "codeowners": [],
   "requirements": [],
-  "version": "2.0.0b3",
+  "version": "2.0.0b4",
   "iot_class": "local_push",
   "config_flow": true
 }

js/config_panel/browser-settings-card.ts

@@ -93,6 +93,14 @@ class BrowserModRegisteredBrowsersCard extends LitElement {
                     @change=${this.toggleCameraEnabled}
                   ></ha-switch>
                 </ha-settings-row>
+                ${window.browser_mod?.cameraError
+                  ? html`
+                      <ha-alert alert-type="error">
+                        Setting up the device camera failed. Make sure you have
+                        allowed use of the camera in your browser.
+                      </ha-alert>
+                    `
+                  : ""}
                 ${this._renderInteractionAlert()}
                 ${this._renderFKBSettingsInfo()}
               `

js/plugin/camera.ts

@@ -3,6 +3,7 @@ export const CameraMixin = (SuperClass) => {
     private _video;
     private _canvas;
     private _framerate;
+    public cameraError;
 
     // TODO: Enable WebRTC?
     // https://levelup.gitconnected.com/establishing-the-webrtc-connection-videochat-with-javascript-step-3-48d4ae0e9ea4
@@ -10,6 +11,7 @@ export const CameraMixin = (SuperClass) => {
     constructor() {
       super();
       this._framerate = 2;
+      this.cameraError = false;
 
       this._setup_camera();
     }
@@ -45,14 +47,22 @@ export const CameraMixin = (SuperClass) => {
 
       if (!navigator.mediaDevices) return;
 
-      const stream = await navigator.mediaDevices.getUserMedia({
+      try {
-        video: true,
+        const stream = await navigator.mediaDevices.getUserMedia({
-        audio: false,
+          video: true,
-      });
+          audio: false,
+        });
 
-      video.srcObject = stream;
+        video.srcObject = stream;
-      video.play();
+        video.play();
-      this.update_camera();
+        this.update_camera();
+      } catch (e) {
+        if (e.name !== "NotAllowedError") throw e;
+        else {
+          this.cameraError = true;
+          this.fireEvent("browser-mod-config-update");
+        }
+      }
     }
 
     async update_camera() {

js/plugin/require-interact.ts

@@ -57,14 +57,22 @@ export const RequireInteractMixin = (SuperClass) => {
         vPlay
           .then(() => {
             this._interactionResolve();
+            video.pause();
           })
           .catch((e) => {
-            if (e.name === "AbortError") this._interactionResolve();
+            if (e.name === "AbortError") {
+              this._interactionResolve();
+            }
           });
-        video.pause();
       }
 
-      window.addEventListener("pointerdown", this._interactionResolve);
+      window.addEventListener(
+        "pointerdown",
+        () => {
+          this._interactionResolve();
+        },
+        { once: true }
+      );
 
       // if (this.fully) this._interactionResolve();
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "browser_mod",
   "private": true,
-  "version": "2.0.0b3",
+  "version": "2.0.0b4",
   "description": "",
   "scripts": {
     "build": "rollup -c",