index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Learn JS!</title>
    <script src="webcam.js"></script>
    <link href="style.css" rel="stylesheet">

  </head>
  <body>


    <div class="container">

      <div id="fps-div">
        FPS: <input type="number" id="fps-input" min="1" max="60" step="1" value="30">
      </div>

      <div class="video-wrapper">
        <div>
          <h2>Original Video</h2>
          <video id="user-video" class="videostream" autoplay=""></video>
        </div>
        <div>
          <h2>Your 1337 Instagrammed Video</h2>
          <canvas id="c1" width="160" height="96"/>
        </div>
      </div>

      <div class="clear"></div>

      <!-- Ace editor -->
      <div id="editor-wrapper">
        <div id="editor">// Make your own awesome Instagram style filter in real time!
// Fill out the filter function: pixels is an array of all the pixels in a given frame of the video
// A pixel object has the attributes r, g, b, and a, for red, green, blue, and alpha, respectively.  
// There are also readonly attributes of x and y
function filter(pixels) {

}</div>
<p id="status">Interpreted Successfully</p>
      </div>
      
    </div>

    <h2>Screenshots<span style="font-size: 14px;"> (Click the filtered video)</span></h2>
    <div id="image-div">
    </div>
          
    <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");

        // Start webcamming
        webcam.setup(editor);
    </script>


    <canvas id="hidden-canvas" style="display:none"/>

  </body>
</html>