diff --git a/.env.example b/.env.example
index 027d4cc7..d6deec98 100644
--- a/.env.example
+++ b/.env.example
@@ -300,12 +300,11 @@ PUSHER_APP_CLUSTER=mt1
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
-MARHUN_CAMERAS_CHROME = "Doccamera"
-MARHUN_CAMERAS_FIREFOX = "jSsq68fCLg2guCV2FaFzvXXiKBqbPA25DaQAWWotfqY="
+MARHUN_CAMERAS = "Doccamera"
WABOT_API=https://md.wabot.my/api/send.php
WABOT_INSTANCES_ID=63C26B7AAD21A
WABOT_TOKEN_KEYS=cbee7e95cf3ffbfa0531d5fddfd44f87
# for config STORAGE_DIRECTORY, set value without slash at the end
-# STORAGE_DIRECTORY=/Users/UTM/Sites/lelong/storage
\ No newline at end of file
+# STORAGE_DIRECTORY=/Users/UTM/Sites/lelong/storage
diff --git a/config/marhun_camera.php b/config/marhun_camera.php
index cbefd17e..3b4f23a3 100644
--- a/config/marhun_camera.php
+++ b/config/marhun_camera.php
@@ -1,6 +1,5 @@
array_map(fn ($camera_label) => trim($camera_label), explode(',', env('MARHUN_CAMERAS_CHROME'))) ?? 'Doccamera',
- 'marhun_cameras_firefox' => array_map(fn ($camera_label) => trim($camera_label), explode(',', env('MARHUN_CAMERAS_FIREFOX'))) ?? "jSsq68fCLg2guCV2FaFzvXXiKBqbPA25DaQAWWotfqY="
+ 'cameras' => array_map(fn ($camera_label) => trim($camera_label), explode(',', env('MARHUN_CAMERAS'))) ?? 'Doccamera',
];
diff --git a/public/js/marhun-photo-capture.js b/public/js/marhun-photo-capture.js
index b7afb645..f70d626b 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,
},
@@ -13,10 +12,33 @@ function marhunPhotoCapturerFactory(modal_selector) {
captureMedia: function (mediastream) {
let videoTrack = mediastream.getVideoTracks()[0];
- let imageCapturer = new ImageCapture(videoTrack);
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 = 3200;
+ canvas.height = 1800;
+
+ let isfirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+ if (isfirefox) {
+ 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 +55,31 @@ 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('.video-tag-overallmarhun').classList.add('d-none');
- modal.querySelector('.camera-shutter').classList.remove('d-none');
- modal.querySelector('.camera-shutter').classList.add('d-flex');
+ 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);
+ 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;
+ modal.querySelector('button[type="submit"]').disabled = false;
- return blob;
+ setMarhunPhotoInputToCapturedPhoto(blob)
+ }, 'image/png');
})
- .then(blob => setMarhunPhotoInputToCapturedPhoto(blob))
.catch((err) => {
console.error("takePhoto() failed: ", err);
});
@@ -75,12 +98,13 @@ function marhunPhotoCapturerFactory(modal_selector) {
getCamera: function () {
function getCameraList() {
- let getUserMedia = () => navigator.mediaDevices.getUserMedia({audio: true, video: true});
-
+ let getUserMedia = () => navigator.mediaDevices.getUserMedia({ video: { width: 3256, height: 2440 } });
let enumerateDevices = () => navigator.mediaDevices.enumerateDevices()
- .then(devices => devices.filter(x => x.kind === 'videoinput'));
+ .then(devices => devices.filter(x => x.kind === 'videoinput'))
getUserMedia();
+
+
return enumerateDevices();
}
@@ -103,28 +127,17 @@ function marhunPhotoCapturerFactory(modal_selector) {
});
- const filteredCameraChrome = available_cameras.filter(camera => {
- return marhun_camera_config_chrome.includes(camera.label);
+ let isfirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+ if (isfirefox) {
+ return available_cameras.slice(-1);
+ }
+
+ const filteredCamera = available_cameras.filter(camera => {
+ return marhun_camera_config.includes(camera.label);
})
- const filteredCameraFirefox = available_cameras.filter(camera => {
- return marhun_camera_config_firefox.includes(camera.deviceId);
- });
-
-
- let isfirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
- if(isfirefox){
-
- if(filteredCameraFirefox.length > 0){
- return filteredCameraFirefox.splice(-1);
- }
-
- const filteredCameraFirefoxLastDevice = available_cameras.splice(-1);
- return filteredCameraFirefoxLastDevice;
- }
-
// Get the first available priority referencing to env
- return filteredCameraChrome.at(-1);
+ return filteredCamera.at(-1);
}
function selectCamera(listOfCameras) {
@@ -138,28 +151,32 @@ function marhunPhotoCapturerFactory(modal_selector) {
}
function composeConstraint(camera) {
+ let constraints = null;
- let constraints = {
- width: {min: 640, ideal: 1920},
- height: {min: 400, ideal: 1080},
- aspectRatio: {ideal: 1.7777777778},
- };
+ constraints = {
+ width: { min: 1280, ideal: 3200, max: 3200},
+ height: { min: 720, ideal: 1800, max: 1800 },
+ frameRate: 30,
+ };
- 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.groupId };
return navigator.mediaDevices.getUserMedia({ video: constraints });
+
}
}
return getCameraList()
.then(selectCamera)
+ .then(x => { console.log(x); return x; })
.then(composeConstraint);
},
@@ -180,10 +197,13 @@ function marhunPhotoCapturerFactory(modal_selector) {
}
function streamCameraView(stream) {
+ console.log(stream.getVideoTracks()[0].getSettings())
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;
+ videoTagData.srcObject = stream;
}
this.getCamera()
diff --git a/resources/views/marhun/marhun.blade.php b/resources/views/marhun/marhun.blade.php
index 52ff9b08..5e4bd83d 100644
--- a/resources/views/marhun/marhun.blade.php
+++ b/resources/views/marhun/marhun.blade.php
@@ -7,8 +7,7 @@