Skip to content

Instantly share code, notes, and snippets.

@greenido
Last active July 27, 2024 04:40
Show Gist options
  • Save greenido/6238800 to your computer and use it in GitHub Desktop.
Save greenido/6238800 to your computer and use it in GitHub Desktop.
<!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;
video.srcObject = stream;
video.onloadedmetadata = function(e) {
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>
@xosg
Copy link

xosg commented Nov 6, 2019

does this have anything to do with webrtc ??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment