| <!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> |
| |