Skip to content

Instantly share code, notes, and snippets.

Embed
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;
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>
@FabC

This comment has been minimized.

Copy link

@FabC FabC commented Aug 15, 2019

CreateObjectURL method at line #54 does not work anymore. Replace with

video.srcObject = stream

@greenido

This comment has been minimized.

Copy link
Owner Author

@greenido greenido commented Aug 15, 2019

Thank you @FabC !
Fixed.

@JinHengyu

This comment has been minimized.

Copy link

@JinHengyu JinHengyu 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