webrtc/samples/js/demos/html/gum2.html
2013-02-27 23:22:10 +00:00

49 lines
981 B
HTML

<!DOCTYPE html>
<html>
<head>
<title>getUserMedia Demo 2</title>
<style>
video {
border:5px solid black;
width:480px;
height:360px;
}
canvas {
border:5px solid black;
width:480px;
height:360px;
}
button {
font: 18px sans-serif;
padding: 8px;
}
</style>
</head>
<body>
<video id="vid" autoplay="true"></video>
<canvas id="cvs"></canvas>
<br>
<button id="btn1" onclick="start()">Start</button>
<button id="btn2" onclick="snap()">Snapshot</button>
<script>
video = document.getElementById("vid");
canvas = document.getElementById("cvs");
canvas.width = 480;
canvas.height = 360;
btn2.disabled = true;
function start() {
navigator.webkitGetUserMedia({video:true}, gotStream, function() {});
btn1.disabled = true;
}
function gotStream(stream) {
video.src = webkitURL.createObjectURL(stream);
btn2.disabled = false
}
function snap() {
canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>