I have created a simple PWA using html css and javascript, I am using getUserMedia in order to access the camera and render it on the screen, but for some reason the defult camera it is using is the lower camera on the iphone 11 which has different zoom and the quility is wors then the upper camera that the nativ camera app is using that has far better quility. I was wondering how can get the cameras that the user has and set the camera to be the main camera that the phone is using. Does someone know how can I do it?
here is the index.js file
document.addEventListener("DOMContentLoaded", () => {
const cameraStream = document.getElementById("camera-stream");
const constraints = {
video: {
facingMode: {
exact: "environment",
},
},
};
// Check if the browser supports getUserMedia
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Request access to the camera with specified constraints
navigator.mediaDevices
.getUserMedia(constraints)
.then((stream) => {
// Set the camera stream as the source for the video element
cameraStream.srcObject = stream;
})
.catch((error) => {
// Handle errors related to accessing the camera
console.error("Error accessing camera:", error);
});
} else {
// Log an error message if getUserMedia is not supported
console.error("getUserMedia not supported on your browser");
}
});
and here is the html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#eeeeee" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Harel's LPR App</title>
<link rel="stylesheet" href="styles.css" />
<link rel="manifest" href="manifest.json" />
<link rel="apple-touch-icon" href="images/icon192.png" />
</head>
<body>
<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>
</body>
</html>