From 70efef93818a08c8dd40640c2739d16868a0df07 Mon Sep 17 00:00:00 2001 From: Levhita Date: Thu, 18 Jul 2024 10:30:31 -0600 Subject: [PATCH] ask for permissions first --- index.html | 3 +- main.js | 82 ++++++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 70 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 3df5a9d..dd7b786 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,11 @@ - Vite WebSDK Example + Permission Example
+
diff --git a/main.js b/main.js index bc6c56f..73a1d72 100644 --- a/main.js +++ b/main.js @@ -3,6 +3,8 @@ import { fakeBackendStart, fakeBackendFinish } from './fake_backend' let incode; let incodeSession; const container = document.getElementById("camera-container"); +const permissionButton = document.getElementById("ask-permission"); +const permissionScreen = document.getElementById("permission-screen"); function showError(e=null) { container.innerHTML = "

There was an error

"; @@ -57,17 +59,17 @@ function finishOnboarding() { // Finishing the session works along with the configuration in the flow // webhooks and business rules are ran here. fakeBackendFinish(incodeSession.token) - .then((response) => { - console.log(response); - const container = document.getElementById("finish-container"); - container.innerHTML = "

Onboarding Finished.

"; - }) - .catch((error) => { - showError(error); - }); + .then((response) => { + console.log(response); + const container = document.getElementById("finish-container"); + container.innerHTML = "

Onboarding Finished.

"; + }) + .catch((error) => { + showError(error); + }); } -async function app() { +async function runIncode() { try { const apiURL = import.meta.env.VITE_API_URL; incode = window.OnBoarding.create({ @@ -77,12 +79,12 @@ async function app() { // Create the single session container.innerHTML = "

Creating session...

"; try { - incodeSession = await fakeBackendStart(); + incodeSession = await fakeBackendStart(); } catch(e) { - showError(e); - return; + showError(e); + return; } - + // Empty the container and start the flow container.innerHTML = ""; saveDeviceData(); @@ -93,4 +95,56 @@ async function app() { } } -document.addEventListener("DOMContentLoaded", app); +async function askPermissions(callback){ + + const permissionError = () => { + permissionScreen.innerHTML="One or more Permissions where denied, please reset your permissions from config > Site config" + } + + const askCamera = (callback) => { + navigator.getUserMedia ( + // Constraints + {video: true}, + + // Success Callback + function(localMediaStream) { + console.log('Camera permission accepted'); + callback(); + }, + + // Error Callback + function(cameraError) { + console.log({cameraError}); + permissionError(); + } + ); + } + + const askGeolocation = (callback) => { + + navigator.geolocation.getCurrentPosition( + // Success Callback + function (position) { + console.log('Geolocation permission accepted'); + callback(); + }, + + // Error CallBack + function (geolocationError){ + console.log({geolocationError}); + permissionError(); + } + ); + } + + askGeolocation( () => askCamera( () => { + permissionScreen.remove(); + callback(); + })); +} + +permissionButton.addEventListener("click", () => { + askPermissions(() => runIncode()); +}); + +