Skip to content

Commit

Permalink
Update error color
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayinloya
ayinloya committed Dec 19, 2023
1 parent f91cc0c commit 992a366
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 40 deletions.
53 changes: 30 additions & 23 deletions packages/components/document-capture/DocumentCapture.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,29 @@ import './id-capture/src'
import './id-review/src'
import './document-instructions/src'
import { SmartCamera } from "../domain/camera/SmartCamera";
import { IMAGE_TYPE } from "../domain/Constants";
import { IMAGE_TYPE } from "../domain/Constants";
import { version as COMPONENTS_VERSION } from "../package.json";
import styles from '../styles';

async function getPermissions(captureScreen) {
await SmartCamera.getMedia({
audio: false,
video: {
facingMode: 'environment',
width: { min: 1280 },
// NOTE: Special case for multi-camera Samsung devices (learnt from Acuant)
// "We found out that some triple camera Samsung devices (S10, S20, Note 20, etc) capture images blurry at edges.
// Zooming to 2X, matching the telephoto lens, doesn't solve it completely but mitigates it."
zoom: SmartCamera.isSamsungMultiCameraDevice() ? 2.0 : 1.0,
},
});

captureScreen.setAttribute('data-camera-ready', true);
try {
await SmartCamera.getMedia({
audio: false,
video: {
facingMode: 'environment',
width: { min: 1280 },
// NOTE: Special case for multi-camera Samsung devices (learnt from Acuant)
// "We found out that some triple camera Samsung devices (S10, S20, Note 20, etc) capture images blurry at edges.
// Zooming to 2X, matching the telephoto lens, doesn't solve it completely but mitigates it."
zoom: SmartCamera.isSamsungMultiCameraDevice() ? 2.0 : 1.0,
},
});
captureScreen.removeAttribute('data-camera-error');
captureScreen.setAttribute('data-camera-ready', true);
} catch (error) {
captureScreen.removeAttribute('data-camera-ready');
captureScreen.setAttribute('data-camera-error', SmartCamera.handleError(error));
}
}

class DocumentCapture extends HTMLElement {
Expand All @@ -31,20 +36,22 @@ class DocumentCapture extends HTMLElement {
connectedCallback() {
this.innerHTML = `
${styles}
<div>
<document-instruction ${this.hideInstructions ? 'hidden' : ''}></document-instruction>
<id-capture side-of-id='Front' id-type='National ID' ${this.hideInstructions ? '' : 'hidden'} ></id-capture>
<id-capture id='back-of-id' side-of-id='Back' id-type='National ID' hidden ></id-capture>
<id-review hidden></id-review>
<id-review id='back-of-id-review' hidden></id-review>
<thank-you hidden></thank-you>
</div>
`;

this._data = {
images: [],
meta: {
libraryVersion: COMPONENTS_VERSION,
libraryVersion: COMPONENTS_VERSION,
},
};
};

this.documentInstruction = this.querySelector('document-instruction');
this.idCapture = this.querySelector('id-capture');
Expand All @@ -56,7 +63,7 @@ class DocumentCapture extends HTMLElement {
if (this.hideInstructions) {
getPermissions(this.idCapture);
this.setActiveScreen(this.idCapture);
}else{
} else {
this.setActiveScreen(this.documentInstruction);
}

Expand All @@ -65,11 +72,11 @@ class DocumentCapture extends HTMLElement {
disconnectedCallback() {
SmartCamera.stopMedia();
if (this.activeScreen) {
this.activeScreen.removeAttribute('hidden');
this.activeScreen.removeAttribute('hidden');
}
this.activeScreen = null;
this.innerHTML = '';
}
}

setUpEventListeners() {
this.documentInstruction.addEventListener('DocumentInstruction::StartCamera', async () => {
Expand All @@ -82,7 +89,7 @@ class DocumentCapture extends HTMLElement {
this._data.images.push({
image: event.detail.image.split(',')[1],
image_type_id: IMAGE_TYPE.ID_CARD_IMAGE_BASE64,
});
});
SmartCamera.stopMedia();
this.setActiveScreen(this.idReview);
});
Expand All @@ -97,7 +104,7 @@ class DocumentCapture extends HTMLElement {
this.idReview.addEventListener('IdReview::SelectImage', async () => {
if (this.hideBackOfId) {
this._publishSelectedImages();
}else {
} else {
this.setActiveScreen(this.idCaptureBack);
await getPermissions(this.idCaptureBack);
}
Expand All @@ -108,7 +115,7 @@ class DocumentCapture extends HTMLElement {
this._data.images.push({
image: event.detail.image.split(',')[1],
image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64,
});
});
this.setActiveScreen(this.backOfIdReview);
SmartCamera.stopMedia();
});
Expand All @@ -126,7 +133,7 @@ class DocumentCapture extends HTMLElement {
}
_publishSelectedImages() {
this.dispatchEvent(
new CustomEvent('imagesComputed', { detail: this._data }),
new CustomEvent('imagesComputed', { detail: this._data }),
);
}

Expand Down
44 changes: 27 additions & 17 deletions packages/components/document-capture/id-capture/src/IdCaptureScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ function templateString() {
height: 15rem;
}
.img {
transform: scaleX(1);
}
.selfie-review-image {
overflow: hidden;
aspect-ratio: 1/1;
Expand Down Expand Up @@ -247,9 +250,11 @@ function templateString() {
` : ''}
<h2 class='h2 color-digital-blue'>${this.idType}</h2>
<div class="circle-progress" id="loader">
<p class="spinner"></p>
<p style="--flow-space: 4rem">Checking permissions</p>
</div>
${this.cameraError ? `` : `<p class="spinner"></p>`}
${this.cameraError ? `<p style="--flow-space: 4rem" class='color-red | center'>${this.cameraError}</p>` :
`<p style="--flow-space: 4rem">Checking permissions</p>`
}
</div>
<div class='video-section | flow ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}' hidden>
<div class='id-video-container landscape'>
<video id='id-video' class='flow' playsinline autoplay muted></video>
Expand Down Expand Up @@ -448,13 +453,13 @@ class IdCaptureScreen extends HTMLElement {
const videoContainer = this.shadowRoot.querySelector('.id-video-container')

video.onloadedmetadata = () => {
this.shadowRoot.querySelector('.actions').hidden = false;
this.shadowRoot.querySelector('#loader').hidden = true;
this.shadowRoot.querySelector('.actions').hidden = false;
this.shadowRoot.querySelector('#loader').hidden = true;
this.shadowRoot.querySelector('.video-section').hidden = false;
};

if (!videoExists) {
videoContainer.prepend(video);
videoContainer.prepend(video);
}

this._IDStream = stream;
Expand All @@ -464,7 +469,7 @@ class IdCaptureScreen extends HTMLElement {
_stopIDVideoStream(stream = this._IDStream) {
stream.getTracks().forEach((track) => track.stop());
}

setUpEventListeners() {
this.captureIDImage = this.shadowRoot.querySelector('#capture-id-image');
this.backButton = this.shadowRoot.querySelector("#back-button");
Expand Down Expand Up @@ -544,23 +549,28 @@ class IdCaptureScreen extends HTMLElement {
return this.getAttribute('id-type');
}

get cameraError() {
return this.getAttribute('data-camera-error');
}

static get observedAttributes() {
return ["title", 'hidden', 'show-navigation', 'hide-back-to-host', 'data-camera-ready'];
return ["title", 'hidden', 'show-navigation', 'hide-back-to-host', 'data-camera-ready', 'data-camera-error'];
}

attributeChangedCallback(name) {
switch (name) {
case 'title':
case 'data-camera-ready':
case 'hidden':
this.shadowRoot.innerHTML = this.render();
this.setUpEventListeners();
break;
default:
break;
case 'title':
case 'data-camera-ready':
case 'data-camera-error':
case 'hidden':
this.shadowRoot.innerHTML = this.render();
this.setUpEventListeners();
break;
default:
break;
}
}

handleBackEvents() {
this.dispatchEvent(new CustomEvent("SmileIdentity::Exit"));
}
Expand Down
35 changes: 35 additions & 0 deletions packages/components/domain/camera/SmartCamera.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,41 @@ class SmartCamera {
const smallerModelNumber = 970; // S10e
return !isNaN(modelNumber) && modelNumber >= smallerModelNumber;
}

static handleError(e) {
switch (e.name) {
case 'NotAllowedError':
case 'SecurityError':
return `
Looks like camera access was not granted, or was blocked by a browser
level setting / extension. Please follow the prompt from the URL bar,
or extensions, and enable access.
You may need to refresh to start all over again
`;
case 'AbortError':
return `
Oops! Something happened, and we lost access to your stream.
Please refresh to start all over again
`;
case 'NotReadableError':
return `
There seems to be a problem with your device's camera, or its connection.
Please check this, and when resolved, try again. Or try another device.
`;
case 'NotFoundError':
return `
We are unable to find a video stream.
You may need to refresh to start all over again
`;
case 'TypeError':
return `
This site is insecure, and as such cannot have access to your camera.
Try to navigate to a secure version of this page, or contact the owner.
`;
default:
return e.message;
}
}
}

export { SmartCamera };

0 comments on commit 992a366

Please sign in to comment.