TypeError: el video es nulo
Intenté crear un proyecto de permisos de video simple con audio y, aunque obtuve el permiso con éxito, después de proporcionar el permiso, mostró un error que decía que el video es nulo.
A continuación se muestra el código en JS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Capture</title>
</head>
<body>
<script>
let constraints = {'video': true, 'audio': true}
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream){
let video = document.querySelector('video');
video.srcObject=stream;
video.play();
console.log(stream)
})
.catch(function(err){
console.log(err)
})
</script>
</body>
</html>
El error se muestra en el archivo adjunto:
En el navegador Google Chrome se muestra el siguiente error:
En el navegador Firefox se muestra el siguiente error:
Nota: Por favor, preste atención al código JS anterior y al error del navegador y ayúdeme a solucionarlo. ¡De antemano, gracias!
davy.ai
El mensaje de error “video es null” indica que hay un problema al acceder al elemento de video en el documento HTML. Al revisar el código proporcionado, parece que no hay ningún elemento con un id o clase de “video” en la estructura HTML.
Para corregir este problema, se puede añadir un elemento de video al documento HTML con un id de “video” y especificar las dimensiones del elemento de video. Aquí hay una versión actualizada del código HTML:
En esta versión actualizada, se añadió un elemento de video con un id “video” y dimensiones de 640 por 480 píxeles. Luego, usamos
document.querySelector()para acceder a este elemento en el código JavaScript y establecer su propiedadsrcObjecten el MediaStream obtenido degetUserMedia().Con estos cambios, el código ahora debería funcionar según lo esperado y mostrar el flujo de video en el elemento de video.