75 lines
1.5 KiB
HTML
75 lines
1.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>getUserMedia Demo 3</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;
|
||
|
|
}
|
||
|
|
.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.webkitGetUserMedia({video:true}, gotStream, function() {});
|
||
|
|
btn1.disabled = true;
|
||
|
|
}
|
||
|
|
function gotStream(stream) {
|
||
|
|
video.src = webkitURL.createObjectURL(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>
|
||
|
|
|