Add initial feature the ability for penilai to capture marhun when inspecting auctioned marhun

public/css/marhun-registrations-webcam.css

@@ -0,0 +1,64 @@
+
+#video {
+border: 1px solid black;
+box-shadow: 2px 2px 3px black;
+width: 320px;
+height: 240px;
+}
+
+#photo {
+border: 1px solid black;
+box-shadow: 2px 2px 3px black;
+width: 320px;
+/* height: 240px; */
+}
+
+#canvas {
+display: none;
+}
+
+.camera {
+width: 340px;
+display: inline-block;
+}
+
+.output {
+width: 340px;
+display: inline-block;
+vertical-align: top;
+}
+
+#startbutton {
+display: block;
+position: relative;
+margin-left: auto;
+margin-right: auto;
+bottom: 32px;
+background-color: rgba(0, 150, 0, 0.5);
+border: 1px solid rgba(255, 255, 255, 0.7);
+box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
+font-size: 14px;
+font-family: "Lucida Grande", "Arial", sans-serif;
+color: rgba(255, 255, 255, 1);
+}
+
+.contentarea {
+font-size: 16px;
+font-family: "Lucida Grande", "Arial", sans-serif;
+width: 760px;
+}
+
+#image-tag-container{
+height: 320px;
+overflow: hidden;
+}
+
+#image-tag{
+height: 320px;
+}
+
+img.marhun-uploaded {
+cursor: -moz-zoom-in;
+cursor: -webkit-zoom-in;
+cursor: zoom-in;
+}

public/img/camera-shutter.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="256px" height="256px" viewBox="0 0 128 128" xml:space="preserve"><rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF" /><g><path d="M76.34 52.05l-43.6-43.6a63.42 63.42 0 0 1 29.7-8.2z" fill="#000000"/><path d="M76.34 52.05l-43.6-43.6a63.42 63.42 0 0 1 29.7-8.2z" fill="#c4c4c4" transform="rotate(30 64 64)"/><path d="M76.34 52.05l-43.6-43.6a63.42 63.42 0 0 1 29.7-8.2z" fill="#b2b2b2" transform="rotate(60 64 64)"/><path d="M76.34 52.05l-43.6-43.6a63.42 63.42 0 0 1 29.7-8.2z" fill="#a1a1a1" transform="rotate(90 64 64)"/><path d="M76.34 52.05l-43.6-43.6a63.42 63.42 0 0 1 29.7-8.2z" fill="#8f8f8f" transform="rotate(120 64 64)"/><path d="M76.34 52.05l-43.6-43.6a63.42 63.42 0 0 1 29.7-8.2z" fill="#7d7d7d" transform="rotate(150 64 64)"/><path d="M76.34 52.05l-43.6-43.6a63.42 63.42 0 0 1 29.7-8.2z" fill="#6b6b6b" transform="rotate(180 64 64)"/><path d="M76.34 52.05l-43.6-43.6a63.42 63.42 0 0 1 29.7-8.2z" fill="#595959" transform="rotate(210 64 64)"/><path d="M76.34 52.05l-43.6-43.6a63.42 63.42 0 0 1 29.7-8.2z" fill="#474747" transform="rotate(240 64 64)"/><path d="M76.34 52.05l-43.6-43.6a63.42 63.42 0 0 1 29.7-8.2z" fill="#363636" transform="rotate(270 64 64)"/><path d="M76.34 52.05l-43.6-43.6a63.42 63.42 0 0 1 29.7-8.2z" fill="#242424" transform="rotate(300 64 64)"/><path d="M76.34 52.05l-43.6-43.6a63.42 63.42 0 0 1 29.7-8.2z" fill="#121212" transform="rotate(330 64 64)"/><animateTransform attributeName="transform" type="rotate" values="0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64" calcMode="discrete" dur="1080ms" repeatCount="indefinite"></animateTransform></g></svg>

public/js/marhun-photo-capture-reload-https.js

@@ -0,0 +1,31 @@
+function marhunPhotoCapturerReloadHttpsFactory() {
+
+  return {
+
+    reload: function reload() {
+
+      const params = new Proxy(new URLSearchParams(window.location.search), {
+        get: (searchParams, prop) => searchParams.get(prop),
+      });
+
+      const isCameraActivate = params.isCameraActivate;
+      const locationProtocol = location.protocol;
+
+      if (isCameraActivate == 'true' && locationProtocol == 'https:') {
+        return;
+      }
+
+      if (locationProtocol == 'https:') {
+        return;
+      }
+
+      new_location = new URL(location);
+      new_location.protocol = "https:";
+      new_location.searchParams.append('isCameraActivate', 'true')
+      window.location.replace(new_location);
+
+    }
+
+  }
+
+}

public/js/marhun-photo-capture.js

@@ -0,0 +1,177 @@
+
+function marhunPhotoCapturerFactory(modal_selector) {
+
+  return {
+
+    constraints: { "video": { width: { exact: 1080 } } },
+
+    imageCapturer: null,
+
+    start: function start() {
+      navigator.mediaDevices.getUserMedia(this.constraints)
+        .then(this.gotMedia)
+        .catch(e => { console.error('getUserMedia() failed: ', e); });
+    },
+
+    gotMedia: function (mediastream) {
+
+      let modal = document.querySelector(modal_selector);
+      let videoTag = modal.querySelector('.video-tag-overallmarhun');
+
+      videoTag.srcObject = mediastream;
+
+      let videoTrack = mediastream.getVideoTracks()[0];
+      this.imageCapturer = new ImageCapture(videoTrack);
+
+
+      // Timeout needed in Chrome, see https://crbug.com/711524
+      setTimeout(() => {
+        const capabilities = videoTrack.getCapabilities()
+        console.log(capabilities)
+
+        // Check whether zoom is supported or not.
+        if (!capabilities.zoom) {
+          return;
+        }
+
+      }, 500);
+
+    },
+
+    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')
+          }, 1500);
+
+          modal.querySelector('button[type="submit"]').disabled = false;
+
+          return blob;
+
+        })
+        .then(blob => setMarhunPhotoInputToCapturedPhoto(blob))
+        .catch((err) => {
+          console.error("takePhoto() failed: ", err);
+        });
+
+    },
+
+
+    takePhoto: function () {
+      navigator.mediaDevices.getUserMedia(this.constraints)
+        .then(this.captureMedia)
+        .catch(e => { console.error('getUserMedia() failed: ', e); });
+    },
+
+    viewCapturedPhoto: function () {
+
+      let imageTag = document.getElementById('image-tag');
+
+      if (!imageTag.classList.contains('marhun-uploaded')) {
+
+        Swal.fire({
+          icon: 'error',
+          title: 'Amaran!',
+          text: 'Sila ambil gambar marhun'
+        });
+
+        return;
+      }
+
+      displayInNewTab(imageTag.src);
+    },
+
+    displayInNewTab: function (src) {
+      let image = new Image();
+      image.src = src;
+
+      let w = window.open("");
+      w.document.write(image.outerHTML);
+    },
+
+    initiateTakeMarhunPhoto: function () {
+
+      navigator.mediaDevices.getUserMedia(this.constraints)
+        .then(this.gotMedia)
+        .catch(e => { console.error('getUserMedia() failed: ', e); });
+
+      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');
+    },
+
+
+    initiateUploadMarhunPhoto: function () {
+      let file_marhun_photo = document.getElementById('marhun_photo');
+      let image_tag = document.getElementById('image-tag');
+
+      let displayUploadFileToImageTag = (event) => {
+        let selectedFile = event.target.files[0];
+        let reader = new FileReader();
+
+        image_tag.title = selectedFile.name;
+
+        reader.onload = function (event) {
+          image_tag.src = event.target.result;
+        };
+
+        reader.readAsDataURL(selectedFile);
+
+        this.removeEventListener('change', displayUploadFileToImageTag);
+
+      };
+
+      file_marhun_photo.addEventListener('change', displayUploadFileToImageTag);
+
+      image_tag.classList.add('marhun-uploaded');
+
+      file_marhun_photo.click();
+    }
+  }
+
+}