Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 396
b_d Avatar asked Apr 30 '11 23:04

b_d


People also ask

How do I use Navigator MediaDevices getUserMedia?

When getUserMedia() is invoked, the browser asks for permission from the user to use the media inputs (camera or microphone or both) connected to the user device. Syntax : navigator. mediaDevices.

Is getUserMedia deprecated?

getUserMedia() Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.

What is getUserMedia API?

getUserMedia API This API is used for accessing and controlling the media devices like the camera in our device. It is available in the navigator. mediaDevices object.


2 Answers

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.

like image 185
mwrf Avatar answered Oct 23 '22 19:10

mwrf


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);}
);
like image 45
Sam Dutton Avatar answered Oct 23 '22 21:10

Sam Dutton