KoPKB/lelong
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'afiqhamzah/fix/smashed-marhun-photo' into 'main'

Browse Source 
Fix to be usable to firefox

See merge request online-sistem1/lelong!445
This commit is contained in:
Muhamad Amir Hassan Hamzan
2023-05-28 04:04:19 +00:00
parent b9ee11f579 feb898c8b7
commit 7dd7100eab
6 changed files with 84 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.example
+2 -3
View File
@@ -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
# STORAGE_DIRECTORY=/Users/UTM/Sites/lelong/storage
config/marhun_camera.php
+1 -2
View File
@@ -1,6 +1,5 @@
<?php
return [
'marhun_cameras_chrome' => 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',
];
public/js/marhun-photo-capture.js
Vendored
+72 -52
View File
@@ -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()
resources/views/marhun/marhun.blade.php
+1 -2
View File
@@ -7,8 +7,7 @@
<script src="{{ asset('js/marhun-photo-capture-debugger.js') }}"></script>
<script src="{{ asset('js/marhun-photo-viewer.js') }}"></script>
<script>
var marhun_camera_config_chrome = @json(config('marhun_camera.marhun_cameras_chrome'));
var marhun_camera_config_firefox= @json(config('marhun_camera.marhun_cameras_firefox'));
var marhun_camera_config = @json(config('marhun_camera.cameras'));
let modalOverallPhotoCapture = new marhunPhotoCapturerFactory('#modaloverallphoto-capture');
let modalOverallPhotoCaptureUpdate = new marhunPhotoCapturerFactory('#modaloverallphoto-capture-update');
let modalOverallPhotoCapturePerMarhun = new marhunPhotoCapturerFactory('#modalpermarhunphoto-capture');
resources/views/marhun/partials/camera_modals.blade.php
+4 -2
View File
@@ -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" height="540" autoplay=true />
<video class="video-tag-overallmarhun d-none video-data" width="3200" height="1800" 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" height="540" autoplay=true />
<video class="video-tag-overallmarhun d-none video-data" width="3200" height="1800" autoplay=true />
</div>
</div>
<div class="row justify-content-center pt-3">
resources/views/marhun/partials/camera_modals_per_marhun.blade.php
+4 -3
View File
@@ -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" height="540" autoplay=true />
<video class="video-tag-overallmarhun d-none video-data" width="3200" height="1800" 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" height="540" autoplay=true />
<video class="video-tag-overallmarhun d-none video-data" width="3200" height="1800" 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>