CVPlayground/index.html at master · StevenAbbott/CVPlayground · 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
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
    <body>
        <div>
            <h1 id="header">CrispCut Computer Vision Playground</h1>
            <div class="modal"></div>
        </div>
        <!--<p>Know 'em both, same guy.</p>
        <button id="ownerToggle">"Who's page?"</button>-->
        <div id="doc">
            <h3>
                Below are several examples of several common computer vision
                'filters' or 'algorithms:'
            </h3>
            <p>
                <b>- Canny edge detection</b> detects -you guessed it- edges
                in an image. It is used for segmenting objects and finding
                corners of surfaces. Notice how clearly it makes features
                like doorways and table edges stand out.
            </p>
            <p>
                <b>- Adaptive Gaussian Thresholding</b> is used to evenly
                blend out lighting
                in an image. Its a bit hard to tell because you are seeing
                it applied to a grey version of the origional image, but notice
                how it highlights more shadowy parts of the image.
            </p>
            <p>
                <b>- Background Subtraction</b> is used to detect motion in a
                video.
                Frames of the video are -more or less- subtracted from
                eachother in pairs of two or sometimes more (to detect longer
                trends in motion and improve accuracy). All that remains
                is the differences between the two frames ie. wherever there
                was motion.
            </p>
        </div>
        <div id="content">
            <div>
                <ul>
                    <li>
                        <div class="label">
                            <h3>
                                Original
                            </h3>
                            <div class="container">
                                <video autoplay="true" id="videoElement"></video>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="displayRow">
                <ul>
                    <li>
                        <div class=label id="canny">
                            <h3>
                                Canny
                            </h3>
                            <div class="container">
                                <canvas class="outPut" id="outPut0"></canvas>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class=label id="canny">
                            <h3>
                                Adaptive Gaussian Threshold
                            </h3>
                            <div class="container">
                                <canvas class="outPut" id="outPut1"></canvas>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class=label id="canny">
                            <h3>
                                Background Subtraction
                            </h3>
                            <div class="container">
                                <canvas class="outPut" id="outPut2"></canvas>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <link rel="stylesheet" type="text/css" href="style.css">
        <!--<script src="functionality.js"></script>-->
        <script src="webcam.js"></script>
        <script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
    </body>
</html>