2013-02-28 00:22:10 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>getUserMedia Demo 2</title>
|
2014-01-31 00:38:44 +01:00
|
|
|
<!-- Load the polyfill to switch-hit between Chrome and Firefox -->
|
|
|
|
|
<script src="../../base/adapter.js"></script>
|
2013-02-28 00:22:10 +01:00
|
|
|
<style>
|
|
|
|
|
video {
|
|
|
|
|
border:5px solid black;
|
|
|
|
|
width:480px;
|
|
|
|
|
height:360px;
|
|
|
|
|
}
|
|
|
|
|
canvas {
|
|
|
|
|
border:5px solid black;
|
|
|
|
|
width:480px;
|
2014-01-31 00:38:44 +01:00
|
|
|
height:360px;
|
2013-02-28 00:22:10 +01:00
|
|
|
}
|
|
|
|
|
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;
|
2014-01-31 00:38:44 +01:00
|
|
|
canvas.height = 360;
|
2013-02-28 00:22:10 +01:00
|
|
|
btn2.disabled = true;
|
|
|
|
|
function start() {
|
2014-01-31 00:38:44 +01:00
|
|
|
navigator.getUserMedia({video:true}, gotStream, function() {});
|
2013-02-28 00:22:10 +01:00
|
|
|
btn1.disabled = true;
|
|
|
|
|
}
|
|
|
|
|
function gotStream(stream) {
|
2014-01-31 00:38:44 +01:00
|
|
|
attachMediaStream(video, stream);
|
2013-02-28 00:22:10 +01:00
|
|
|
btn2.disabled = false
|
|
|
|
|
}
|
|
|
|
|
function snap() {
|
|
|
|
|
canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
