CODEWITHSUNDEEP
javascripthtml
b_d
b_d

Reputation: 787

How do I access navigator.getUserMedia()?

I am currently running Chrome 11 and trying to access getUserMedia for HTML5 native audio and video stream support but I am getting an error saying that navigator.getUserMedia is undefined. If it's not supported, how do I access it or do I need to wait until Chrome incorporates it?

This is the the code I was using to test getUserMedia which I found

 <h1>Snapshot Kiosk</h1>
 <section id="splash">
  <p id="errorMessage">Loading...</p>
 </section>
 <section id="app" hidden>
  <p><video id="monitor" autoplay></video> <canvas id="photo"></canvas>
  <p><input type=button value="&#x1F4F7;" onclick="snapshot()">
 </section>
 <script>
  navigator.getUserMedia('video user', gotStream, noStream);
  var video = document.getElementById('monitor');
  var canvas = document.getElementById('photo');
  function gotStream(stream) {
    video.src = URL.getObjectURL(stream);
    video.onerror = function () {
      stream.stop();
      noStream();
    }
    video.onloadedmetadata = function () {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      document.getElementById('splash').hidden = true;
      document.getElementById('app').hidden = false;
    }
  }
  function noStream() {
    document.getElementById('errorMessage').textContent = 'No camera available.';
  }
  function snapshot() {
    canvas.getContext('2d').drawImage(video, 0, 0);
  }
 </script>

Upvotes: 17

Views: 20286

Answers (4)

Sam Dutton
Sam Dutton

Reputation: 15269

Since last night (3 May 2012) getUserMedia() in Chrome Canary takes an object not a string.

To try it out, you can run the following code from the console on any page (like this one) with a video element:

navigator.webkitGetUserMedia(
  {"video": true, "audio": true}, 
  function(s){
    document.querySelector('video').src = 
      window.webkitURL.createObjectURL(s);
  }, 
  function(e){console.log(e);}
);

Upvotes: 4

Ahi Tuna
Ahi Tuna

Reputation: 1273

Chrome Dev Channel JUST added WebRTC support, so NOW what you're asking here actually becomes plausible. See: https://groups.google.com/forum/#!topic/discuss-webrtc/LuY7zYLA8sA

Basically, you must use the webkit prefixe: webkitGetUserMedia() although documentation on this method is scarce, I'm currently trying to piece together a working demo of it.

Upvotes: 3

mwrf
mwrf

Reputation: 3846

The latest opera desktop build has support for getUserMedia() See here: http://labs.opera.com/news/2011/10/19/

It's just a waiting game for other browsers to implement this. Now that opera has support, the other should soon follow.

Upvotes: 4

benmmurphy
benmmurphy

Reputation: 2505

I think there is a stub method in the latest chrome dev (12.0.742.16 dev) but i can't get it to do anything on Mac OSX. At least I thought I saw it. I just checked and the method doesn't seem to be there anymore. Here is the webkit bug report for implementing getUserMedia: https://bugs.webkit.org/show_bug.cgi?id=56586

I think the only working implementation at the moment is in Opera for Android. http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview

The chrome/webkit method is webkitGetUserMedia but it isn't implemented yet.

Upvotes: 3

Related Questions