Note: We no longer publish the latest version of our code here. We primarily use a kumc-bmi github organization. The heron ETL repository, in particular, is not public. Peers in the informatics community should see MultiSiteDev for details on requesting access.

source: webrtc/samples/js/demos/html/gum3.html @ 0:4bda6873e34c

pub_scrub_3792 tip
Last change on this file since 0:4bda6873e34c was 0:4bda6873e34c, checked in by Michael Prittie <mprittie@…>, 6 years ago

Scrubbed password for publication.

File size: 1.5 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4<title>getUserMedia Demo 3</title>
5<style>
6video {
7    border:5px solid black;
8    width:480px;
9    height:360px;
10}
11canvas {
12    border:5px solid black;
13    width:480px;
14    height:360px;
15}
16button {
17    font: 18px sans-serif;
18    padding: 8px;
19
20.grayscale {
21  -webkit-filter: grayscale(1);
22}
23.sepia {
24  -webkit-filter: sepia(1);
25}
26.invert {
27  -webkit-filter: invert(1);
28}
29.blur {
30  -webkit-filter: blur(3px);
31}
32</style>
33</head>
34<body>
35<video id="vid" autoplay="true"></video>
36<canvas id="cvs"></canvas>
37<br>
38<button id="btn1" onclick="start()">Start</button>
39<button id="btn2" onclick="change()">Change Filter</button>
40<button id="btn3" onclick="snap()">Snapshot</button>
41<script>
42filters = ["", "sepia", "invert", "blur", "grayscale"];
43findex = 0;
44video = document.getElementById("vid");
45canvas = document.getElementById("cvs");
46canvas.width = 480;
47canvas.height = 360; 
48btn2.disabled = true;
49btn3.disabled = true;
50function start() {
51  navigator.webkitGetUserMedia({video:true}, gotStream, function() {});
52  btn1.disabled = true;
53}
54function gotStream(stream) {
55  video.src = webkitURL.createObjectURL(stream);
56  btn2.disabled = false;
57  btn3.disabled = false;
58}
59function change() {
60  video.className = '';
61  findex = (findex + 1) % filters.length;
62  if (findex != 0)
63    video.classList.add(filters[findex]);
64}
65function snap() {
66  canvas.className = '';
67  if (findex != 0)
68    canvas.classList.add(filters[findex]);
69  canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
70}
71</script>
72</body>
73</html>
74
Note: See TracBrowser for help on using the repository browser.