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 @@
                             <img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()"
                                 src="" width="960"
                                 class="border border-dark d-none">
-                            <video class="video-tag-overallmarhun" width="960" autoplay=true />
+                            <video class="video-tag-overallmarhun video-preview" width="960" autoplay=true />
+                            <video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true />
                         </div>
                         <input accept="image/png, 'image/jpeg'" type="file" id="inputGroupFile04" name="gambarMarhun"
                             class="d-none">
@@ -79,7 +80,8 @@
                             <img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()"
                                 src="" width="960"
                                 class="border border-dark d-none">
-                            <video class="video-tag-overallmarhun" width="960" autoplay=true />
+                            <video class="video-tag-overallmarhun video-preview" width="960" autoplay=true />
+                            <video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true />
                         </div>
                     </div>
                     <div class="row justify-content-center pt-3">
diff --git a/resources/views/marhun/partials/camera_modals_per_marhun.blade.php b/resources/views/marhun/partials/camera_modals_per_marhun.blade.php
index 534afe87..bc6d4fcf 100644
--- a/resources/views/marhun/partials/camera_modals_per_marhun.blade.php
+++ b/resources/views/marhun/partials/camera_modals_per_marhun.blade.php
@@ -23,7 +23,8 @@
                             <img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()"
                                 src="" width="960"
                                 class="border border-dark d-none">
-                            <video class="video-tag-overallmarhun" width="960" autoplay=true />
+                            <video class="video-tag-overallmarhun video-preview" width="960" autoplay=true />
+                            <video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true />
                         </div>
                         <input accept="image/png, 'image/jpeg'" type="file" id="inputGroupFile04" name="gambarMarhun" class="d-none">
                     </div>
@@ -79,7 +80,8 @@
                             <img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()"
                                 src="" width="960"
                                 class="border border-dark d-none">
-                            <video class="video-tag-overallmarhun" width="960" autoplay=true />
+                            <video class="video-tag-overallmarhun video-preview" width="960" autoplay=true />
+                            <video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true />
                         </div>
                         <input accept="image/png, 'image/jpeg'" type="file" id="inputGroupFile04" name="gambarMarhun" class="d-none">
                     </div>
@@ -109,4 +111,3 @@
         </div>
     </div>
 </div>
-