JS调用摄像头获取音视频流后页面无画面，报addEventListner不是函数错误

控制台报错已经明确指出addEventListner不是一个方法，这是拼写错误导致的：

• DOM元素的标准事件绑定方法拼写为 addEventListener，你代码中少写了字母 e，错误写成了 addEventListner

只需要修改addVideoStream函数里的事件绑定方法拼写即可，修正后的完整JS代码如下：

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.addEventListener('loadedmetadata',()=>{
        video.play();
    })
    videoGrid.append(video);
}

修改后刷新页面，授予设备权限后即可正常显示摄像头采集的画面：

• 代码逻辑本身没有其他问题，CSS和HTML代码都可以正常复用无需修改
• 你设置的myVideo.muted=true是合理的，避免自己的麦克风声音回传到自己的扬声器产生啸叫

内容的提问来源于stack exchange，提问作者Rudransh J