My Javascript project is accessing the webcam but nothing is displaying

Question

I am having an issue with my webcam project. The webpage is able to access my webcam and the camera turns on, but nothing is displayed. The error which I get is: "Uncaught TypeError: Cannot set property 'src' of null". Thanks in advance for any help.

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: Whilst my question is sort of similar in nature to the suggested thread, I am unsure what could be corrected in my code to fix it. I cannot move the tags anywhere to affect the DOM in index.html. I have also declared 'camvideo' before I use it and the 'src' element which is giving me trouble is a native HTML attribute and it isn't something which I can declare?

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — James Thorpe, Apr 13 '16 at 15:57

score 2 · Answer 1 · answered Apr 13 '16 at 16:05

2

Try adding the # character to this line:

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

So that it looks like this:

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

Reason: The document.querySelector method works just like everything inside of jQuery's $('...') method. So you can use your `#id .className' selector chains inside of document.querySelector().

This JavaScript code: document.querySelector('#id .className') is the same as this jQuery code: $('#id .className').

Here is a JSFiddle, which shows that without the #, it will return a null but with it, it will return the video tag/object from the DOM.

answered Apr 13 '16 at 16:05

Clomp

3,168
2
23
36

Thanks for answering. Unfortunately, whilst your JSFiddle works, when I apply the changes you made to my project in Netbeans, the same error still occurs. I also tried copying it into a text document and running that but it doesn't even access my webcam. Do you have any further suggestions? – sledgewhack Apr 13 '16 at 17:06
When I tested out your original code in my fiddle via copy & paste, my firewall was asking me for access to my webcam. I told it not to turn it on. Since it was trying to connect to my webcam, you may need to double check your firewall settings to make sure that it can access your webcam. – Clomp Apr 13 '16 at 17:37

score 0 · Answer 2 · answered Apr 19 '16 at 14:00

I have managed to achieve a working webcam feed. All I needed was to include an Event Listener (as well as the # symbol in the other answer).

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

My Javascript project is accessing the webcam but nothing is displaying

2 Answers2