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="📷" 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>
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.
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.
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.
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.
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);}
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With