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

Add fix for smashed marhun photo

Browse Source
This commit is contained in:
afiq.hamzah
2023-05-20 16:47:33 +08:00
parent 0a08a4bcd6
commit d893cf2ef1
3 changed files with 75 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/marhun-photo-capture.js
Vendored
+67 -43
View File
@@ -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()
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" 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">
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" 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>