2016-04-13 14 views
0

Web kameramım projemi ile ilgili bir sorun yaşıyorum. Web sayfası kameramıma erişebilir ve kamera açılır, ancak hiçbir şey görüntülenmez. Aldığım hata: "Yakalanmayan TypeError:" nc "src" özelliği ayarlanamıyor. Yardımlarınız için şimdiden teşekkür ederiz.Benim Javascript projesi web kamerasına erişiyor ama hiçbir şey görüntülenmiyor

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

DÜZENLEME: benim sorum önerilen konuya doğada çeşit benzer iken , ben düzeltilecektir ne olabilir emin değilim benim düzeltmek için kod. İndeks.html'deki DOM'yi etkilemek için etiketleri bir yere taşıyamıyorum. Ayrıca kullanmadan önce 'camvideo' ibaresini de bildirdim ve bana sorun veren 'src' öğesi doğal bir HTML niteliğidir ve bildirebileceğim bir şey değil mi?

+1

Olası kopyalar http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom -ethod-get-get-get-by-the-element öğesinin anlamı –

cevap

2

bu çizgiye # karakteri ekleyerek deneyin: (document.querySelector yöntemi sadece iç jQuery en $ ait her şey gibi çalışır:

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

Nedeni: Bu gibi görünüyor Böylece

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

'...') yöntem. Bu yüzden, #id .className 'selektör zincirlerinizi document.querySelector()' ın içinde kullanabilirsiniz.

Bu JavaScript kodu: document.querySelector('#id .className'), bu jQuery koduyla aynı: $('#id .className').

, # olmadan, bir boş değer döndürecek ancak bununla birlikte video etiketini/nesnesini DOM'dan döndüreceğini gösterir.

+0

Yanıtlama için teşekkürler. Ne yazık ki, JSFiddle çalışırken, projemde yaptığınız değişiklikleri Netbeans uygulamasında uyguladığımda, aynı hata hala oluşuyor. Ayrıca bir metin belgesine kopyalamayı ve bunu çalıştırmayı denedim, ancak web kameramıza bile erişmiyor. Başka önerileriniz var mı? – sledgewhack

+0

Orijinal kodunuzu kopyala ve yapıştır ile kemanımda test ettiğimde, güvenlik duvarım web kameramın erişimini istiyordu. Onu açmamamı söyledim. Web kameramma bağlanmaya çalıştığından, web kameranıza erişebildiğinden emin olmak için güvenlik duvarı ayarlarınızı iki kez kontrol etmeniz gerekebilir. – Clomp

0

Çalışan bir web kamerası beslemesi yapmayı başardım. İhtiyacım olan tek şey bir Etkinlik Dinleyicisi (yanı sıra diğer cevapta # sembolü) içermekti.

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); 
[Neden jQuery veya getElementById olarak bir DOM yöntemi olmadığını elemanı bulur?] (Içinde
İlgili konular