301 lines
9.2 KiB
JavaScript
301 lines
9.2 KiB
JavaScript
|
|
$(document).ready(function(){
|
|
|
|
var binary_level = 100
|
|
var url = document.location.origin
|
|
var cropper = null
|
|
var snap = null
|
|
var width;
|
|
var height;
|
|
|
|
// 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)
|
|
};
|
|
|
|
/**
|
|
Take a new snapshot from the camera and store it
|
|
**/
|
|
function doSnap(){
|
|
cropper && cropper.destroy()
|
|
context.drawImage(video, 0, 0, width, height);
|
|
snap = context.createImageData(width, height);
|
|
snap.data.set( context.getImageData(0, 0, width, height).data )
|
|
binary(context)
|
|
$("#result").show()
|
|
//$('html, body').animate({scrollTop: $("#result").offset().top}, 2000);
|
|
|
|
cropper = new Cropper(canvas,{
|
|
viewMode: 3,
|
|
autoCropArea: 1
|
|
});
|
|
}
|
|
|
|
function doContrast(){
|
|
cropper && cropper.destroy()
|
|
context.putImageData(snap,0,0)
|
|
binary(context)
|
|
cropper = new Cropper(canvas,{
|
|
viewMode: 3,
|
|
autoCropArea: 1
|
|
});
|
|
}
|
|
|
|
// https://raw.githubusercontent.com/samdutton/simpl/gh-pages/getusermedia/sources/js/main.js
|
|
|
|
var videoElement = document.querySelector('video');
|
|
var videoSelect = document.querySelector('select#videoSource');
|
|
videoSelect.onchange = getStream;
|
|
getStream().then(getDevices).then(gotDevices);
|
|
|
|
function getDevices() {
|
|
// AFAICT in Safari this only gets default devices until gUM is called :/
|
|
return navigator.mediaDevices.enumerateDevices();
|
|
}
|
|
|
|
function gotDevices(deviceInfos) {
|
|
window.deviceInfos = deviceInfos; // make available to console
|
|
for (const deviceInfo of deviceInfos) {
|
|
const option = document.createElement('option');
|
|
option.value = deviceInfo.deviceId;
|
|
option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`;
|
|
videoSelect.appendChild(option);
|
|
}
|
|
}
|
|
|
|
|
|
function getStream() {
|
|
if (window.stream) {
|
|
window.stream.getTracks().forEach(track => {
|
|
track.stop();
|
|
});
|
|
}
|
|
const videoSource = videoSelect.value;
|
|
const constraints = {
|
|
video: {deviceId: videoSource ? {exact: videoSource} : undefined}
|
|
};
|
|
return navigator.mediaDevices.getUserMedia(constraints).
|
|
then(gotStream).catch(handleError);
|
|
}
|
|
|
|
function gotStream(stream) {
|
|
window.stream = stream; // make stream available to console
|
|
videoSelect.selectedIndex = [...videoSelect.options].
|
|
findIndex(option => option.text === stream.getVideoTracks()[0].label);
|
|
videoElement.srcObject = stream;
|
|
}
|
|
|
|
function handleError(error) {
|
|
console.error('Error: ', error);
|
|
}
|
|
// https://raw.githubusercontent.com/samdutton/simpl/gh-pages/getusermedia/sources/js/main.js
|
|
function setCameraResolution( track ){
|
|
width = track.getSettings().width
|
|
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() {
|
|
doSnap()
|
|
});
|
|
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<channels;i++){
|
|
var r = image.data[i*4 + 0];
|
|
var g = image.data[i*4 + 1];
|
|
var b = image.data[i*4 + 2];
|
|
if( r>= 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
|
|
doContrast()
|
|
}
|
|
});
|
|
$("#send").on("click",function(){
|
|
var cropCanvas = cropper.getCroppedCanvas();
|
|
image_data = cropCanvas.toDataURL();
|
|
$("#messages").html('<div class="alert alert-primary" role="alert">Sending...</div>')
|
|
|
|
$.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(`<div class="alert alert-danger" role="alert">Something went wrong: ${msg}</div>`)
|
|
return
|
|
}
|
|
$("#messages").html(`<div class="alert alert-success" role="alert">OK, your image will be on ${d.hash_name}</div>`)
|
|
imageList = localStorage.getItem("imageList") ? JSON.parse(localStorage.getItem("imageList")) : []
|
|
imageList.push(d.hash_name)
|
|
localStorage.setItem("imageList",JSON.stringify(imageList))
|
|
refreshImageList()
|
|
})
|
|
.fail(function(d,m,jq){
|
|
$("#messages").html(`<div class="alert alert-danger" role="alert">Ooops... Something went wrong: ${jq}</div>`)
|
|
|
|
})
|
|
})
|
|
|
|
|
|
var simuCanvas = document.getElementById("simuCanvas");
|
|
var ctx = simuCanvas.getContext("2d");
|
|
var lastpoint = { x: 0, y: 0, color: 0};
|
|
ctx.clearRect(0,0,400,400);
|
|
var zoom = 0.5;
|
|
//ctx.save
|
|
|
|
Point = function( l ){
|
|
return {
|
|
"x" : l[0],
|
|
"y" : l[1],
|
|
"color" : l[2]
|
|
}
|
|
}
|
|
|
|
// Draws every segment received, except black colored target ones
|
|
var drawSimu = function() {
|
|
pointsList = document.pointsList
|
|
if (pointsList.length > 0)
|
|
{
|
|
ctx.clearRect(0,0,400,400);
|
|
lastpoint = new Point(pointsList[0])
|
|
for (var i = 0; i < pointsList.length; i+=1)
|
|
{
|
|
point = new Point(pointsList[i])
|
|
// if the target is black, skip drawing
|
|
if( point.color != 0){
|
|
ctx.beginPath()
|
|
ctx.shadowBlur = 5;
|
|
ctx.shadowColor = 'rgba(255, 255, 255, 1)';
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeStyle = "#"+(point.color + Math.pow(16, 6)).toString(16).slice(-6);
|
|
ctx.moveTo(lastpoint.x * zoom, lastpoint.y * zoom);
|
|
ctx.lineTo(point.x * zoom, point.y * zoom);
|
|
ctx.stroke();
|
|
ctx.closePath()
|
|
}
|
|
lastpoint = point
|
|
}
|
|
}
|
|
}
|
|
function refreshImageList(){
|
|
var imageList = localStorage.getItem("imageList") ? JSON.parse(localStorage.getItem("imageList")) : []
|
|
|
|
if( 0 == imageList.length){
|
|
$("#preview").hide()
|
|
return
|
|
}
|
|
$("#preview").show()
|
|
|
|
html = ''
|
|
for( id in imageList){
|
|
hash_name = imageList[id]
|
|
html += `<li><a href="#${hash_name}" class="hash_name" rel="${hash_name}">${hash_name}</a></li>`
|
|
}
|
|
$("#imageList").html(`<ul>${html}</ul>`)
|
|
|
|
}
|
|
refreshImageList()
|
|
|
|
$("#imageList").on("click",function(e){
|
|
var el = e.target
|
|
var hash_name = $(el).attr("rel")
|
|
var u = `${url}/hash_name/${hash_name}`
|
|
$.ajax({
|
|
url: `${url}/hash_name/${hash_name}`,
|
|
dataType: "json",
|
|
|
|
}).done(function(d,m,j){
|
|
if( d.errors ){
|
|
msg = d.errors.join(" / ")
|
|
$("#messages").html(`<div class="alert alert-danger" role="alert">Something went wrong: ${msg}</div>`)
|
|
return
|
|
}
|
|
$("#messages").html("")
|
|
document.pointsList = d.points_list
|
|
drawSimu()
|
|
})
|
|
.fail(function(d,m,jq){
|
|
$("#messages").html(`<div class="alert alert-danger" role="alert">Ooops... Something went wrong: ${jq}</div>`)
|
|
})
|
|
})
|
|
|
|
|
|
|
|
})
|