HTML5VideoImageProcessing/blurfast.html at master · DaisukeHirata/HTML5VideoImageProcessing · 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Video Frames</title>
    <link rel="stylesheet" href="style.css">
    <style>
      #movieclip {
        display: none;
      }
    </style>
  </head>
  <body>
    <header>Avoid cross domain security error. $ http-server -p 8000 </header>
    <canvas id="canvas" width="600" height="360"></canvas>
    <input id="amount" type="range" min="0.0" max="1.5" step="0.1"/>
    <aside>Video file may take a moment to load.</aside>

    <video id="movieclip" width="640" height="360" autoplay>
      <source src="./assets/movieclip.mp4" type="video/mp4"/>
      <source src="./assets/movieclip.webm" type="video/webm"/>
      <source src="./assets/movieclip.ogv" type="video/ogg"/>
    </video>

    <script src="utils.js"></script>
    <script src="Stats.js"></script>
    <script>
    window.onload = function () {

      var canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d'),
          video = document.getElementById('movieclip'),
          stats = Stat.initStats(),
          scale = 2,
          smallWidth = Math.round(canvas.width / scale),
          smallHeight = Math.round(canvas.height / scale),
          scaledCanvas = createCopyCanvas(smallWidth, smallHeight),
          scaledContext = scaledCanvas.getContext('2d');

      function createCopyCanvas (width, height) {
        var copy = document.createElement('canvas');
        copy.width = width;
        copy.height = height;
        return copy;
      }

      (function drawFrame () {

        stats.begin();

        window.requestAnimationFrame(drawFrame, canvas);
        context.drawImage(video, 0, 0);

        var amount = parseFloat(document.getElementById('amount').value, 10) || 0.0,
        amount = Math.max(0, Math.min(5, amount));

        var steps  = Math.round(amount * 20);

        for (var i = 0; i < steps; i++) {
          var scaledWidth  = Math.max(1, Math.round(smallWidth - i));
          var scaledHeight = Math.max(1, Math.round(smallHeight - i));

          scaledContext.clearRect(0,0,smallWidth,smallHeight);

          scaledContext.drawImage(
            canvas,
            0, 0, canvas.width, canvas.height,
            0, 0, scaledWidth,  scaledHeight
          );

          context.drawImage(
            scaledCanvas,
            0, 0, scaledWidth,  scaledHeight,
            0, 0, canvas.width, canvas.height
          );

        }

        stats.end();

      }());
    };
    </script>
  </body>
</html>