gpt4 book ai didi

javascript - 我的 Javascript 项目正在访问网络摄像头,但没有显示任何内容

转载 作者:行者123 更新时间:2023-12-02 14:45:54 25 4
gpt4 key购买 nike

我的网络摄像头项目遇到问题。该网页能够访问我的网络摄像头并且摄像头打开,但没有任何显示。我收到的错误是:“未捕获的类型错误:无法将属性“src”设置为 null”。预先感谢您的帮助。

index.html

<html>
<head>
<title>Pi Webcam Server</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="webcam.js"></script>
</head>
<body>
<div id="camDiv">
<video autoplay id="camVideo">

</video>
</div>
</body>
</html>

网络摄像头.js

var camvideo = document.querySelector('camVideo');

navigator.getUserMedia = navigator.getUserMedia
||navigator.webkitGetUserMedia//Chrome;
||navigator.mozGetUserMedia//Firefox
||navigator.msGetUserMedia//IE
||navigator.oGetUserMedia;//Safari

if(navigator.getUserMedia){
navigator.getUserMedia({video:true},
function(stream){camvideo.src = window.URL.createObjectURL(stream);},
function(){alert('error');});
}

编辑:虽然我的问题本质上与建议的线程类似,但我不确定可以在我的代码中纠正哪些内容来修复它。我无法将标签移动到任何地方来影响index.html 中的DOM。我还在使用它之前声明了“camvideo”,而给我带来麻烦的“src”元素是一个 native HTML 属性,它不是我可以声明的东西?

最佳答案

尝试将 # 字符添加到此行:

var camvideo = document.querySelector('camVideo');

所以它看起来像这样:

var camvideo = document.querySelector('#camVideo');

原因:document.querySelector 方法的工作方式与 jQuery 的 $('...') 方法中的所有内容一样。因此,您可以在 document.querySelector() 内部使用“#id .className”选择器链。

此 JavaScript 代码:document.querySelector('#id .className') 与此 jQuery 代码相同:$('#id .className')

这是一个JSFiddle ,这表明如果没有 #,它将返回 null,但有了它,它将从 DOM 返回视频标签/对象。

关于javascript - 我的 Javascript 项目正在访问网络摄像头,但没有显示任何内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36603694/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com