Can not access to rear camera in reactjs [OverconstrainedError]

I am trying to follow a tutorial about accessing rear and front camera in webdevdrops (and the demo). the tutorial is working good. even i pulled the tutorial’s repository from github and i upload that on my website. everything is okay. but when i used that codes on my project built by ReactJS, It just opens front camera on my phone and when i click on btnChangeCamera it gives me the following object as error and does not open rear camera (i think this is an error, maybe not):

enter image description here


My component:

import {GetCamera} from '>>path';
function Camera(props) {
    return (
        <>
            <button onClick={()=>GetCamera()}>open camera</button>
            <canvas id='canvas' />
            <div className='cameraAccess' id='screenshots'>
                <span><ion-icon name="close-outline" /></span>
                <video autoPlay id="userCameraToAddProduc" />
                <ul className='cameraBtnGroups'>
                    <li id='btnChangeCamera'>Change camera</li>
                    <li id='btnPlay'>Start</li>
                    <li id='btnPause'>Pause</li>
                </ul>
                <span id='getCapture' />
            </div>
        </>
    );
}

GetCamera.js:

export default function GetCamerta() {
   // if (
   //    !"mediaDevices" in navigator ||
   //    !"getUserMedia" in navigator.mediaDevices
   // ) {
   //    alert("Camera API is not available in your browser");
   //    return;
   // }
   var mediaDevices = navigator.mediaDevices;
   mediaDevices.getUserMedia({
      video: true
   }).then(
      stream => (video.srcObject = stream),
      err => console.log(err)
   );
   // get page elements
   const video = document.querySelector("#userCameraToAddProduc");
   const btnPlay = document.querySelector("#btnPlay"); //
   const btnPause = document.querySelector("#btnPause"); //
   const btnScreenshot = document.querySelector("#getCapture");
   const btnChangeCamera = document.querySelector("#btnChangeCamera");
   const screenshotsContainer = document.querySelector("#screenshots");
   const canvas = document.querySelector("#canvas");
   const devicesSelect = document.querySelector("#devicesSelect");

   let w = window.innerWidth,
      h = window.innerHeight;
   // video constraints
   const constraints = {
      video: {
         width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
         },
         height: {
            min: 720,
            ideal: 1080,
            max: 1440,
         },
      },
   };

   // use front face camera
   let useFrontCamera = false;

   // current video stream
   let videoStream;

   // handle events
   // play
   btnPlay.addEventListener("click", function () {
      video.play();
      btnPlay.classList.add("is-hidden");
      btnPause.classList.remove("is-hidden");
   });

   // pause
   btnPause.addEventListener("click", function () {
      video.pause();
      btnPause.classList.add("is-hidden");
      btnPlay.classList.remove("is-hidden");
   });

   // take screenshot
   btnScreenshot.addEventListener("click", function () {
      const img = document.createElement("img");
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext("2d").drawImage(video, 0, 0);
      img.src = canvas.toDataURL("image/png");
      screenshotsContainer.prepend(img);
   });

   // switch camera
   btnChangeCamera.addEventListener("click", function () {
      useFrontCamera = !useFrontCamera;

      initializeCamera();
   });

   // stop video stream
   function stopVideoStream() {
      if (videoStream) {
         videoStream.getTracks().forEach((track) => {
            track.stop();
         });
      }
   }

   // initialize
   async function initializeCamera() {
      stopVideoStream();
      constraints.video.facingMode = useFrontCamera ? "user" : "environment";
      document.getElementById('screenshots').classList.add('open');
      try {
         videoStream = await navigator.mediaDevices.getUserMedia(constraints);
         video.srcObject = videoStream;
      } catch (err) {
         alert(err);
         console.log(err);
      }
   }

   initializeCamera();
}

It is good to say:

the following codes does not worked in my react project:

if (
      !"mediaDevices" in navigator ||
      !"getUserMedia" in navigator.mediaDevices
   ) {
      alert("Camera API is not available in your browser");
      return;
   }

so i tried to use this followings instead of them and everything goes okay (just for front camera [not the rear]):

var mediaDevices = navigator.mediaDevices;
   mediaDevices.getUserMedia({
      video: true
   }).then(
      stream => (video.srcObject = stream),
      err => console.log(err)
   );

66 thoughts on “Can not access to rear camera in reactjs [OverconstrainedError]”

Leave a Comment