first

mcouzinet · Dec 28, 2012 · 50fc676 · 50fc676
1 parent 54aa43a
commit 50fc676
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 42 deletions.
diff --git a/index.html b/index.html
@@ -1,53 +1,122 @@
-<!DOCTYPE html>
+<!doctype html>
-
 <html>
+  <head>
+    <title>Test Penninghen #1</title>
+    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
+
+    <style type="text/css">
+      #canvasCarre{position:fixed;top:0;left:0;z-index:2;}
+      #camFeed{position:fixed;top:0;left:0;z-index:1;}
+
+    </style>
+  </head>
+
+  <body>
+
+    <canvas id="canvasCarre" width="800px" height="600px"></canvas>
+    <video id="camFeed" width="800px" height="600px" autoplay>
+
+    <script>
+
+
+    $(function(){
+
+    var analyser, 
+      context,
+      jsProcessor,
+      microphone,
+      data,
+      sum,
+      x,
+      canvasCarre = $('#canvasCarre'),
+      tabCarre = new Array(),
+      max = 2000,
+      contextCanvas = canvasCarre[0].getContext('2d')
+      //height = $(window).height()
+      height = 600,
+      //width = $(window).width();
+      width = 800,
+      test = 1;
+
+    navigator.webkitGetUserMedia({audio:true,video:true}, onStream, onError);
 
-    <head>
+    //canvasCarre.height(height);
-        <title>webRTC Test</title>
+    //canvasCarre.width(width);
-    </head>
+
-
+    function randomize(arr) {
-    <script type="text/javascript">
+
-
+        arr.sort(function() { 
-      function init()
+          return 0.5 - Math.random();
-      {
+        });
-          if(navigator.webkitGetUserMedia)
+        return arr;  
-          {
+
-              navigator.webkitGetUserMedia({video:true}, onSuccess, onFail);
-          }
-          else
-          {
-              alert('webRTC not available');
-          }
       }
-
+
-      function onSuccess(stream)
+    function onStream(stream) {
-      {
+
-          document.getElementById('camFeed').src = webkitURL.createObjectURL(stream);
+
+      document.getElementById('camFeed').src = webkitURL.createObjectURL(stream);
+
+      context = new webkitAudioContext();
+      microphone = context.createMediaStreamSource(stream);
+      analyser = context.createAnalyser();
+      jsProcessor = context.createJavaScriptNode(1024,1,1);
+
+      microphone.connect(analyser);
+      analyser.connect(jsProcessor);
+      jsProcessor.connect(context.destination);
+      window.setInterval(update, 400);
+      jsProcessor.onaudioprocess = function(e){
+      data = new Uint8Array(10);
+        analyser.getByteFrequencyData(data);
       }
-
+
-      function onFail()
+    }
-      {
+
-          alert('could not connect stream');
+
+
+
+    function onError(err) {
+
+      console.log('On a un problème !');
+
+    }
+
+    function update() {
+
+
+      contextCanvas.clearRect(0, 0, 800, 600);
+
+
+      sum = data[0]+data[1]+data[2]+data[3]+data[4]+data[5]+data[6]+data[7]+data[8]+data[9];
+
+      x = 160 * (sum-300) / max;
+
+      for(var k = 0; k < 160 ; k++){
+        tabCarre[k] = (k > x) ? 0 : 1 ;
       }
+      tabCarre = randomize(tabCarre);
 
-    </script>
+      var canH = 60;
+      var canW = 50;
+      contextCanvas.fillStyle="white";
+
+      for(var k = 0; k < 160 ; k++){
 
-    <body onload="init();" style="background-color:#ababab;" >
+        var ligne = Math.floor( k / 10 );
-        <div style="width:1200px; height:840px; margin:0 auto; background-color:#fff;" >
+        if(tabCarre[k] == 0){
-            <div>
-              <video id="camFeed" width="1200px" height="840px" autoplay>
-            </video>
-          </div>
 
-            <div>
+          contextCanvas.fillRect( ligne * canW, (canH * k)-(ligne*canH*10) ,canW,canH);
-                <canvas id="photo" width="320" height="240">
+        }
-                </canvas>
+
-            </div>
+      }
 
-            <div style="margin:0 auto; width:82px;">
+    }
-                <input type="button" value="Take Photo" onclick="takePhoto();">
-            </div>
-        </div>
 
-    </body>
+      });
+
+    </script>
+
+  </body>
 </html>
+