From df8455a857734f061296135d4990ca186986b193 Mon Sep 17 00:00:00 2001
From: "afiq.hamzah" <afiq.hamzah@pkb.net.my>
Date: Tue, 23 May 2023 13:44:53 +0800
Subject: [PATCH] Set the max camera resolution before commencing video
 streaming cont'd

---
 app/Services/MarhunPhotoService.php                      | 2 +-
 public/js/marhun-photo-capture.js                        | 9 +++++----
 resources/views/marhun/partials/camera_modals.blade.php  | 4 ++--
 .../marhun/partials/camera_modals_per_marhun.blade.php   | 4 ++--
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/Services/MarhunPhotoService.php b/app/Services/MarhunPhotoService.php
index 63392384..f8e2cd9f 100644
--- a/app/Services/MarhunPhotoService.php
+++ b/app/Services/MarhunPhotoService.php
@@ -153,6 +153,6 @@ class MarhunPhotoService
 
         $webpCompiler = $this->getWebpCompilerByOS();
 
-        exec($webpCompiler . ' -preset photo ' . ' -resize 1280 720 ' . ' -mt ' . $originalFilePath . ' -o ' . $convertedFilePath);
+        exec($webpCompiler . ' -preset photo ' . ' -resize 1920 1080 ' . ' -mt ' . $originalFilePath . ' -o ' . $convertedFilePath);
     }
 }
diff --git a/public/js/marhun-photo-capture.js b/public/js/marhun-photo-capture.js
index e24b85e2..33ad724b 100644
--- a/public/js/marhun-photo-capture.js
+++ b/public/js/marhun-photo-capture.js
@@ -18,12 +18,13 @@ function marhunPhotoCapturerFactory(modal_selector) {
             let canvas = document.createElement('canvas');
 
             let captureImage = () => {
+                        let videoTag = modal.querySelector('.video-tag-overallmarhun.video-data');
                 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.width = 3200;
+                        canvas.height = 1800;
                         canvas.getContext("2d").drawImage(videoTag, 0, 0, canvas.width, canvas.height)
                         resolve(canvas);
                     } catch (error) {
@@ -160,8 +161,8 @@ function marhunPhotoCapturerFactory(modal_selector) {
             function composeConstraint(camera) {
 
                 let constraints = {
-                    width: { exact: 3200 },
-                    height: { exact: 1800 },
+                    width: { exact: 1920 },
+                    height: { exact: 1080 },
                 };
 
                 if (camera.deviceId !== '') {
diff --git a/resources/views/marhun/partials/camera_modals.blade.php b/resources/views/marhun/partials/camera_modals.blade.php
index 519fbf85..d3db00ce 100644
--- a/resources/views/marhun/partials/camera_modals.blade.php
+++ b/resources/views/marhun/partials/camera_modals.blade.php
@@ -21,7 +21,7 @@
                             <img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()"
                                 src="" width="960"
                                 class="border border-dark d-none">
-                            <video class="video-tag-overallmarhun video-preview" width="960" autoplay=true />
+                            <video class="video-tag-overallmarhun video-preview" width="960" height="540" 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"
@@ -80,7 +80,7 @@
                             <img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()"
                                 src="" width="960"
                                 class="border border-dark d-none">
-                            <video class="video-tag-overallmarhun video-preview" width="960" autoplay=true />
+                            <video class="video-tag-overallmarhun video-preview" width="960" height="540" autoplay=true />
                             <video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true />
                         </div>
                     </div>
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 bc6d4fcf..038e637d 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,7 @@
                             <img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()"
                                 src="" width="960"
                                 class="border border-dark d-none">
-                            <video class="video-tag-overallmarhun video-preview" width="960" autoplay=true />
+                            <video class="video-tag-overallmarhun video-preview" width="960" height="540" 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">
@@ -80,7 +80,7 @@
                             <img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()"
                                 src="" width="960"
                                 class="border border-dark d-none">
-                            <video class="video-tag-overallmarhun video-preview" width="960" autoplay=true />
+                            <video class="video-tag-overallmarhun video-preview" width="960" height="540" 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">