video-lab/index.html at develop · el-mapache/video-lab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
  <title>vidz</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <video id="camera-input"></video>
    <canvas width="640" height="480"></canvas>
    <br>
    <div style='float:right; margin-right:200px;'>
      <div id='cc'></div>
    </div>
    <div>
      <form name='canvas-blur' oninput="level.value = canvasBlur.valueAsNumber;">
        <label for="canvasBlur">Blur</label>
        <input type="range" min="0.0" max="1.0" step="0.1" id="canvasBlur" name="canvasBlur" value="1.0"/>
        <output for="canvasBlur" name="level">1.0</output>
      </form>

      <button id="stop">Stop</button>
      <button id="feedback">Feedback</button>
      <button id="glitch">JPEG Glitch</button>
      <button id="reset">Reset</button>

      <div class='filters'>
        <br><br>
        <div style="float: left; margin-left: 20px; margin-right: 20px;">
          <h4>Fixed Filters</h4>
          <div id='grayscale'></div>
          <div id='invert'></div>
          <div id='sepia'></div>
          <div id='emboss'></div>
          <div id='low-res'></div>
          <div id='bayer'></div>
          <div id='xor'></div>
          <div id='and'></div>
        </div>

        <div style="float: left; margin-left: 20px; margin-right: 20px;">
          <h4>Variable Filters</h4>

          <div id='contrast'></div>
          <div id='brightness'></div>
          <div id='saturation'></div>
          <div id='threshold'></div>
          <div id='median'></div>
        </div>

        <div style="float: left; margin-left: 20px; margin-right: 20px;">
          <h4>Convolvers</h4>

          <div id='sobel'></div>
          <div id='laplace'></div>
          <div id='sharpen'></div>
          <div id='blur'></div>
          <div id='embossC'></div>
        </div>
      </div>

      <div id="image-data">
        <button id="snapshot">Take a Photo</button>
      </div>

    </div>
  </div>
  <script src="build.js"></script>
</body>
</html>