Bump DeepAR version, use previewElement container instead of canvas

Author: zakkempson

README.md

@@ -1,5 +1,13 @@
 # quickstart-web-npm-js
 
+This is a quickstart project for DeepAR Web SDK. It is a minimal example of how to use the SDK.
+
+## View the demo
+
+[https://demo.deepar.ai/quickstart-web-js-npm/](https://demo.deepar.ai/quickstart-web-js-npm/)
+
+## How to run the project
+
 - Go to https://developer.deepar.ai
   - Sign up
   - Create a project and a Web app
@@ -9,3 +17,10 @@
   - Run `npm install`
   - Run `npm run dev`
   - If the browser doesn't open automatically, open http://localhost:8888
+
+## How to build the project
+
+- Open the terminal in the root of the project
+  - Run `npm install`
+  - Run `npm run build`
+  - The build will be in the `dist` folder

package.json

@@ -15,6 +15,6 @@
     "webpack-dev-server": "^4.11.0"
   },
   "dependencies": {
-    "deepar": "^5.2.0"
+    "deepar": "^5.4.1"
   }
 }

public/index.html

@@ -25,7 +25,7 @@
         <img
           id="initial-loading-logo"
           style="max-width: 200px"
-          src="/images/crystal.png"
+          src="./images/crystal.png"
           class="animate-bounce"
         />
         <div
@@ -43,7 +43,7 @@
         <img
           id="initial-loading-text"
           style="max-width: 140px; margin-top: 30px"
-          src="/images/powered-by.svg"
+          src="./images/powered-by.svg"
         />
       </div>
     </div>
@@ -69,8 +69,8 @@
     </div>
 
     <!-- AR screen -->
-    <div id="ar-screen" style="display: none">
-      <canvas class="deepar" id="deepar-canvas"></canvas>
+    <div class="fixed-fullscreen screen" id="ar-screen" style="display: none">
+      <!-- <canvas class="deepar" id="deepar-canvas"></canvas> -->
 
       <div class="carousel" id="carousel">
         <div class="carousel-center" id="carousel-center">

public/style.css

@@ -18,13 +18,19 @@ body {
 #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;
   justify-content: center;
-  height: 100vh;
+}
+
+.fixed-fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100vw;
+  height: 100vh;
 }
 
 /* Carousel */

src/index.js

@@ -7,11 +7,8 @@ console.log("Deepar version: " + deepar.version);
 // Top-level await is not supported.
 // So we wrap the whole code in an async function that is called immediatly.
 (async function () {
-  // Resize the canvas according to screen size and pixel ratio.
-  const canvas = document.getElementById("deepar-canvas");
-  const dpr = window.devicePixelRatio || 1;
-  canvas.width = Math.floor(window.innerWidth * dpr);
-  canvas.height = Math.floor(window.innerHeight * dpr);
+  // Get the element you want to place DeepAR into. DeepAR will inherit its width and height from this and fill it.
+  const previewElement = document.getElementById("ar-screen");
 
   // trigger loading progress bar animation
   const loadingProgressBar = document.getElementById("loading-progress-bar");
@@ -43,12 +40,17 @@ console.log("Deepar version: " + deepar.version);
   try {
     deepAR = await deepar.initialize({
       licenseKey: "your_license_key_goes_here",
-      canvas,
+      previewElement,
       effect: effectList[0],
       // Removing the rootPath option will make DeepAR load the resources from the JSdelivr CDN,
       // which is fine for development but is not recommended for production since it's not optimized for performance and can be unstable.
       // More info here: https://docs.deepar.ai/deepar-sdk/deep-ar-sdk-for-web/download-optimizations#custom-deployment-of-deepar-web-resources
       rootPath: "./deepar-resources",
+      additionalOptions: {
+        cameraConfig: {
+          // facingMode: 'environment'  // uncomment this line to use the rear camera
+        },
+      },
     });
   } catch (error) {
     console.error(error);
@@ -57,15 +59,6 @@ console.log("Deepar version: " + deepar.version);
     return;
   }
 
-  var resizeCanvas = function () {
-    const canvas = document.getElementById("deepar-canvas");
-    const dpr = window.devicePixelRatio || 1;
-    canvas.width = Math.floor(window.innerWidth * dpr);
-    canvas.height = Math.floor(window.innerHeight * dpr);
-  };
-
-  window.addEventListener("resize", resizeCanvas);
-
   // Hide the loading screen.
   document.getElementById("loading-screen").style.display = "none";
   document.getElementById("ar-screen").style.display = "block";