I am trying to access audio and video of my laptop and trying to retrieve camera video on the screen, and after doing all the below stuff it is just accessing my camera and mic but not displaying my picture on screen(just blank screen). Showing this error at console- "script.js:16 Uncaught (in promise) TypeError: video.addEventListner is not a function at addVideoStream (script.js:16) at script.js:11"
Below are my script,html,css codes please help-
const videoGrid=document.getElementById('video-grid');
const myVideo=document.createElement('video');
myVideo.muted=true;
let myVideoStream
navigator.mediaDevices.getUserMedia({
video:true,
audio:true
}).then(stream=>{
myVideoStream=stream;
addVideoStream(myVideo,stream);
})
const addVideoStream=(video,stream)=>{
video.srcObject=stream;
video.addEventListner('loadedmetadata',()=>{
video.play();
})
videoGrid.append(video);
}
#video-grid{
display:flex;
justify-content:center;
}
video{
height:300px;
width:400px;
}
<!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>Zoom RJ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="video-grid">
</div>
<script src="script.js"></script>
</body>
</html>
You have typo in your syntax. Try this.
video.addEventListener
.
You are missing e
from Listener