iOS Development

javascript – The right way to use the primary again digicam on ios utilizing getUserMedia in PWA

Spread the love


I’ve created a easy PWA utilizing html css and javascript, I’m utilizing getUserMedia in an effort to entry the digicam and render it on the display screen, however for some purpose the defult digicam it’s utilizing is the decrease digicam on the iphone 11 which has completely different zoom and the quility is wors then the higher digicam that the nativ digicam app is utilizing that has much better quility. I used to be questioning how can get the cameras that the person has and set the digicam to be the primary digicam that the telephone is utilizing.
Does somebody understand how can I do it?

right here is the index.js file

doc.addEventListener("DOMContentLoaded", () => {
  const cameraStream = doc.getElementById("camera-stream");

  const constraints = {
    video: {
      facingMode: {
        actual: "setting",
      },
    },
  };

  // Examine if the browser helps getUserMedia
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Request entry to the digicam with specified constraints
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then((stream) => {
        // Set the digicam stream because the supply for the video component
        cameraStream.srcObject = stream;
      })
      .catch((error) => {
        // Deal with errors associated to accessing the digicam
        console.error("Error accessing digicam:", error);
      });
  } else {
    // Log an error message if getUserMedia will not be supported
    console.error("getUserMedia not supported in your browser");
  }
});

and right here is the html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta title="viewport" content material="width=device-width, initial-scale=1.0" />
    <meta title="theme-color" content material="#eeeeee" />
    <meta http-equiv="X-UA-Appropriate" content material="ie=edge" />
    <title>Harel's LPR App</title>
    <hyperlink rel="stylesheet" href="kinds.css" />
    <hyperlink rel="manifest" href="manifest.json" />
    <hyperlink rel="apple-touch-icon" href="photographs/icon192.png" />
  </head>
  <physique>
    <div class="main-section">
      <h1 class="main-title">App</h1>
      <div id="video-container">
        <video id="camera-stream" autoplay playsinline></video>
      </div>
    </div>
    <script src="index.js"></script>
  </physique>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *