webcam_notebook

gistfile1.txt

import base64
import cStringIO
import cv2
import numpy as np

from IPython.display import HTML
from PIL import Image


vis = False
def classify(img):
    img = img[len('data:image/png;base64,'):].decode('base64')
    img_file = tempfile.NamedTemporaryFile()
    img_file.write(img)
    img_file.flush()
    img_array = cv2.imread(img_file.name)
    result = demo_net(predictor, img_array, vis)
    result = result[...,::-1]
    r_img = Image.fromarray(result)
    buffer = cStringIO.StringIO()
    r_img.save(buffer, format="JPEG")
    img_str = base64.b64encode(buffer.getvalue())
    return img_str
    
HTML(data=''' 
<style>
#container {
    margin: 0px auto;
    width: 250px;
    height: 250px;
    border: 10px #333 solid;
}
#videoElement {
    width: 250px;
    height: 250px;
    background-color: #666;
}
</style>
<input type=button value="Capture Image" onClick="take_snapshot()">

<video autoplay="true" id="videoElement"></video>
<canvas id="c" style="display:none;" width="300" height="300"></canvas>
<canvas id="display" width="300" height="300"></canvas>


<script>

var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
 
if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}
 
function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}
 
function videoError(e) {
    // do something
}


function handle_output(out) {
    console.log("done classifying", out);
    // display image
    var ctx = $("#display")[0].getContext("2d"),
    img = new Image();
    
    img.onload = function(){
        ctx.drawImage(img, 0, 0, 300, 300);
        $("span").text("Loaded.");
    };
    //img.src = "output.jpg";
    output = 'data:image/png;base64,' +  out.content.data["text/plain"].replace(/'/g, "");   
    img.src = output;
    //console.log("done classifying", out.content.data["text/plain"]);
}

function take_snapshot() {
    var canvas = document.getElementById('c');
    var kernel = IPython.notebook.kernel;
    canvas.getContext("2d").drawImage(video, 0, 0, 300, 300);

    data = canvas.toDataURL('image/png');
    console.log("captured data");
    kernel.execute("classify('" + data + "')", {
        'iopub': {
            'output': handle_output
        }
    }, {
        silent: false
    });
}
</script>

''')