From 652a3822d1c0ff925c5bc2d1046fc6e2f6961d80 Mon Sep 17 00:00:00 2001 From: Solomon Nsubuga Date: Mon, 12 Aug 2024 14:02:43 +0100 Subject: [PATCH 1/2] Added green book document to changelog (#303) * Added green book document to changelog * update the package version * fix to 1.3.6 --- CHANGELOG.md | 6 ++++++ example/package.json | 2 +- package-lock.json | 12 ++++++------ package.json | 2 +- packages/embed/package.json | 2 +- packages/smart-camera-web/package.json | 2 +- .../components/signature-pad/package.json | 2 +- packages/web-components/package.json | 2 +- 8 files changed, 18 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f5fe0b6..fd374209 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [1.3.6] - 2024-08-01 + +### Changed + +- Added green book document to document verification + ## [1.3.5] - 2024-07-12 ### Changed diff --git a/example/package.json b/example/package.json index 9a5414df..67b5cafe 100644 --- a/example/package.json +++ b/example/package.json @@ -1,7 +1,7 @@ { "name": "example", "private": true, - "version": "1.3.5", + "version": "1.3.6", "type": "module", "main": "server.js", "scripts": { diff --git a/package-lock.json b/package-lock.json index 39b3ab18..b9e7fe06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@smileid/web", - "version": "1.3.5", + "version": "1.3.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@smileid/web", - "version": "1.3.5", + "version": "1.3.6", "license": "MIT", "workspaces": [ "packages/web-components/*/*", @@ -14660,7 +14660,7 @@ }, "packages/embed": { "name": "@smileid/embed", - "version": "1.3.5", + "version": "1.3.6", "dependencies": { "@sentry/browser": "^8.13.0", "@sentry/esbuild-plugin": "^2.20.1", @@ -14687,7 +14687,7 @@ }, "packages/smart-camera-web": { "name": "@smile_identity/smart-camera-web", - "version": "1.3.5", + "version": "1.3.6", "license": "MIT", "devDependencies": { "@cypress/code-coverage": "^3.12.39", @@ -14701,7 +14701,7 @@ }, "packages/web-components": { "name": "@smileid/web-components", - "version": "1.3.5", + "version": "1.3.6", "dependencies": { "signature_pad": "^5.0.2", "validate.js": "^0.13.1" @@ -14721,7 +14721,7 @@ }, "packages/web-components/components/signature-pad": { "name": "@smileid/signature-pad", - "version": "1.3.5", + "version": "1.3.6", "dependencies": { "signature_pad": "^5.0.2" }, diff --git a/package.json b/package.json index aa635d0e..d1b42330 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@smileid/web", - "version": "1.3.5", + "version": "1.3.6", "description": "A collection of SmileID browser clients and components", "main": "index.js", "private": true, diff --git a/packages/embed/package.json b/packages/embed/package.json index 55c1126b..de0eb1c0 100644 --- a/packages/embed/package.json +++ b/packages/embed/package.json @@ -1,6 +1,6 @@ { "name": "@smileid/embed", - "version": "1.3.5", + "version": "1.3.6", "description": "Self Hosted Integration for Smile Identity on the Web", "private": true, "main": "inline.js", diff --git a/packages/smart-camera-web/package.json b/packages/smart-camera-web/package.json index 718c3302..0a7cceb8 100644 --- a/packages/smart-camera-web/package.json +++ b/packages/smart-camera-web/package.json @@ -1,6 +1,6 @@ { "name": "@smile_identity/smart-camera-web", - "version": "1.3.5", + "version": "1.3.6", "description": "WebComponent for smartly capturing images on the web, for use with SmileIdentity", "main": "smart-camera-web.js", "scripts": { diff --git a/packages/web-components/components/signature-pad/package.json b/packages/web-components/components/signature-pad/package.json index d1af4b2c..0eeea56b 100644 --- a/packages/web-components/components/signature-pad/package.json +++ b/packages/web-components/components/signature-pad/package.json @@ -1,6 +1,6 @@ { "name": "@smileid/signature-pad", - "version": "1.3.5", + "version": "1.3.6", "private": "true", "exports": { ".": "./index.js" diff --git a/packages/web-components/package.json b/packages/web-components/package.json index bdc63463..88e697e0 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@smileid/web-components", - "version": "1.3.5", + "version": "1.3.6", "private": "true", "exports": { ".": "./index.js", From 2f28e9b0a276fc0d25ee2afcff823bfe352cf832 Mon Sep 17 00:00:00 2001 From: Barnabas A Nsoh Date: Tue, 13 Aug 2024 11:19:29 +0000 Subject: [PATCH 2/2] [WebComponents] Enh document capture margins (#292) * Make document capture to capture more margins * Convert portrait video to landscape * Fix preview image dimention * Fix lint * Format document capture * Fix document back preview Add height and width attributes * Dynamically calculate scaleOffset Reuse this._drawLandscapeImage for summited image when in landscape mode Refactor _drawLandscapeImage to accept scaleheight and width * Refactor mobile capture * Fix package.json * Fix lint * Crop mobile portrait view * [WebComponents] Enh document portrait margins (#294) * Handle Portrait Mode for documents like green card * Fix missing function error --- .../document/src/DocumentCaptureScreens.js | 4 +- .../DocumentCaptureInstructions.js | 2 +- .../DocumentCaptureReview.js | 40 +- .../src/document-capture/DocumentCapture.js | 493 ++++++++++-------- 4 files changed, 301 insertions(+), 238 deletions(-) diff --git a/packages/web-components/components/document/src/DocumentCaptureScreens.js b/packages/web-components/components/document/src/DocumentCaptureScreens.js index ee869d4e..14c707d6 100644 --- a/packages/web-components/components/document/src/DocumentCaptureScreens.js +++ b/packages/web-components/components/document/src/DocumentCaptureScreens.js @@ -187,7 +187,7 @@ class DocumentCaptureScreens extends HTMLElement { this.documentInstructionBack.addEventListener( 'document-capture-instructions.upload', async (event) => { - this.idReview.setAttribute('data-image', event.detail.image); + this.backOfIdReview.setAttribute('data-image', event.detail.image); this._data.images.push({ image: event.detail.image.split(',')[1], image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64, @@ -196,7 +196,7 @@ class DocumentCaptureScreens extends HTMLElement { }, ); this.idCaptureBack.addEventListener('document-capture.publish', (event) => { - this.backOfIdReview.setAttribute('data-image', event.detail.image); + this.backOfIdReview.setAttribute('data-image', event.detail.previewImage); this._data.images.push({ image: event.detail.image.split(',')[1], image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64, diff --git a/packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js b/packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js index a137558d..9a27b26b 100644 --- a/packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js +++ b/packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js @@ -423,7 +423,7 @@ class DocumentInstruction extends HTMLElement { this.dispatchEvent( new CustomEvent('document-capture-instructions.upload', { - detail: { image: fileData }, + detail: { image: fileData, previewImage: fileData }, }), ); } catch (error) { diff --git a/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.js b/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.js index 96e7bf12..ee44e8bd 100644 --- a/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.js +++ b/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.js @@ -21,18 +21,6 @@ function templateString() { height: 100vh; justify-content: center; } - - .video-overlay { - position: absolute; - border-width: 1rem; - border-color: white; - border-style: solid; - inset: 0px; - } - - img { - clip-path: polygon(10% 10%, 90% 10%, 90% 85%, 10% 85%); - } } .id-image-container { @@ -43,25 +31,15 @@ function templateString() { } .id-image { - max-width: fit-content; - height: auto; - text-align: center; - position: relative; - overflow: hidden; + width: 100%; + text-align: center; + position: relative; + background: white; } img { height: 100%; min-height: 100px; - clip-path: polygon(5% 5%, 95% 5%, 95% 90%, 5% 90%); - } - - .video-overlay .inner-border { - position: absolute; - border-width: 1rem; - border-color: #9394ab; - border-style: solid; - border-radius: 1rem; - inset: -8px; + width: 98%; } .action-buttons { @@ -179,6 +157,12 @@ function templateString() { .padding-bottom-2 { padding-bottom: 2rem; } + img { + border-width: 0.25rem; + border-color: #9394ab; + border-style: solid; + border-radius: 0.25rem; + } .instructions-wrapper { display: inline-flex; @@ -247,7 +231,7 @@ function templateString() {
- ${this.imageSrc ? `your ID card` : ''} + ${this.imageSrc ? `your ID card` : ''}
-
+

${this.title}

@@ -192,7 +191,8 @@ function templateString() { `; } -const fixedAspectRatio = 1.53; +const documentCaptureScale = 0.6; + class DocumentCapture extends HTMLElement { constructor() { super(); @@ -223,10 +223,14 @@ class DocumentCapture extends HTMLElement { try { await SmartCamera.getMedia({ audio: false, - video: SmartCamera.environmentOptions, + video: { + ...SmartCamera.environmentOptions, + aspectRatio: { ideal: 16 / 9 }, + }, }); } catch (error) { console.error(error.constraint); + console.error(error.message); } this.handleIDStream(SmartCamera.stream); @@ -249,49 +253,16 @@ class DocumentCapture extends HTMLElement { const canvas = document.createElement('canvas'); if (this.isPortraitCaptureView) { canvas.width = video.videoWidth; - canvas.height = video.videoHeight; - - // Draw the video frame onto the canvas - const ctx = canvas.getContext('2d'); - ctx.drawImage(video, 0, 0, canvas.width, canvas.height); - - // Get the dimensions of the video preview frame - const previewWidth = PORTRAIT_ID_PREVIEW_WIDTH; - const previewHeight = PORTRAIT_ID_PREVIEW_HEIGHT; - - // Define the padding value - const paddingPercent = 1.1; // 110% of the preview dimensions because we previously scaled the image, old value was 50%; - const paddedWidth = previewWidth * (1 + paddingPercent); - const paddedHeight = previewHeight * (1 + paddingPercent); - - // Calculate the dimensions of the cropped image based on the padded preview frame dimensions - const cropWidth = paddedWidth; - const cropHeight = paddedHeight; - const cropLeft = (canvas.width - cropWidth) / 2; - const cropTop = (canvas.height - cropHeight) / 2; - - // Create a new canvas element for the cropped image - const croppedCanvas = document.createElement('canvas'); - croppedCanvas.width = cropWidth; - croppedCanvas.height = cropHeight; - - // Draw the cropped image onto the new canvas - const croppedCtx = croppedCanvas.getContext('2d'); - croppedCtx.drawImage( - canvas, - cropLeft, - cropTop, - cropWidth, - cropHeight, - 0, - 0, - cropWidth, - cropHeight, - ); + canvas.height = (canvas.width * 16) / 9; - const image = croppedCanvas.toDataURL('image/jpeg'); - const previewImage = image; + const previewCanvas = document.createElement('canvas'); + previewCanvas.width = canvas.width; + previewCanvas.height = canvas.height; + this.updatePortraitId(canvas, video, 1, 1); + this.updatePortraitId(previewCanvas, video); + const image = canvas.toDataURL('image/jpeg'); + const previewImage = previewCanvas.toDataURL('image/jpeg'); return { image, originalHeight: canvas.height, @@ -304,66 +275,33 @@ class DocumentCapture extends HTMLElement { canvas.width = 2240; canvas.height = 1260; - const context = canvas.getContext('2d'); - - const { aspectRatio } = this._calculateVideoOffset(video); - - if (aspectRatio < 1) { - canvas.width = video.videoWidth; - canvas.height = video.videoHeight; - - // Draw the video frame onto the canvas - const ctx = canvas.getContext('2d'); - ctx.drawImage(video, 0, 0, canvas.width, canvas.height); - - const paddedWidth = canvas.width; - const paddedHeight = canvas.width / fixedAspectRatio; - - // Calculate the dimensions of the cropped image based on the padded preview frame dimensions - const cropWidth = paddedWidth; - const cropHeight = paddedHeight; - const cropLeft = 0; - const cropTop = canvas.height / 2 - paddedHeight / 2; - - // Create a new canvas element for the cropped image - const croppedCanvas = document.createElement('canvas'); - croppedCanvas.width = cropWidth; - croppedCanvas.height = cropHeight; - - // Draw the cropped image onto the new canvas - const croppedCtx = croppedCanvas.getContext('2d'); - croppedCtx.drawImage( - canvas, - cropLeft, - cropTop, - cropWidth, - cropHeight, - 0, - 0, - cropWidth, - cropHeight, - ); - const image = croppedCanvas.toDataURL('image/jpeg'); - - return { - image, - originalHeight: canvas.height, - originalWidth: canvas.width, - previewImage: image, - ...this.idCardRegion, - }; - } - const height = canvas.width / (video.videoWidth / video.videoHeight); canvas.height = height; - context.drawImage(video, 0, 0, canvas.width, canvas.height); + + const previewCanvas = document.createElement('canvas'); + previewCanvas.height = canvas.height; + previewCanvas.width = canvas.width; + const isPortrait = video.videoWidth < video.videoHeight; + if (isPortrait) { + const intermediateCanvas = document.createElement('canvas'); + previewCanvas.height = canvas.width / 1.75; + canvas.width = 2240; + canvas.height = canvas.width / 1.77; + this._capturePortraitToLandscapeImage(intermediateCanvas, video); + this._drawLandscapeImageFromCanvas(canvas, intermediateCanvas, 1, 1); + this._drawLandscapeImageFromCanvas(previewCanvas, intermediateCanvas); + } else { + this._drawLandscapeImage(canvas, video, 1, 1); + this._drawLandscapeImage(previewCanvas, video); + } const image = canvas.toDataURL('image/jpeg'); + const previewImage = previewCanvas.toDataURL('image/jpeg'); return { image, originalHeight: canvas.height, originalWidth: canvas.width, - previewImage: image, + previewImage, ...this.idCardRegion, }; } @@ -401,28 +339,19 @@ class DocumentCapture extends HTMLElement { } handleIDStream(stream) { - const videoExists = this.shadowRoot.querySelector('video'); - let video = null; + const videoExists = this.shadowRoot.querySelector('canvas'); if (videoExists) { - video = this.shadowRoot.querySelector('video'); - } else { - video = document.createElement('video'); + // remove canvas + videoExists.remove(); } - const videoContainer = this.shadowRoot.querySelector('.id-video'); - const MIN_WIDTH = 272; - const width = - videoContainer.clientWidth < MIN_WIDTH - ? MIN_WIDTH - : videoContainer.clientWidth; - video.style.width = `${width}px`; - video.style.height = '0px'; - video.style.display = 'block'; + let video = null; + let canvas = null; + video = document.createElement('video'); + canvas = document.createElement('canvas'); + const videoContainer = this.shadowRoot.querySelector('.id-video-container'); + video.muted = true; video.setAttribute('muted', 'true'); - if (this.isPortraitCaptureView) { - video.style.objectFit = 'cover'; - video.style.scale = '1'; - } video.autoplay = true; video.playsInline = true; @@ -432,104 +361,246 @@ class DocumentCapture extends HTMLElement { video.src = window.URL.createObjectURL(stream); } + canvas.width = videoContainer.clientWidth; + canvas.height = (videoContainer.clientWidth * 9) / 16; + if (this.isPortraitCaptureView) { + canvas.height = (videoContainer.clientWidth * 16) / 9; + } + video.onloadedmetadata = () => { video.play(); + + this.shadowRoot.querySelector('#loader').hidden = true; + this.shadowRoot.querySelector('.id-video').hidden = false; + this.shadowRoot.querySelector('.actions').hidden = false; }; const onVideoStart = () => { - const { - aspectRatio, - offsetHeight, - offsetWidth, - videoHeight, - videoWidth, - } = this._calculateVideoOffset(video); + if (video.paused || video.ended) return; + video.removeEventListener('playing', onVideoStart); + const aspectRatio = video.videoWidth / video.videoHeight; const portrait = aspectRatio < 1; + if (this.isPortraitCaptureView) { + this.updatePortraitId(canvas, video); + requestAnimationFrame(onVideoStart); + return; + } if (portrait) { videoContainer.classList.add('mobile-camera-screen'); - videoContainer.style.height = `${videoHeight}px`; - } - videoContainer.style.width = `${videoWidth}px`; - videoContainer.style.maxHeight = `${videoHeight}px`; - video.style.height = `${videoHeight}px`; - const idCardRegionWidth = videoWidth - offsetWidth; - const idCardRegionHeight = videoHeight - offsetHeight; - - const rightLeftBorderSize = 20; - const topBottomBorderSize = 20; - this.idCardRegion = { - height: idCardRegionHeight, - rightLeftBorderSize, - topBottomBorderSize, - width: idCardRegionWidth, - x: offsetWidth / 2, - y: offsetHeight / 2, - }; - - let videoOverlay = videoContainer.querySelector('.video-overlay'); - if (videoOverlay) { - videoOverlay.remove(); + const intermediateCanvas = document.createElement('canvas'); + this._capturePortraitToLandscapeImage(intermediateCanvas, video); + this._drawLandscapeImageFromCanvas(canvas, intermediateCanvas); + } else { + this._drawLandscapeImage(canvas, video); } - videoOverlay = document.createElement('div'); - const shadeColor = 'white'; - videoOverlay.classList.add('video-overlay'); - - videoOverlay.style.borderLeft = `${rightLeftBorderSize}px solid ${shadeColor}`; - videoOverlay.style.borderRight = `${rightLeftBorderSize}px solid ${shadeColor}`; - videoOverlay.style.borderTop = `${topBottomBorderSize}px solid ${shadeColor}`; - videoOverlay.style.borderBottom = `${topBottomBorderSize}px solid ${shadeColor}`; - videoOverlay.style.top = '0px'; - videoOverlay.style.bottom = '0px'; - videoOverlay.style.left = '0px'; - videoOverlay.style.right = '0px'; - videoOverlay.style.inset = '-1px'; - - const innerBorder = document.createElement('div'); - innerBorder.classList.add('inner-border'); - videoOverlay.appendChild(innerBorder); - videoContainer.appendChild(videoOverlay); - this.videoOverlay = videoOverlay; - this.shadowRoot.querySelector('#loader').hidden = true; - this.shadowRoot.querySelector('.id-video').hidden = false; - this.shadowRoot.querySelector('.actions').hidden = false; - video.removeEventListener('playing', onVideoStart); + requestAnimationFrame(onVideoStart); }; video.addEventListener('playing', onVideoStart); if (!videoExists) { - videoContainer.prepend(video); + videoContainer.prepend(canvas); } this._IDStream = stream; this._IDVideo = video; } - _calculateVideoOffset(video) { - const offset = 30; - const aspectRatio = video.videoWidth / video.videoHeight; - const calculatedAspectRatio = this.isPortraitCaptureView - ? PORTRAIT_ID_PREVIEW_WIDTH / PORTRAIT_ID_PREVIEW_HEIGHT - : fixedAspectRatio; - const portrait = aspectRatio < 1; - const videoWidth = video.clientWidth; - const videoHeight = video.clientWidth / calculatedAspectRatio; - const originalWidth = video.videoWidth; - const originalHeight = video.videoWidth / calculatedAspectRatio; + _drawLandscapeImage( + canvas, + video = this._IDVideo, + scaleHeight = documentCaptureScale, + scaleWidth = documentCaptureScale, + ) { + const heightScaleFactor = this.height + ? this.height / video.videoHeight + : scaleHeight; + const widthScaleFactor = this.width + ? this.width / video.videoWidth + : scaleWidth; + const scaleHeightOffset = (1 - scaleHeight) / 2; + const scaleWidthOffset = (1 - scaleWidth) / 2; + const width = video.videoWidth * widthScaleFactor; + const height = video.videoHeight * heightScaleFactor; + const startX = video.videoWidth * scaleWidthOffset; + const startY = video.videoHeight * scaleHeightOffset; + + canvas + .getContext('2d') + .drawImage( + video, + startX, + startY, + width, + height, + 0, + 0, + canvas.width, + canvas.height, + ); + } - const offsetHeight = videoHeight * ((portrait ? 5 : offset) / 100); - const offsetWidth = videoWidth * (offset / 100); + _capturePortraitToLandscapeImage(canvas, video = this._IDVideo) { + const { videoHeight, videoWidth } = video; + const cropWidth = videoWidth; + const cropHeight = (videoWidth * 9) / 16; // convert to landscape aspect ratio + const startX = 0; + const startY = (videoHeight - cropHeight) / 2; + + canvas.width = cropWidth; + canvas.height = cropHeight; + + canvas + .getContext('2d') + .drawImage( + video, + startX, + startY, + cropWidth, + cropHeight, + 0, + 0, + canvas.width, + canvas.height, + ); + } - return { - aspectRatio, - offsetHeight, - offsetWidth, - originalHeight, - originalWidth, - videoHeight, - videoWidth, - }; + _drawLandscapeImageFromCanvas( + canvas, + sourceCanvas, + scaleHeight = documentCaptureScale, + scaleWidth = documentCaptureScale, + ) { + const heightScaleFactor = this.height + ? this.height / sourceCanvas.height + : scaleHeight; + const widthScaleFactor = this.width + ? this.width / sourceCanvas.width + : scaleWidth; + const scaleHeightOffset = (1 - scaleHeight) / 2; + const scaleWidthOffset = (1 - scaleWidth) / 2; + const width = sourceCanvas.width * widthScaleFactor; + const height = sourceCanvas.height * heightScaleFactor; + const startX = sourceCanvas.width * scaleWidthOffset; + const startY = sourceCanvas.height * scaleHeightOffset; + + canvas + .getContext('2d') + .drawImage( + sourceCanvas, + startX, + startY, + width, + height, + 0, + 0, + canvas.width, + canvas.height, + ); + } + + _drawPortraitToLandscapeImage(canvas, video = this._IDVideo) { + const { videoHeight, videoWidth } = video; + const cropWidth = 600; + const cropHeight = 400; + + canvas.width = cropWidth; + canvas.height = cropHeight; + + const startX = (videoWidth - cropWidth) / 2; + const startY = (videoHeight - cropHeight) / 2; + + canvas + .getContext('2d') + .drawImage( + video, + startX, + startY, + cropWidth, + cropHeight, + 0, + 0, + canvas.width, + canvas.height, + ); + } + + updatePortraitId( + destinationCanvas, + video = this._IDVideo, + scaleHeight = documentCaptureScale, + scaleWidth = documentCaptureScale, + ) { + const { videoWidth, videoHeight } = video; + + if (videoWidth && videoHeight) { + const intermediateCanvas = document.createElement('canvas'); + const aspectRatio = 9 / 16; + let cropWidth; + let cropHeight; + let offsetX; + let offsetY; + + if (videoWidth / videoHeight > aspectRatio) { + // we scale the canvas to portrait aspect ratio + cropHeight = videoHeight; + cropWidth = cropHeight * aspectRatio; + offsetX = (videoWidth - cropWidth) / 2; + offsetY = 0; + } else { + // video already has portrait aspect ratio + cropWidth = videoWidth; + cropHeight = cropWidth; + offsetX = 0; + offsetY = 0; + } + + intermediateCanvas.height = cropHeight; + intermediateCanvas.width = cropWidth; + // draw the video frame onto the intermediate canvas + intermediateCanvas + .getContext('2d') + .drawImage( + video, + offsetX, + offsetY, + cropWidth, + cropHeight, + 0, + 0, + intermediateCanvas.width, + intermediateCanvas.height, + ); + + // draw the intermediate canvas onto the destination canvas + // we scale image based on the scaleHeight and scaleWidth + const heightScaleFactor = this.height + ? this.height / cropWidth + : scaleHeight; + const widthScaleFactor = this.width + ? this.width / cropHeight + : scaleWidth; + const scaleHeightOffset = (1 - scaleHeight) / 2; + const scaleWidthOffset = (1 - scaleWidth) / 2; + const width = cropWidth * widthScaleFactor; + const height = cropHeight * heightScaleFactor; + const startX = cropWidth * scaleWidthOffset; + const startY = cropHeight * scaleHeightOffset; + destinationCanvas + .getContext('2d') + .drawImage( + intermediateCanvas, + startX, + startY, + width, + height, + 0, + 0, + destinationCanvas.width, + destinationCanvas.height, + ); + } } _stopIDVideoStream(stream = this._IDStream) { @@ -591,6 +662,14 @@ class DocumentCapture extends HTMLElement { ); } + get height() { + return this.getAttribute('height'); + } + + get width() { + return this.getAttribute('width'); + } + get hidden() { return this.getAttribute('hidden'); }