2018-11-28 21:55:54 +01:00
|
|
|
var countdown = {
|
|
|
|
_timeout: null,
|
|
|
|
_stepCb: null,
|
|
|
|
_timeoutCb: null,
|
|
|
|
running: false,
|
|
|
|
seconds: 5,
|
|
|
|
_initial_seconds: 5,
|
|
|
|
|
|
|
|
start: function(seconds, timeoutCb, stepCb) {
|
|
|
|
countdown.stop();
|
|
|
|
countdown.seconds = countdown._initial_seconds = seconds || 5;
|
|
|
|
countdown._timeoutCb = timeoutCb || countdown._timeoutCb;
|
|
|
|
countdown._stepCb = stepCb || countdown._stepCb;
|
|
|
|
countdown.running = true;
|
|
|
|
countdown._step();
|
|
|
|
},
|
|
|
|
|
|
|
|
stop: function() {
|
|
|
|
if (countdown._timeout) {
|
|
|
|
window.clearTimeout(countdown._timeout);
|
|
|
|
}
|
|
|
|
countdown.running = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
restart: function() {
|
|
|
|
countdown.start(countdown._initial_seconds);
|
|
|
|
},
|
|
|
|
|
|
|
|
_step: function() {
|
|
|
|
if (countdown._stepCb) {
|
|
|
|
countdown._stepCb();
|
|
|
|
}
|
|
|
|
if (countdown.seconds === 0) {
|
|
|
|
if (countdown._timeoutCb) {
|
|
|
|
countdown._timeoutCb();
|
|
|
|
}
|
|
|
|
countdown.stop();
|
|
|
|
} else {
|
|
|
|
countdown._decrement();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_decrement: function() {
|
|
|
|
countdown.seconds = countdown.seconds - 1;
|
|
|
|
countdown._timeout = window.setTimeout(function() {
|
|
|
|
countdown._step();
|
|
|
|
}, 1000);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
function runCamera(stream) {
|
|
|
|
console.log("initialize the camera");
|
2018-12-01 11:18:30 +01:00
|
|
|
var video = document.querySelector("#sb-video");
|
2018-12-01 11:59:20 +01:00
|
|
|
var container = document.querySelector("#canvas-container");
|
|
|
|
container.width = video.videoWidth;
|
2018-11-28 21:55:54 +01:00
|
|
|
video.onloadedmetadata = function() {
|
|
|
|
video.play();
|
|
|
|
};
|
|
|
|
video.srcObject = stream;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function sendData(data) {
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
var boundary = "youarenotsupposedtolookatthis";
|
|
|
|
var formData = new FormData();
|
2018-12-01 11:18:30 +01:00
|
|
|
var msg = "";
|
2018-11-28 21:55:54 +01:00
|
|
|
formData.append("selfie", new Blob([data]), "selfie.jpeg");
|
|
|
|
fetch("/publish/", {
|
|
|
|
method: "POST",
|
|
|
|
body: formData
|
|
|
|
}).then(function(response) {
|
|
|
|
if (response.status !== 200) {
|
2018-12-01 11:18:30 +01:00
|
|
|
msg = "something went wrong sending the data: " + response.status;
|
|
|
|
console.log(msg);
|
|
|
|
M.toast({"html": msg});
|
2018-11-28 21:55:54 +01:00
|
|
|
} else {
|
2018-12-01 11:18:30 +01:00
|
|
|
msg = "photo was sent successfully!";
|
|
|
|
console.log(msg);
|
|
|
|
M.toast({"html": msg});
|
2018-11-28 21:55:54 +01:00
|
|
|
}
|
|
|
|
cancelPhoto();
|
|
|
|
}).catch(function(err) {
|
2018-12-01 11:18:30 +01:00
|
|
|
msg = "something went wrong connecting to server: " + err;
|
|
|
|
console.log(msg);
|
|
|
|
M.toast({"html": msg});
|
2018-11-28 21:55:54 +01:00
|
|
|
cancelPhoto();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function cancelPhoto() {
|
|
|
|
console.log("cancel photo");
|
2018-12-01 11:18:30 +01:00
|
|
|
document.querySelector("#sb-message").style.visibility = "hidden";
|
|
|
|
document.querySelector("#send-photo-btn").classList.add("disabled");
|
|
|
|
document.querySelector("#cancel-photo-btn").classList.add("disabled");
|
|
|
|
var canvas = document.querySelector("#sb-canvas");
|
2018-11-28 21:55:54 +01:00
|
|
|
var context = canvas.getContext("2d");
|
|
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
countdown.stop();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function updateSendCountdown() {
|
2018-12-12 20:57:29 +01:00
|
|
|
document.querySelector("#sb-countdown").innerText = "" + countdown.seconds;
|
2018-11-28 21:55:54 +01:00
|
|
|
console.log("deleting photo in " + countdown.seconds + " seconds");
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function isBlank(canvas) {
|
|
|
|
var blank = document.createElement("canvas");
|
|
|
|
blank.width = canvas.width;
|
|
|
|
blank.height = canvas.height;
|
|
|
|
return canvas.toDataURL() == blank.toDataURL();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function sendPhoto() {
|
|
|
|
console.log("send photo");
|
|
|
|
countdown.stop();
|
2018-12-01 11:18:30 +01:00
|
|
|
document.querySelector("#sb-message").style.visibility = "hidden";
|
|
|
|
var canvas = document.querySelector("#sb-canvas");
|
2018-11-28 21:55:54 +01:00
|
|
|
if (isBlank(canvas)) {
|
2018-12-01 11:18:30 +01:00
|
|
|
var msg = "I cowardly refuse to send a blank image.";
|
|
|
|
console.log(msg)
|
|
|
|
M.toast({"html": msg});
|
2018-11-28 21:55:54 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
return sendData(canvas.toDataURL("image/jpeg"));
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function takePhoto() {
|
|
|
|
console.log("take photo");
|
2018-12-01 11:18:30 +01:00
|
|
|
document.querySelector("#sb-message").style.visibility = "visible";
|
|
|
|
var video = document.querySelector("#sb-video");
|
|
|
|
var canvas = document.querySelector("#sb-canvas");
|
2018-12-01 11:59:20 +01:00
|
|
|
var context = canvas.getContext("2d");
|
|
|
|
canvas.width = video.offsetWidth;
|
|
|
|
canvas.height = video.offsetHeight;
|
|
|
|
|
|
|
|
/*
|
2018-11-28 21:55:54 +01:00
|
|
|
var tmpCanvas = document.createElement("canvas");
|
|
|
|
tmpCanvas.width = video.offsetWidth;
|
|
|
|
tmpCanvas.height = video.offsetHeight;
|
|
|
|
|
|
|
|
var tmpContext = tmpCanvas.getContext("2d");
|
|
|
|
var tmpRatio = (tmpCanvas.height / tmpCanvas.width);
|
|
|
|
tmpContext.drawImage(video, 0, 0, video.offsetWidth, video.offsetHeight);
|
|
|
|
|
|
|
|
canvas.width = canvas.offsetWidth;
|
|
|
|
canvas.height = canvas.offsetHeight;
|
|
|
|
canvas.style.height = parseInt(canvas.offsetWidth * tmpRatio);
|
|
|
|
var scale = canvas.width / tmpCanvas.width;
|
|
|
|
context.scale(scale, scale);
|
|
|
|
context.drawImage(tmpCanvas, 0, 0);
|
2018-12-01 11:59:20 +01:00
|
|
|
*/
|
|
|
|
context.drawImage(video, 0, 0, video.offsetWidth, video.offsetHeight);
|
2018-12-01 11:18:30 +01:00
|
|
|
document.querySelector("#send-photo-btn").classList.remove("disabled");
|
|
|
|
document.querySelector("#cancel-photo-btn").classList.remove("disabled");
|
2018-11-28 21:55:54 +01:00
|
|
|
countdown.start(5, cancelPhoto, updateSendCountdown);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function initCamera() {
|
|
|
|
console.log("request camera permission");
|
2018-12-01 11:18:30 +01:00
|
|
|
document.querySelector("#canvas-container").style.display = "block";
|
2018-11-28 21:55:54 +01:00
|
|
|
var videoObj = {
|
|
|
|
"video": {
|
|
|
|
width: 800,
|
|
|
|
height: 600
|
|
|
|
},
|
|
|
|
"audio": false
|
|
|
|
};
|
|
|
|
|
|
|
|
navigator.mediaDevices.getUserMedia(videoObj).then(function(stream) {
|
|
|
|
runCamera(stream);
|
2018-12-01 11:18:30 +01:00
|
|
|
document.querySelector("#init-btn").style.display = "none";
|
|
|
|
document.querySelector("#take-photo-btn").classList.remove("disabled");
|
2018-11-28 21:55:54 +01:00
|
|
|
}).catch(function(err) {
|
|
|
|
console.log("unable to open camera");
|
|
|
|
console.log(err);
|
2018-12-01 11:18:30 +01:00
|
|
|
M.toast({"html": "unable to open camera; please reload this page: " + err});
|
2018-11-28 21:55:54 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|