私のJavascriptプロジェクトはウェブカメラにアクセスしていますが、何も表示されていません

私のウェブカメラプロジェクトに問題があります。ウェブページが私のウェブカメラにアクセスでき、カメラの電源はオンになりますが、何も表示されません。エラー："キャッチされていないタイプエラー：nullの" src "プロパティを設定できません"。ご協力いただきありがとうございます。私のJavascriptプロジェクトはウェブカメラにアクセスしていますが、何も表示されていません

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>

webcam.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');});  
}

EDIT：私の質問は、一種の同様の提案スレッドに自然の中で、私は自分で修正することができるかわからないよいる間コードを修正してください。タグをindex.htmlのDOMに影響する場所に移動することはできません。私はそれを使用する前に 'camvideo'を宣言しました。私に問題を引き起こしている 'src'要素は、ネイティブHTML属性です。宣言できるものではありませんか？

出典

2016-04-13 sledgewhack

可能な重複http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom -method-like-getelementbyid-not-find-the-element） –

このラインに#文字を追加してみてください：（document.querySelector方法は、単に内部jQueryの$のすべてのもののように動作します：

は

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

理由：それはこのようになりますように

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

'...'）方法。したがって、document.querySelector（）内の `#id .className 'セレクタチェーンを使用することができます。

このJavaScriptコード：document.querySelector('#id .className')は、このjQueryコード：$('#id .className')と同じです。

#がなければnullを返しますが、DOMタグからビデオタグ/オブジェクトが返されることを示すJSFiddleがあります。

出典

2016-04-13 16:05:59 Clomp

お返事ありがとうございます。残念ながら、あなたのJSFiddleが動作している間に、Netbeansで自分のプロジェクトに加えた変更を適用すると、同じエラーが発生します。私はそれをテキスト文書にコピーして実行しようとしましたが、ウェブカメラにもアクセスしません。それ以上の提案はありますか？ – sledgewhack

コピー＆ペーストで自分のオリジナルコードをテストしたところ、ファイアウォールは自分のウェブカメラへのアクセスを要求していました。私はそれをオンにしないように言った。 Webカメラに接続しようとしていたので、ファイアウォールの設定を確認して、Webカメラにアクセスできることを確認する必要があります。 – Clomp

私は実際のウェブカメラのフィードを達成することができました。私が必要としたのは、イベントリスナー（＃記号だけでなく、他の答え）も含めることでした。

window.addEventListener("DOMContentLoaded", function(){ 
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');});  
} 
}, false);

[なぜjQueryのかなgetElementByIdをなどのDOMメソッドはない要素を見つけるのですか？]（の

出典

2016-04-19 14:00:09 sledgewhack

私のJavascriptプロジェクトはウェブカメラにアクセスしていますが、何も表示されていません

答えて

関連する問題