From d893cf2ef19b83f1c6439e94a048079572c934cb Mon Sep 17 00:00:00 2001 From: "afiq.hamzah" Date: Sat, 20 May 2023 16:47:33 +0800 Subject: [PATCH] Add fix for smashed marhun photo --- public/js/marhun-photo-capture.js | 110 +++++++++++------- .../marhun/partials/camera_modals.blade.php | 6 +- .../camera_modals_per_marhun.blade.php | 7 +- 3 files changed, 75 insertions(+), 48 deletions(-) diff --git a/public/js/marhun-photo-capture.js b/public/js/marhun-photo-capture.js index b7afb645..b8e1095c 100644 --- a/public/js/marhun-photo-capture.js +++ b/public/js/marhun-photo-capture.js @@ -4,7 +4,6 @@ function marhunPhotoCapturerFactory(modal_selector) { return { constraints: { - audio: false, video: true, }, @@ -17,6 +16,22 @@ function marhunPhotoCapturerFactory(modal_selector) { let modal = document.querySelector(modal_selector); let imageTag = modal.querySelector('.image-tag-overallmarhun'); + let canvas = document.createElement('canvas'); + + let captureImage = () => { + return new Promise(function (resolve, reject) { + try { + let modal = document.querySelector(modal_selector); + let videoTag = modal.querySelector('.video-tag-overallmarhun.video-data'); + canvas.width = 1920; + canvas.height = 1080; + canvas.getContext("2d").drawImage(videoTag, 0, 0, canvas.width, canvas.height) + resolve(canvas); + } catch (error) { + reject(error); + } + }); + }; let setMarhunPhotoInputToCapturedPhoto = function (blob) { const modal = document.querySelector(modal_selector); @@ -33,30 +48,33 @@ function marhunPhotoCapturerFactory(modal_selector) { }; - imageCapturer.takePhoto() - .then((blob) => { - imageTag.src = URL.createObjectURL(blob); - imageTag.classList.add('marhun-uploaded'); + captureImage() + .then((canvas) => { + canvas.toBlob(function (blob) { + + imageTag.src = URL.createObjectURL(blob); + imageTag.classList.add('marhun-uploaded'); + + modal.querySelector('.video-tag-overallmarhun').classList.add('d-none'); + + modal.querySelector('.camera-shutter').classList.remove('d-none'); + modal.querySelector('.camera-shutter').classList.add('d-flex'); + + window.setTimeout(() => { + modal.querySelector('.image-tag-overallmarhun').classList.remove('d-none'); + modal.querySelector('.camera-shutter').classList.remove('d-flex'); + modal.querySelector('.camera-shutter').classList.add('d-none'); + modal.querySelector('.camera-button').classList.add('d-none') + }, 1000); + + modal.querySelector('button[type="submit"]').disabled = false; + + setMarhunPhotoInputToCapturedPhoto(blob) - modal.querySelector('.video-tag-overallmarhun').classList.add('d-none'); - - modal.querySelector('.camera-shutter').classList.remove('d-none'); - modal.querySelector('.camera-shutter').classList.add('d-flex'); - - window.setTimeout(() => { - modal.querySelector('.image-tag-overallmarhun').classList.remove('d-none'); - modal.querySelector('.camera-shutter').classList.remove('d-flex'); - modal.querySelector('.camera-shutter').classList.add('d-none'); - modal.querySelector('.camera-button').classList.add('d-none') - }, 1000); - - modal.querySelector('button[type="submit"]').disabled = false; - - return blob; + }, 'image/png'); }) - .then(blob => setMarhunPhotoInputToCapturedPhoto(blob)) .catch((err) => { console.error("takePhoto() failed: ", err); }); @@ -75,10 +93,10 @@ function marhunPhotoCapturerFactory(modal_selector) { getCamera: function () { function getCameraList() { - let getUserMedia = () => navigator.mediaDevices.getUserMedia({audio: true, video: true}); + let getUserMedia = () => navigator.mediaDevices.getUserMedia({ video: true }); let enumerateDevices = () => navigator.mediaDevices.enumerateDevices() - .then(devices => devices.filter(x => x.kind === 'videoinput')); + .then(devices => devices.filter(x => x.kind === 'videoinput')); getUserMedia(); return enumerateDevices(); @@ -107,21 +125,21 @@ function marhunPhotoCapturerFactory(modal_selector) { return marhun_camera_config_chrome.includes(camera.label); }) - const filteredCameraFirefox = available_cameras.filter(camera => { + const filteredCameraFirefox = available_cameras.filter(camera => { return marhun_camera_config_firefox.includes(camera.deviceId); - }); + }); - let isfirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; - if(isfirefox){ + let isfirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; + if (isfirefox) { - if(filteredCameraFirefox.length > 0){ - return filteredCameraFirefox.splice(-1); - } + if (filteredCameraFirefox.length > 0) { + return filteredCameraFirefox.splice(-1); + } - const filteredCameraFirefoxLastDevice = available_cameras.splice(-1); - return filteredCameraFirefoxLastDevice; - } + const filteredCameraFirefoxLastDevice = available_cameras.splice(-1); + return filteredCameraFirefoxLastDevice; + } // Get the first available priority referencing to env return filteredCameraChrome.at(-1); @@ -140,19 +158,19 @@ function marhunPhotoCapturerFactory(modal_selector) { function composeConstraint(camera) { let constraints = { - width: {min: 640, ideal: 1920}, - height: {min: 400, ideal: 1080}, - aspectRatio: {ideal: 1.7777777778}, - }; + width: { min: 640, ideal: 1920 }, + height: { min: 360, ideal: 1080 }, + aspectRatio: { ideal: 1.7777777778 }, + }; - if(camera.deviceId !== ''){ - constraints.deviceId = { exact: camera.deviceId }; + if (camera.deviceId !== '') { + constraints.deviceId = { exact: camera.deviceId }; return navigator.mediaDevices.getUserMedia({ video: constraints }); } - if(camera.groupId !== ''){ - constraints.groupId = { exact: camera.groudId }; + if (camera.groupId !== '') { + constraints.groupId = { exact: camera.groudId }; return navigator.mediaDevices.getUserMedia({ video: constraints }); } @@ -181,9 +199,15 @@ function marhunPhotoCapturerFactory(modal_selector) { function streamCameraView(stream) { let modal = document.querySelector(modal_selector); - let videoTag = modal.querySelector('.video-tag-overallmarhun'); + let videoTagPreview = modal.querySelector('.video-tag-overallmarhun.video-preview'); + let videoTagData = modal.querySelector('.video-tag-overallmarhun.video-data'); - videoTag.srcObject = stream; + videoTagPreview.srcObject = stream; + videoTagPreview.play(); + + + videoTagData.srcObject = stream; + videoTagData.play(); } this.getCamera() diff --git a/resources/views/marhun/partials/camera_modals.blade.php b/resources/views/marhun/partials/camera_modals.blade.php index 2517605d..519fbf85 100644 --- a/resources/views/marhun/partials/camera_modals.blade.php +++ b/resources/views/marhun/partials/camera_modals.blade.php @@ -21,7 +21,8 @@ -