Create a gist now

Instantly share code, notes, and snippets.

<!DOCTYPE html>
<meta charset="utf-8">
<title>getUserMedia Example</title>
<meta name="description" content="WebRTC Simple example" />
<meta name="author" content="Ido Green |">
<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">
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%;
background-color: lightgray;
border-radius: 25px
<h1>getUserMedia API Example</h1>
<div id='video-space'>
<video autoplay></video>
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 = stream;
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream;
function errorCallback(error) {
console.log("navigator.getUserMedia error: ", error);
navigator.getUserMedia(constraints, successCallback, errorCallback);
(!) 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.
<a href="" title="WebRTC post on Ido's blog">WebRTC Updates with Demos</a>
<a href="" title="View source for this page on github" id="viewSource">The source on github</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment