Handle camera permission denied

Author: zakkempson

public/index.html

@@ -57,9 +57,13 @@
       <div class="permission-denied-text-container">
         <div class="permission-denied-text" id="camera_denied">
           <p>Please reload and allow camera access to use this app.</p>
-          <button id="camera-denied-button" class="info-button">
+          <a
+            class="permission-denied-button"
+            href="https://www.deepar.ai/projects"
+            target="__blank"
+          >
             Discover more
-          </button>
+          </a>
         </div>
       </div>
     </div>

public/style.css

@@ -11,14 +11,14 @@ canvas.deepar {
 body {
   margin: 0px;
   padding: 0px;
+  font-family: sans-serif;
 }
 
 #loading-screen,
 #permission-denied-screen,
 #permission-denied-background {
   background-color: rgb(17 24 39 / 1);
-  background-image: url("/images/gradient.svg"),
-    url("/images/bg-grid-dark.svg");
+  background-image: url("/images/gradient.svg"), url("/images/bg-grid-dark.svg");
   background-repeat: no-repeat, repeat;
   display: flex;
   align-items: center;
@@ -174,4 +174,47 @@ body {
   background: rgb(0 98 209 / 1);
   height: 100%;
   transition: width 5s ease-out;
-}
+}
+
+/* Permission denied screen */
+
+.permission-denied-text-container {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+.permission-denied-text {
+  width: 400px;
+  max-width: 95%;
+  font-size: 16px;
+  line-height: 1.2;
+  color: #fff;
+}
+
+.permission-denied-button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  border-radius: 4px;
+  background-color: #fff;
+  color: #000;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border: none;
+  display: inline-block;
+  text-decoration: none;
+  width: fit-content;
+
+  &:hover {
+    background-color: #eaeaea;
+  }
+}

src/index.js

@@ -37,12 +37,21 @@ console.log("Deepar version: " + deepar.version);
     "effects/Fire_Effect.deepar",
   ];
 
+  let deepAR = null;
+
   // Initialize DeepAR with an effect file.
-  const deepAR = await deepar.initialize({
-    licenseKey: "your_license_key_goes_here",
-    canvas,
-    effect: effectList[0],
-  });
+  try {
+    deepAR = await deepar.initialize({
+      licenseKey: "your_license_key_goes_here",
+      canvas,
+      effect: effectList[0],
+    });
+  } catch (error) {
+    console.error(error);
+    document.getElementById("loading-screen").style.display = "none";
+    document.getElementById("permission-denied-screen").style.display = "block";
+    return;
+  }
 
   var resizeCanvas = function () {
     const canvas = document.getElementById("deepar-canvas");