from IPython.html.widgets import DOMWidget
from IPython.utils.traitlets import Unicode, Bytes, Instance
from IPython.display import display

import base64
from PIL import Image
import StringIO
from numpy import array, ndarray

class Camera(DOMWidget):
    _view_name = Unicode('CameraView', sync=True)
    imageurl = Unicode('', sync=True)
    image = Instance(ndarray)

    def _imageurl_changed(self, name, new):
        head, data = new.split(',', 1)
        im = Image.open(StringIO.StringIO(base64.b64decode(data)))
        self.image = array(im)

%%javascript

require(["widgets/js/widget"], function(WidgetManager){
    var CameraView = IPython.DOMWidgetView.extend({
        render: function(){
            // based on https://developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos
            var video        = $('<video>')[0];
            var canvas       = $('<canvas>')[0];
            var startbutton  = $('<button>Take Pic</button>')[0];
            var width = 320;
            var height = 0;
            var that = this;

            setTimeout(function() {that.$el.append(video).append(startbutton).append(canvas);}, 200);
            //$(canvas).hide();
            //window.vvv=video;
            var streaming = false;
            navigator.getMedia = ( navigator.getUserMedia ||
                                 navigator.webkitGetUserMedia ||
                                 navigator.mozGetUserMedia ||
                                 navigator.msGetUserMedia);

            navigator.getMedia({video: true, audio: false},
                function(stream) {
                  if (navigator.mozGetUserMedia) {
                    video.mozSrcObject = stream;
                  } else {
                    var vendorURL = window.URL || window.webkitURL;
                    video.src = vendorURL.createObjectURL(stream);
                  }
                  video.play();
                },
                function(err) {
                  console.log("An error occured! " + err);
                }
            );

            video.addEventListener('canplay', function(ev){
                if (!streaming) {
                  height = video.videoHeight / (video.videoWidth/width);
                  video.setAttribute('width', width);
                  video.setAttribute('height', height);
                  canvas.setAttribute('width', width);
                  canvas.setAttribute('height', height);
                  streaming = true;
                }
            }, false);
            function takepicture() {
                canvas.width = width;
                canvas.height = height;
                video.pause();
                $(video).fadeTo(1,0).delay(100).fadeTo(1,100);
                setTimeout(function() {video.play()}, 3000);
                canvas.getContext('2d').drawImage(video, 0, 0, width, height);
                that.model.set('imageurl',canvas.toDataURL('image/png'));
                that.touch();
            }
            startbutton.addEventListener('click', function(ev){
                takepicture();
                ev.preventDefault();
            }, false);
        },
    });
    
    // Register the DatePickerView with the widget manager.
    WidgetManager.register_widget_view('CameraView', CameraView);

});


c=Camera()
display(c)

%matplotlib inline
from skimage import io, filter, color
io.imshow(filter.roberts(color.rgb2gray(c.image)))