| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>getUserMedia Demo 3</title> |
| <!-- Load the polyfill to switch-hit between Chrome and Firefox --> |
| <script src="../../base/adapter.js"></script> |
| <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; |
| } |
| .grayscale { |
| -webkit-filter: grayscale(1); |
| } |
| .sepia { |
| -webkit-filter: sepia(1); |
| } |
| .invert { |
| -webkit-filter: invert(1); |
| } |
| .blur { |
| -webkit-filter: blur(3px); |
| } |
| </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="change()">Change Filter</button> |
| <button id="btn3" onclick="snap()">Snapshot</button> |
| <script> |
| filters = ["", "sepia", "invert", "blur", "grayscale"]; |
| findex = 0; |
| video = document.getElementById("vid"); |
| canvas = document.getElementById("cvs"); |
| canvas.width = 480; |
| canvas.height = 360; |
| btn2.disabled = true; |
| btn3.disabled = true; |
| function start() { |
| navigator.getUserMedia({video:true}, gotStream, function() {}); |
| btn1.disabled = true; |
| } |
| function gotStream(stream) { |
| attachMediaStream(video, stream); |
| btn2.disabled = false; |
| btn3.disabled = false; |
| } |
| function change() { |
| video.className = ''; |
| findex = (findex + 1) % filters.length; |
| if (findex != 0) |
| video.classList.add(filters[findex]); |
| } |
| function snap() { |
| canvas.className = ''; |
| if (findex != 0) |
| canvas.classList.add(filters[findex]); |
| canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height); |
| } |
| </script> |
| </body> |
| </html> |
| |
