javascript webcam not working in browser

Question

i have a webcam script but it doesnt seem to work i also dont get any console errors can some one please help me to see what m i doing wrong

Photo.js

    (function(){
    var video = document.getElementById('video'),
                    vendorURL = window.URL || window.webkitURL;

 navigator.getMedia = navigator.getUserMedia ||
                                                                                                                                  navigator.WebKitGetUserMedia||
                                                                                                                    navigator.msGetUserMedia;

                        navigator.getMedia({
                            video:true,
                            audio:false
                        }, function(stream) {
                            video.src = vendorURL.createObjectURL(stream);
                            video.play();
                        }, function(error) {
                            //an error occured
                            //error.code
                        });

    });

index.html

<div class="booth">
     <video id="video" width="400" height="300"></video>
   </div><!-- end booth -->

and here is a fiddle Fiddle

This tutorial is script is taken from https://youtu.be/gA_HJMd7uvQ?t=456

What browser are you testing this in? – yelsayed May 04 '16 at 23:33 — yelsayed, May 04 '16 at 23:33
Are you sure the camera works/configured? – Andy May 04 '16 at 23:35 — Andy, May 04 '16 at 23:35
yes it is configured , m using chrome – kunz May 04 '16 at 23:36 — kunz, May 04 '16 at 23:36

score 2 · Accepted Answer · answered May 04 '16 at 23:45

2

There are two issues at javascript at Question. 1) The IIFE is not actually called; you can call the immediately invoked function expression by including opening and closing parentheses () before closing parenthesis ) 2) w and k at navigator.WebKitGetUserMedia should be lowercase characters navigator.webkitGetUserMedia

(function() {
  var video = document.getElementById('video'),
    vendorURL = window.URL || window.webkitURL;

  navigator.getMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia || /* substituted `w` for `W`, `k` for `K` */
    navigator.msGetUserMedia;

  navigator.getMedia({
    video: true,
    audio: false
  }, function(stream) {
    video.src = vendorURL.createObjectURL(stream);
    video.play();
  }, function(error) {
    console.log(error)
    //an error occured
    //error.code
  });   
}()); // added `()` before closing `)`

jsfiddle https://fiddle.jshell.net/heLs62sg/1/

answered May 04 '16 at 23:45

guest271314

1
15
104
177

i can see it work in ma fiddle but not ma website why the current website m working on http://shahinasingh.esy.es/ – kunz May 05 '16 at 00:04
_"i can see it work in ma fiddle but not ma browser why"_ What do mean? – guest271314 May 05 '16 at 00:05
hmmm please go on to the website above i have the same codes as u have in fiddle but still not working – kunz May 05 '16 at 00:08
it says it has been depreciated ;'( << the console error – kunz May 05 '16 at 00:08
@jake123 Did you review `console` ? `getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See for more details.` – guest271314 May 05 '16 at 00:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111063/discussion-between-jake123-and-guest271314). – kunz May 05 '16 at 00:09
any thought on a fix for this – kunz May 05 '16 at 00:10
Note, `https:` protocol appears to be required, see https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins ; see also http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https – guest271314 May 05 '16 at 00:25

score 0 · Answer 2 · answered May 04 '16 at 23:45

It looks like you have wrapped this code in a closure which wont run unless you specifically call it from somewhere.

(function(){
    // Code will not execute automatically
});

Note the extra parenthesis on the final line in the following example:

(function(){
    // Code will execute automatically
})();

Alternatively, you could assign your code to a variable and manually call it, eg:

var func = (function(){
    // Some Code in here
});

func();

I suspect that this is the root cause of your problem, but I cant say for sure that your webcam code works but this should be a step in the right direction.

javascript webcam not working in browser

2 Answers2