diff --git a/packages/web-components/components/selfie/src/SelfieCaptureScreens.js b/packages/web-components/components/selfie/src/SelfieCaptureScreens.js index ac88a483..32e306a4 100644 --- a/packages/web-components/components/selfie/src/SelfieCaptureScreens.js +++ b/packages/web-components/components/selfie/src/SelfieCaptureScreens.js @@ -7,9 +7,14 @@ import { version as COMPONENTS_VERSION } from '../../../package.json'; async function getPermissions(captureScreen, facingMode = 'user') { try { - await SmartCamera.getMedia({ audio: false, video: { facingMode } }); + const supportAgentMode = await SmartCamera.supportsAgentMode(); + const _facingMode = supportAgentMode ? facingMode : 'user'; + await SmartCamera.getMedia({ audio: false, video: { facingMode: _facingMode } }); captureScreen.removeAttribute('data-camera-error'); captureScreen.setAttribute('data-camera-ready', true); + if (supportAgentMode) { + captureScreen.setAttribute('has-agent-support', true); + } } catch (error) { captureScreen.removeAttribute('data-camera-ready'); captureScreen.setAttribute( @@ -50,6 +55,7 @@ class SelfieCaptureScreens extends HTMLElement { getPermissions(this.selfieCapture, this.getAgentMode()); } + // If the initial screen is selfie-capture, we need to get permissions if (this.getAttribute('initial-screen') === 'selfie-capture') { getPermissions(this.selfieCapture, this.getAgentMode()); this.setActiveScreen(this.selfieCapture); diff --git a/packages/web-components/components/selfie/src/selfie-capture/SelfieCapture.js b/packages/web-components/components/selfie/src/selfie-capture/SelfieCapture.js index 65828d91..7d115827 100644 --- a/packages/web-components/components/selfie/src/selfie-capture/SelfieCapture.js +++ b/packages/web-components/components/selfie/src/selfie-capture/SelfieCapture.js @@ -862,7 +862,7 @@ class SelfieCaptureScreen extends HTMLElement { return; } - const supportAgentMode = await this.supportsAgentMode(); + const supportAgentMode = this.hasAgentSupport ?? await SmartCamera.supportsAgentMode(); if (supportAgentMode || this.hasAttribute('show-agent-mode-for-tests')) { this.switchCamera.hidden = false; @@ -871,32 +871,8 @@ class SelfieCaptureScreen extends HTMLElement { } } - async supportsAgentMode() { - try { - const devices = await navigator.mediaDevices.enumerateDevices(); - const videoDevices = devices.filter( - (device) => device.kind === 'videoinput', - ); - - let hasBackCamera = false; - - videoDevices.forEach((device) => { - // Check if the device label or device ID indicates a back camera - if ( - device.label.toLowerCase().includes('back') || - device.label.toLowerCase().includes('rear') - ) { - hasBackCamera = true; - return true; - } - return false; - }); - - return hasBackCamera; - } catch (error) { - console.warn('Error accessing media devices: ', error); - return false; - } + get hasAgentSupport() { + return this.hasAttribute('has-agent-support'); } get title() { diff --git a/packages/web-components/domain/camera/src/SmartCamera.js b/packages/web-components/domain/camera/src/SmartCamera.js index c735000f..32230fb4 100644 --- a/packages/web-components/domain/camera/src/SmartCamera.js +++ b/packages/web-components/domain/camera/src/SmartCamera.js @@ -31,6 +31,34 @@ class SmartCamera { } } + static async supportsAgentMode() { + try { + const devices = await navigator.mediaDevices.enumerateDevices(); + const videoDevices = devices.filter( + (device) => device.kind === 'videoinput', + ); + + let hasBackCamera = false; + + videoDevices.forEach((device) => { + // Check if the device label or device ID indicates a back camera + if ( + device.label.toLowerCase().includes('back') || + device.label.toLowerCase().includes('rear') + ) { + hasBackCamera = true; + return true; + } + return false; + }); + + return hasBackCamera; + } catch (error) { + console.warn('Error accessing media devices: ', error); + return false; + } + } + static isSamsungMultiCameraDevice() { const matchedModelNumber = navigator.userAgent.match(/SM-[N|G]\d{3}/); if (!matchedModelNumber) {