JS调用getUserMedia获取音视频权限后报video is null错误求助

错误根因 #

你的HTML页面中没有声明<video>元素，执行document.querySelector('video')时无法匹配到对应的DOM节点，返回值为null，后续对空值调用srcObject属性就会抛出你看到的video is null报错。

修复步骤 #

1. 在<body>标签内、<script>标签之前添加video元素，可按需设置宽高等属性：

<video width="640" height="480"></video>

2. 调整后的完整可运行代码如下：

<!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>
    <video width="640" height="480"></video>
    <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>

额外注意事项 #

• 当前主流浏览器的自动播放策略会拦截带音频的媒体自动播放，如果你遇到播放被拦截的报错，可以给video标签添加muted属性静音播放，或者绑定用户交互事件（比如点击按钮）来触发video.play()调用。
• getUserMedia接口仅支持在HTTPS协议、localhost本地调试环境下运行，其他HTTP环境下调用会直接被浏览器拒绝。

内容的提问来源于stack exchange，提问作者Imdadul Haque