-3

I am trying to access the webcam stream using HTML5 and JavaScript, using the technique described in this blog: https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm

It is based on the navigator.getUserMedia method.

The thing is, it just kinda works. Sometimes it does, sometimes it doesn't. Even this example webpage also does not work anymore if I reload the page.

What can be missing, and how do I even debug this? What is a flawless way to access the webcam in the browser? I am not even worried about compatibility with other browsers, give me a sure way that only works in Chrome and I'll take it!

Is creating a java applet or something a better alternative??...

EDIT here is my code:

<html>
<head>
  <meta charset="utf-8">
  <title>Display Webcam Stream</title>

  <style>
#container {
    margin: 0px auto;
    width: 640px;
    height: 480px;
    border: 10px #333 solid;
}
#videoElement {
    width: 640px;
    height: 480px;
    background-color: #666;
}
  </style>
</head>

<body>
<div>
  <a onClick="snapshot()">snap!</a>
</div>
<br/>

<div id="container">
  <div>
    <video autoplay="true" id="videoElement"></video>
  </div>
</div>
<div>
  <img width=320 height=240 src="" id="saida">
</div>
  <canvas style="display:none;"></canvas>

<script>
var video = document.querySelector('#videoElement');

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;

 <!--video.addEventListener('click', snapshot, false);-->

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {
    navigator.getUserMedia({audio: false, video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream    
}

function videoError(e) {
    console.log('foi malz');
}

function snapshot() {
  if (localMediaStream) {

    canvas.width = video.clientWidth;
    canvas.height = video.clientHeight;

    ctx.drawImage(video, 0, 0);
    document.querySelector('#saida').src = canvas.toDataURL('image/webp');
  }
}
</script>
</body>
</html>

EDIT2: This is apparently some bug in Chrome, in my machine. I reported it, let's see what happens. Probably will never be fixed. It works perfectly in Firefox anyway.

halfer
  • 19,824
  • 17
  • 99
  • 186
dividebyzero
  • 2,190
  • 1
  • 21
  • 33
  • I am actually having problems with that webpage itself... – dividebyzero Sep 08 '16 at 20:52
  • Some further information: When it fails what happens is that the webcam light turns on, and then I even see the little "rec" symbol at the browser tab blink... Then it gives up, the lamp turns off and the icon is gone, and the image window is just black. – dividebyzero Sep 08 '16 at 21:10
  • And more: if I keep printing `localMediaStream` at the console, it first displays `active: true` when the webcam led is on... Then when it goes off it moves to `active: false`. – dividebyzero Sep 08 '16 at 21:54
  • I'm voting to close this question as off-topic because it seems to be a bug in Chrome running in my machine. Works perfectly in Firefox. – dividebyzero Sep 23 '16 at 17:38

1 Answers1

0

Apart from the comment inside your JS code (<!-- --> isn't a valid JS comment), there isn't anything wrong with your code.

What you could do, however, is to wait for the DOMContentLoaded event to be fired before enabling the webcam. Also, check whether you're loading the page from a trusted source. file:// and http:// protocols (except localhost over http) aren't secure sources.

Check the working example: https://jsbin.com/cizahahude/edit?js,console,output

Carlos Melo
  • 3,052
  • 3
  • 37
  • 45
  • Sound good, I'll try that, but you might like to make sure about your comment regarding the validity of ` – dividebyzero Sep 08 '16 at 21:08
  • I know it _works_ inside inline JS, but its still invalid nonetheless. That was only a reminder so you may write your comments as valid JS code. If you ever need to extract the code to a JS file, you won't have to be searching all over replacing it. ;) – Carlos Melo Sep 08 '16 at 21:30
  • Refer to this answer for additional details: http://stackoverflow.com/a/808850/396002 – Carlos Melo Sep 08 '16 at 21:31
  • AFAIK ` – dividebyzero Sep 08 '16 at 21:50
  • Thanks for the very promising suggestion, but I'm still getting very erractic behavior. Does that work for you every time, even reloading the page again and again?... – dividebyzero Sep 08 '16 at 21:51
  • It does. What's your current environment? – Carlos Melo Sep 08 '16 at 21:53
  • Btw, if you want a crossbrowser solution with a flash fallback, you can use Addy Osmani's polyfill for getusermedia (https://github.com/addyosmani/getUserMedia.js) – Carlos Melo Sep 08 '16 at 21:56
  • Chrome Version 50.0.2661.75 (64-bit), Ubuntu 15.04, old 2010 Dell laptop. What makes me crazy is there is not even some kind of error message, it just gives up... – dividebyzero Sep 08 '16 at 21:59
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/122938/discussion-between-edmelo-and-dividebyzero). – Carlos Melo Sep 08 '16 at 22:05