static/index.js

var video_facing_mode = "user"
var res_h = 1200
var res_w = 720
var video = document.getElementById("webcam")
const canvasElement = document.getElementById("output_canvas");
const canvasCtx = canvasElement.getContext("2d");
var webcamRunning
var pic_taken=false
var take_pic_btn= document.getElementById("take-pic")
var clear_pic_btn= document.getElementById("clear-pic")
var send_pic_btn= document.getElementById("send-pic")
var item_info_text= document.getElementById("user_item_info")
var taken_image;
// Check if webcam access is supported.
const hasGetUserMedia = () => { var _a; return !!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia); };
// If webcam supported, add event listener to button for when user
// wants to activate it.
if (hasGetUserMedia()) {
    document.getElementById("switch-camera").addEventListener("click", switch_camera);
    document.getElementById("webcamButton").addEventListener("click", enable_camera);
    take_pic_btn.addEventListener("click", take_pic);
    clear_pic_btn.addEventListener("click", clear_pic);
    send_pic_btn.addEventListener("click", send_pic);
}
else {
    console.warn("getUserMedia() is not supported by your browser");
}
function enable_camera(){
        video_facing_mode = 'environment'
        load_camera()
        webcamRunning = true
        document.getElementById("webcamButton").style.display="none";
        document.getElementById("switch-camera").style.display="block";
}
async function switch_camera() {
    if (video_facing_mode == 'user') {
        webcamRunning = false
        video_facing_mode = 'environment'
        await load_camera()
        webcamRunning = true
    }
    else {
        webcamRunning = false
        video_facing_mode = 'user'
        await load_camera()
        webcamRunning = true
    }
}

function load_camera() {
  const constraints = {
      video: {
          facingMode: video_facing_mode,
          width: { ideal: res_w },
        height: { ideal: res_h } 
      }
  };
  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
      video.srcObject = stream;
      video.addEventListener("loadeddata", img_load);
      video.addEventListener("loadeddata", ()=>{
        canvasElement.width=video.videoWidth
        canvasElement.height=video.videoHeight
      });
  });
}
function img_load(){

  canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
  canvasCtx.drawImage(video, 0, 0, canvasElement.width, (video.videoHeight / video.videoWidth) * canvasElement.width)
  if(pic_taken != true){
  setTimeout(function (){img_load()}, 10);
}
}
function take_pic(){
  pic_taken=true;
  canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
  canvasCtx.drawImage(video, 0, 0, canvasElement.width, (video.videoHeight / video.videoWidth) * canvasElement.width)
  taken_image = canvasElement.toDataURL()
  console.log(taken_image)
    clear_pic_btn.style.display="inline"
    send_pic_btn.style.display="inline"
    item_info_text.style.display="inline"
    take_pic_btn.style.display="none"
    
}

function send_pic(){
  send_frame(taken_image);
  item_info_text.style.display="none"
  clear_pic_btn.style.display="none"
  send_pic_btn.style.display="none"
  take_pic_btn.style.display="inline"
  pic_taken=false;
  img_load()
}

function clear_pic(){
  item_info_text.style.display="none"
  clear_pic_btn.style.display="none"
  send_pic_btn.style.display="none"
  take_pic_btn.style.display="inline"
  pic_taken=false;
  img_load()
  
}

function send_frame(dataUrl) {
  const dataToSend = {
      key: dataUrl,
      user_item_info: document.getElementById("user_item_info").value
  };
  document.getElementById("ai_output").style.display="block"
  document.getElementById("ai_output").classList.toggle('animated');
  fetch('/analyse', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json'
      },
      body: JSON.stringify(dataToSend)  // Convert the data to JSON
  })
  .then(response => response.text())
  .then(data => {
      var htmlContent = marked.parse(data)
      
      document.getElementById("ai_output").innerHTML=htmlContent;
      document.getElementById("ai_output").classList.toggle('animated');

  })
  .catch((error) => {
      console.error('Error:', error);
  });
}
function updateResolution() {
    const value = this.value;
    const resolutionK = value / 1000;
    const aspectRatio = 16 / 9;
    let width, height;

    if (resolutionK > 0) {
        width = resolutionK * 1000;
        height = Math.round(width / aspectRatio);
    } else {
        width = 0;
        height = 0;
    }

    // Update the displayed resolution
    document.getElementById('currentResolution').innerText = `${resolutionK}K`;
    res_w=width
    res_h=height
}

document.getElementById('resolution').addEventListener('input', updateResolution);