$(document).ready(function(){ var binary_level = 100 var url = document.URL // Grab elements, create settings, etc. var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var video = document.getElementById('video'); var mediaConfig = { video: true }; var errBack = function(e) { console.log('An error has occurred!', e) }; function snap(){ context.drawImage(video, 0, 0, 640, 480); binary(context) $("#result").show() $('html, body').animate({scrollTop: $("#result").offset().top}, 2000); } function setCameraResolution( track ){ var width = track.getSettings().width var height = track.getSettings().height $("#video").attr("width",width) $("#video").attr("height",height) $("#canvas").attr("width",width) $("#canvas").attr("height",height) } // Put video listeners into place if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) { //video.src = window.URL.createObjectURL(stream); video.srcObject = stream; setCameraResolution(stream.getVideoTracks()[0]) video.play(); }); } /* Legacy code below! */ else if(navigator.getUserMedia) { // Standard navigator.getUserMedia(mediaConfig, function(stream) { setCameraResolution(stream.getVideoTracks()[0]) video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(mediaConfig, function(stream){ setCameraResolution(stream.getVideoTracks()[0]) video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed navigator.mozGetUserMedia(mediaConfig, function(stream){ setCameraResolution(stream.getVideoTracks()[0]) video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } // Trigger photo take $('.snap').on('click', function() { snap() }); function binary(context){ /* To convert image into binary , we will threshold it. Based upon the threshold value thresh_red, thresh_blue, thresh_green ==> are the respective red, blue and green color threshold values. Any thing above this threshold value will be denoted by white color and anything below will be black */ var image = context.getImageData(0, 0, context.canvas.width, context.canvas.height); var thresh_red = binary_level; var thresh_green = binary_level; var thresh_blue = binary_level; var channels = image.data.length/4; for(var i=0;i= thresh_red && g>= thresh_green && b>=thresh_blue ){ image.data[i*4 + 0] = 255; image.data[i*4 + 1] = 255; image.data[i*4 + 2] = 255; }else{ image.data[i*4 + 0] = 0; image.data[i*4 + 1] = 0; image.data[i*4 + 2] = 0; } } context.putImageData(image, 0, 0); } $("#result").hide() $( "#slider" ).slider({ range: false, values: [ binary_level ], min : 0, max : 255, change: function(event,ui){ binary_level = ui.value snap() } }); $("#send").on("click",function(){ var canvas = document.getElementById('canvas'); image_data = canvas.toDataURL(); $("#messages").html('') $.ajax({ url: url + "/image", method:"POST", dataType: "json", data:{ image_data : image_data, text : $("#text").val() }, }).done(function(d,m,j){ if( d.errors ){ msg = d.errors.join(" / ") $("#messages").html(``) return } $("#messages").html(``) imageList = localStorage.getItem("imageList") ? JSON.parse(localStorage.getItem("imageList")) : [] imageList.push(d.hash_name) localStorage.setItem("imageList",JSON.stringify(imageList)) }) .fail(function(d,m,jq){ $("#messages").html(``) }) }) })