访问网络摄像头 HTML5 的控制台错误答案

【问题标题】：Console error accessing webcam HTML5访问网络摄像头 HTML5 的控制台错误
【发布时间】：2017-12-26 15:34:51
【问题描述】：

我在用 HTML5 测试我的网络摄像头时遇到了问题。

代码如下：

   <meta charset="utf-8">
   <title>Display Webcam Stream</title>
   <script language="Javascript">
        var video = document.getElementById('video');

        if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
             navigator.mediaDevices.getUserMedia({ video: true 
                  }).then(function(stream) {
                  video.src = window.URL.createObjectURL(stream);
                  video.play();
             });
        }
   </script>

体内有：

<video id="video" autoplay="true"></video>

访问网站 (HTTPS)，它询问我网络摄像头的权限，在我允许网络摄像头打开后，但查看控制台时出现错误：

testing.php:14 Uncaught (in promise) TypeError: Cannot set property 'src' of null
at testing.php:14
at <anonymous>

我该如何解决？

（抱歉英语不好）

谢谢。

【问题讨论】：

看起来你的 JS 是在页面上存在元素之前执行的。尝试将您的代码移动到页面末尾的结束正文标记之前

标签： javascript html webcam

【解决方案1】：

没有id为video的元素

如果存在，getElementById 仍将返回 null。您需要在页面末尾或DOMContentLoaded 事件内移动脚本。

【讨论】：

我忘记在问题内的视频标签内写id，但php页面总是出错。