lelong/public/js/marhun-photo-capture.js

function marhunPhotoCapturerFactory(modal_selector) {

    return {

        constraints: {
            audio: false,
            video: true,
        },

        imageCapturer: null,

        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 setMarhunPhotoInputToCapturedPhoto = function (blob) {
                const modal = document.querySelector(modal_selector);
                const marhunPhotoInput = modal.querySelector('#inputGroupFile04');

                const marhunPhotoFile = new File([blob], 'marhun_photo.png', {
                    type: 'image/png',
                    lastModified: new Date().getTime(),
                });

                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(marhunPhotoFile);
                marhunPhotoInput.files = dataTransfer.files;

            };

            imageCapturer.takePhoto()
                .then((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;

                    return blob;

                })
                .then(blob => setMarhunPhotoInputToCapturedPhoto(blob))
                .catch((err) => {
                    console.error("takePhoto() failed: ", err);
                });

        },


        takePhoto: function () {

            if ('mediaDevices' in navigator && navigator.mediaDevices.getUserMedia) {
                this.getCamera()
                    .then(this.captureMedia)
                    .catch(e => { console.error('getUserMedia() failed: ', e); });
            }
        },

        getCamera: function () {
            function getCameraList() {
                return navigator.mediaDevices.enumerateDevices()
                    .then(devices => devices.filter(x => x.kind === 'videoinput'))
            }

            function selectNearWorkingCamera(listOfCameras) {
                return listOfCameras.at(0);
            }


            function selectPriorityCameraIfExist(listOfCameras) {

                const available_cameras = listOfCameras.map(camera => {
                    let altered_label = camera.label.split(" ");
                    altered_label.splice(-1);
                    altered_label = altered_label.join(" ");

                    return {
                        label: altered_label,
                        deviceId: camera.deviceId,
                    };

                });

                const filteredCameraChrome = available_cameras.filter(camera => {
                    return marhun_camera_config_chrome.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);
            }

            function selectCamera(listOfCameras) {
                let priorityCamera = selectPriorityCameraIfExist(listOfCameras);

                if (!priorityCamera) {
                    return selectNearWorkingCamera(listOfCameras)
                }

                return priorityCamera;
            }

            function composeConstraint(camera) {

                let constraints = { 
			width: {min: 640, ideal: 1920},
			height: {min: 400, ideal: 1080},
			aspectRatio: {ideal: 1.7777777778},
		};

                if(camera.deviceId !== ''){
		    constraints.deviceId = { exact: camera.deviceId };
                    return navigator.mediaDevices.getUserMedia({ video: constraints });
                }


                if(camera.groupId !== ''){
		    constraints.groupId = { exact: camera.groudId };
                    return navigator.mediaDevices.getUserMedia({ video: constraints });
                }

            }

            return getCameraList()
                .then(selectCamera)
                .then(composeConstraint);

        },

        initiateTakeMarhunPhoto: function () {
            if ('mediaDevices' in navigator && navigator.mediaDevices.getUserMedia) {

                function showCaptureMarhunModal() {
                    let modal = document.querySelector(modal_selector);

                    modal.querySelector('.video-tag-overallmarhun').classList.remove('d-none');
                    modal.querySelector('.image-tag-overallmarhun').classList.add('d-none');
                    modal.querySelector('.camera-shutter').classList.add('d-none');
                    modal.querySelector('.camera-button').classList.remove('d-none');
                    modal.querySelector('button[type="submit"]').disabled = true;

                    $(modal_selector).modal('show');
                }

                function streamCameraView(stream) {
                    let modal = document.querySelector(modal_selector);
                    let videoTag = modal.querySelector('.video-tag-overallmarhun');

                    videoTag.srcObject = stream;
                }

                this.getCamera()
                    .then(streamCameraView)
                    .then(showCaptureMarhunModal);
            }
        },
    }

}