Skip to content

Instantly share code, notes, and snippets.

@chrisdelbuck

chrisdelbuck/index.html

Created February 20, 2013 23:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chrisdelbuck/5000821 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chrisdelbuck/5000821 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chrisdelbuck created this gist Feb 20, 2013.
    24 changes: 24 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
    <style>
    body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: white;
    background-color:#000;
    }
    #source {margin:0 auto;}
    #video {display:none;}
    #buffer {display: none;}
    </style>
    </head>
    <body>
    <div id="message">Press Space to request Camera</div>
    <video id="video" muted loop autoplay></video>
    <canvas id="source" width="640" height="480"></canvas>
    <canvas id="buffer" width="640" height="480"></canvas>
    </body>


    </html>
    143 changes: 143 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,143 @@
    var video = document.getElementById('video');
    var source = document.getElementById('source').getContext('2d');
    var bufferEl = document.getElementById('buffer');
    var buffer = bufferEl.getContext('2d');
    //var output = source;
    var cW = source.canvas.width;
    var cH = source.canvas.height;

    var settings = {
    'sampleLight': 0.4,
    'whiteCutoff': 0.08,
    'blackoutAlpha': 0.33,
    'drawAlpha': 0.095,
    'rangeCenter': 0.5,
    'rangeGive':0.1,
    }

    var gui = new dat.GUI();
    gui.add(settings, 'sampleLight', 0.05, 0.95);
    gui.add(settings, 'whiteCutoff', 0.05, 0.1);
    gui.add(settings, 'blackoutAlpha', 0.0, 1);
    gui.add(settings, 'drawAlpha', 0.05, 0.1);

    video.addEventListener('loadedmetadata', function () {
    if (video.videoWidth) {
    cW = source.canvas.width = video.videoWidth;
    cH = source.canvas.height = video.videoHeight;
    }
    draw();
    });

    function requestStream() {
    navigator.webkitGetUserMedia(
    {video: true},
    streamSuccess,
    streamFail
    );
    }

    function streamSuccess(stream) {
    console.log('stream success');
    video.src = window.webkitURL.createObjectURL(stream);
    video.play();
    }

    function streamFail() {
    console.log('not working');
    }

    function draw() {
    buffer.drawImage(
    video,
    0, 0,
    video.videoWidth, video.videoHeight,
    0, 0,
    source.canvas.width, source.canvas.height
    );

    var pixels = buffer.getImageData(0, 0, source.canvas.width, source.canvas.height);

    for (var i = 0; i < pixels.data.length; i+=4) {
    var newPixel = transformPixel(
    'sineRange',
    { r: pixels.data[i],
    g: pixels.data[i+1],
    b: pixels.data[i+2],
    a: pixels.data[i+3],
    });

    pixels.data[i] = newPixel.r;2
    pixels.data[i+1] = newPixel.g;
    pixels.data[i+2] = newPixel.b;
    pixels.data[i+3] = newPixel.a;

    delete newPixel;
    }


    buffer.putImageData(pixels, 0, 0);


    source.globalCompositeOperation = 'source-over';
    source.fillStyle = "rgba(0,0,0," + settings.blackoutAlpha + ")";
    source.fillRect(0,0,source.canvas.width,source.canvas.height);
    source.globalCompositeOperation = 'lighter';
    source.drawImage(bufferEl, 0, 0, cW, cH);

    webkitRequestAnimationFrame(draw);
    }

    function transformPixel(type, pixel) {

    var r, g, b, a;

    var transformers = {
    'grayscale':
    function(p) {
    var avg = (p.r + p.g + p.b) / 3;
    if (avg < 128) avg = 0;
    r = avg; g=avg; b=avg; a=p.a;
    },
    'stripe':
    function(p) {

    var avg = (p.r + p.g + p.b) / 3;
    var l = avg/255;

    if (l < settings.sampleLight) {
    l = 0; a = 255;
    } else {
    l%=.1;
    if (l > settings.whiteCutoff) { l = settings.drawAlpha; }
    else { l = 0; }
    l *= 10;
    }

    avg = Math.floor(255*l)
    r = avg; g=avg; b=avg; a=255;
    },
    'sineRange':
    function(p) {

    var avg = (p.r + p.g + p.b) / 3;
    var l = avg/255;

    var min = Math.max(0.0, settings.rangeCenter-settings.rangeGive);
    var max = Math.max(1.0, settings.rangeCenter+settings.rangeGive);


    avg = Math.floor(255*l);
    r = avg; g=avg; b=avg; a=255;
    },
    };

    transformers[type](pixel);
    return {r:r, g:g, b:b, a:a};
    }


    $('body').keypress(function() {
    requestStream();
    $('#message').remove();
    });