1<!doctype html>
 2<html>
 3
 4<head>
 5    <meta charset="utf-8">
 6    <title>proves de so</title>
 7    <!--Let browser know website is optimized for mobile-->
 8    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 9
10    <!--Import Google Icon Font-->
11    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
12    <!--Import materialize.css-->
13    <link type="text/css" rel="stylesheet" href="bower_components/materialize/dist/css/materialize.min.css"  media="screen,projection"/>
14
15
16
17
18    <style>
19        .video,
20        .canvas {
21            /*margin-left: 100px;
22            margin-top: 35px;*/
23            position: absolute;
24        }
25    </style>
26</head>
27
28<body>
29    <div class="row">
30        <div class="col s6">
31            <video id="video" class="video" width="600" height="450" preload autoplay loop muted controls></video>
32            <canvas id="canvas" class="canvas" width="600" height="450"></canvas>
33            <a class="waves-effect waves-light btn" onclick="silence()"><i class="material-icons left">volume_off</i> silenci</a>
34        </div>
35        <div class="col s6">
36
37        </div>
38    </div>
39
40
41    <!--Import jQuery before materialize.js-->
42    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
43    <script type="text/javascript" src="bower_components/materialize/dist/js/materialize.min.js"></script>
44
45    <script src="bower_components/tracking/build/tracking-min.js"></script>
46    <script src="bower_components/pizzicato/distr/Pizzicato.js"></script>
47
48    <script src="colorTracking.js"></script>
49</body>
50
51</html>