(feat:JS): add functionalities to access rear camera

Author: josueJURE

public/index.html

@@ -189,6 +189,7 @@ <h1 class="picture-section-headline">You've got some ingredients but no idea wha
               <div class="video-btn-canvas">
                 <video class="video"></video>
                 <button class="take-picture">take a picture</button>
+                <button id="switchCamera">Switch Camera</button>
                 <canvas class="canvas"></canvas>
                 <p class="chat-gpt-vision-text"></p>
                 <button class="previous-page">previous page</button>

public/index.js

@@ -58,6 +58,9 @@ import {
   emailUserRecipeSection,
 } from "./js_utilities/query_selector.js";
 
+let currentCameraIndex = 0;
+const switchCameraButton = document.getElementById('switchCamera');
+
 
 
 wantToTakeAPicture.addEventListener("click", () => {
@@ -252,15 +255,63 @@ recipeButtons.forEach((button) => {
 });
 
 // Picture section
-navigator.mediaDevices
-  .getUserMedia(constraint)
-  .then((stream) => {
+
+
+async function getVideoDevices() {
+  const devices = await navigator.mediaDevices.enumerateDevices();
+  return devices.filter(device => device.kind === 'videoinput');
+}
+
+async function startCamera(deviceId) {
+  const constraints = {
+    audio: false,
+    video: {
+      deviceId: deviceId ? { exact: deviceId } : undefined,
+      width: {min: 1024, ideal: 1280, max: 1920},
+      height: {min: 576, ideal: 720, max: 1080}
+    }
+  };
+
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia(constraints);
     video.srcObject = stream;
-    video.play();
-  })
-  .catch((error) => {
+    await video.play();
+  } catch (error) {
     console.error("Error accessing camera:", error);
-  });
+  }
+}
+
+async function initializeCamera() {
+  const videoDevices = await getVideoDevices();
+  
+  if (videoDevices.length > 1) {
+    switchCameraButton.style.display = 'block';
+    switchCameraButton.addEventListener('click', () => {
+      currentCameraIndex = (currentCameraIndex + 1) % videoDevices.length;
+      startCamera(videoDevices[currentCameraIndex].deviceId);
+    });
+  } else {
+    switchCameraButton.style.display = 'none';
+  }
+
+  // Start with the rear camera if available
+  const rearCameraDevice = videoDevices.find(device => device.label.toLowerCase().includes('back') || device.label.toLowerCase().includes('rear'));
+  startCamera(rearCameraDevice ? rearCameraDevice.deviceId : videoDevices[0].deviceId);
+}
+
+initializeCamera();
+
+
+
+// navigator.mediaDevices
+//   .getUserMedia(constraint)
+//   .then((stream) => {
+//     video.srcObject = stream;
+//     video.play();
+//   })
+//   .catch((error) => {
+//     console.error("Error accessing camera:", error);
+//   });
 
 function capturePhoto() {
   context.drawImage(video, 0, 0, 400, 100);

public/js_utilities/query_selector.js

@@ -42,7 +42,10 @@ const constraint = {
   audio: false,
   video: {
   width: {min: 1024, ideal: 1280, max: 1920},
-  height: {min: 576, ideal: 720, max: 1080}
+  height: {min: 576, ideal: 720, max: 1080},
+  facingMode: { ideal: 'environment' } // tells the browser to prefer the rear camera if available.
+
+
 }
 }
 

public/url_folder.txt

@@ -1 +1 @@
-https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-QhUaTMW5KjXvVEFVqpbnc4WK.png?st=2024-07-30T12%3A45%3A56Z&se=2024-07-30T14%3A45%3A56Z&sp=r&sv=2023-11-03&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2024-07-29T23%3A53%3A11Z&ske=2024-07-30T23%3A53%3A11Z&sks=b&skv=2023-11-03&sig=dk5PjiI69ok5GWveRY4lJjVFsgv1MhLFxe2OFGCWh5s%3D
+https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-fNuhmqRpsQhGAE0g5M9gQKUX.png?st=2024-07-31T11%3A35%3A07Z&se=2024-07-31T13%3A35%3A07Z&sp=r&sv=2023-11-03&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2024-07-30T22%3A58%3A24Z&ske=2024-07-31T22%3A58%3A24Z&sks=b&skv=2023-11-03&sig=0XASy0nJI13AwDlIlnWunniyYOuQMpEOWgTj82sluLc%3D