Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getUserMedia Example</title>
<meta name="description" content="WebRTC Simple example" />
<meta name="author" content="Ido Green | greenido.wordpress.com">
<meta name="keywords" content="WebRTC, HTML5, JavaScript, Hack, Ido Green" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<base target="_blank">
<style>
video {
height: 25em;
position: relative;
left: 15%;
}
#video-space {
padding: 1em;
background-color: rgba(70, 70, 6, 0.55);
border-radius: 25px;
}
ul {
padding: 2em;
font-family: sans-serif;
font-size: 120%;
line-height:160%;
background-color: lightgray;
border-radius: 25px
}
</style>
</head>
<body>
<h1>getUserMedia API Example</h1>
<div id='video-space'>
<video autoplay></video>
</div>
<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var constraints = {audio: false, video: true};
var video = document.querySelector("video");
function successCallback(stream) {
// stream available to console so you could inspect it and see what this object looks like
window.stream = stream;
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream;
}
video.play();
}
function errorCallback(error) {
console.log("navigator.getUserMedia error: ", error);
}
navigator.getUserMedia(constraints, successCallback, errorCallback);
</script>
<p>
<ul>
<li>
(!) Please remember to run this example from a (local) web server and not by 'just' clicking on the html. Why? because the browser will block getUserMedia API by default if you won't serve it from a web server. Even in the case of a web server you need to 'allow' this permission in the top-right corner of this page.
</li>
<li>
<a href="http://greenido.wordpress.com/2013/08/14/webrtc-updates/" title="WebRTC post on Ido's blog">WebRTC Updates with Demos</a>
</li>
<li>
<a href="https://gist.github.com/greenido/6238800" title="View source for this page on github" id="viewSource">The source on github</a>
</li>
</ul>
</p>
</body>
</html>