Im looking for to way to show my webcam on a web page. (Learning purposes) I tried these codes :
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1024 initial-scale=1">
<!--JS-->
<script src="script.js"></script>
</head>
<body>
<main>
<p>just a webpage to insert JS and see console returns</p>
<video id="retourUtilisateur" autoplay playsinline></video>
</main>
</body>
</html>
const contraintes = {
video: {
width: {
min: 1280,
ideal: 1920,
max: 2560,
},
height: {
min: 720,
ideal: 1080,
max: 1440
},
}
};
//is getUserMedia available ?
if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
console.log("Fonctionalités logicielles disponibles")
}
else(console.log("Fonctionalités logicielles indisponibles"))
//asking for camera access
try {
const stream = navigator.mediaDevices.getUserMedia(contraintes);
console.log("cam connected");
// Utiliser le stream ici
// Affichage du stream
document.addEventListener("DOMContentLoaded", function() {
video = document.getElementById("retourUtilisateur");
video.srcObject = stream;
})
} catch (e) {
console.log("Impossible d'accéder à la caméra", e);
}
it's, at a few details, the same thing I saw here or here.
But I've an error in console : caught TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement': The provided value is not of type '(MediaSourceHandle or MediaStream)'.
So... I checked Mozila datasheet, and... it's right, html do not have a srcObject attribute. So how in the world are these exemples working ? what am I missing ? I continued with this datasheet, and replaced my srcObject attribute by a src attribute. my error changed for : "GET http://127.0.0.1:5500/[object%20Promise] 404 (Not Found)" but... why have I a 404 error ? isn't it only when a web page is missing ? And I do not understand why it's speaking about a promise. What it is ?
Seeya
