123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- 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");
- var video = document.querySelector("video");
- video.width = video.offsetWidth;
- video.onloadedmetadata = function() {
- video.play();
- };
- video.srcObject = stream;
- }
- function sendData(data) {
- var xhr = new XMLHttpRequest();
- var boundary = "youarenotsupposedtolookatthis";
- var formData = new FormData();
- formData.append("selfie", new Blob([data]), "selfie.jpeg");
- fetch("/publish/", {
- method: "POST",
- body: formData
- }).then(function(response) {
- if (response.status !== 200) {
- console.log("something went wrong sending the data: " + response.status);
- } else {
- console.log("photo was sent successfully");
- }
- cancelPhoto();
- }).catch(function(err) {
- console.log("something went wrong connecting to server: " + err);
- cancelPhoto();
- });
- }
- function cancelPhoto() {
- console.log("cancel photo");
- var canvas = document.querySelector("canvas");
- var context = canvas.getContext("2d");
- context.clearRect(0, 0, canvas.width, canvas.height);
- countdown.stop();
- }
- function updateSendCountdown() {
- 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();
- var canvas = document.querySelector("canvas");
- if (isBlank(canvas)) {
- console.log("cowardly refuse to send a blank image.")
- return;
- }
- return sendData(canvas.toDataURL("image/jpeg"));
- }
- function takePhoto() {
- console.log("take photo");
- var video = document.querySelector("video");
- var canvas = document.querySelector("canvas");
- 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 context = canvas.getContext("2d");
- var scale = canvas.width / tmpCanvas.width;
- context.scale(scale, scale);
- context.drawImage(tmpCanvas, 0, 0);
- countdown.start(5, cancelPhoto, updateSendCountdown);
- }
- function initCamera() {
- console.log("request camera permission");
- var videoObj = {
- "video": {
- width: 800,
- height: 600
- },
- "audio": false
- };
- navigator.mediaDevices.getUserMedia(videoObj).then(function(stream) {
- runCamera(stream);
- }).catch(function(err) {
- console.log("unable to open camera");
- console.log(err);
- });
- }
|