<!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> |
This comment has been minimized.
This comment has been minimized.
CreateObjectURL method at line #54 does not work anymore. Replace with video.srcObject = stream |
This comment has been minimized.
This comment has been minimized.
Thank you @FabC ! |
This comment has been minimized.
This comment has been minimized.
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
This comment has been minimized.
Live gist at: https://rawgit.com/greenido/6238800/raw/a3f2a035112c29de58480d3fcadb7535832b0580/webRTC%20Hello%20World%20Example.html