123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 |
- var DEFAULT_DELAY = 7;
- var Countdown = {
- _timeout: null,
- _stepCb: null,
- _timeoutCb: null,
- running: false,
- seconds: DEFAULT_DELAY,
- _initial_seconds: DEFAULT_DELAY,
- start: function(seconds, timeoutCb, stepCb) {
- Countdown.stop();
- Countdown.seconds = Countdown._initial_seconds = seconds || DEFAULT_DELAY;
- 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 uuidv4() {
- return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
- (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
- );
- }
- var UUID = uuidv4();
- function getWSPath() {
- var loc = window.location, new_uri;
- if (loc.protocol === "https:") {
- new_uri = "wss:";
- } else {
- new_uri = "ws:";
- }
- new_uri += "//" + loc.host + "/ws?uuid=" + UUID;
- return new_uri;
- }
- var WS = new WebSocket(getWSPath());
- WS.onerror = function(error) {
- console.log('WebSocket Error ' + error);
- };
- WS.onmessage = function(e) {
- console.log("received message on websocket: " + e.data);
- var jdata = JSON.parse(e.data);
- if (!(jdata && jdata.source == "button" && jdata.action == "clicked")) {
- return;
- }
- if (!Countdown.running) {
- takePhoto("press again to publish!");
- } else {
- sendPhoto();
- }
- };
- function runCamera(stream) {
- console.log("initialize the camera");
- var video = document.querySelector("#sb-video");
- var container = document.querySelector("#canvas-container");
- container.width = video.videoWidth;
- video.onloadedmetadata = function() {
- video.play();
- };
- video.srcObject = stream;
- resizeCanvas(video, 'sb-canvas');
- }
- function sendData(data) {
- var formData = new FormData();
- var msg = "";
- formData.append("selfie", new Blob([data]), "selfie.jpeg");
- fetch("/publish/", {
- method: "POST",
- body: formData
- }).then(function(response) {
- if (response.status !== 200) {
- msg = response.status;
- console.log(msg);
- iziToast.error({
- "title": "😭 something wrong sending the data 😭",
- "message": msg,
- "titleSize": "3em",
- "messageSize": "2em",
- "close": false,
- "drag": false,
- "pauseOnHover": false,
- "position": "topCenter"
- });
- }
- cancelPhoto();
- return response.json();
- }).then(function(json) {
- json = json || {};
- console.log(json);
- if (json && json.success) {
- msg = "❤ ❤ ❤ photo sent successfully! ❤ ❤ ❤";
- console.log(msg);
- iziToast.destroy();
- iziToast.success({
- "title": msg,
- "titleSize": "3em",
- "messageSize": "2em",
- "close": false,
- "drag": false,
- "pauseOnHover": false,
- "position": "topCenter"
- });
- } else {
- msg = json.message;
- console.log(msg);
- iziToast.error({
- "title": "😭 backend error 😭",
- "message": msg,
- "titleSize": "3em",
- "messageSize": "2em",
- "close": false,
- "drag": false,
- "pauseOnHover": false,
- "position": "topCenter"
- });
- }
- }).catch(function(err) {
- console.log(msg);
- iziToast.error({
- "title": "😭 error connecting to the server 😭",
- "message": err,
- "titleSize": "3em",
- "messageSize": "2em",
- "close": false,
- "drag": false,
- "pauseOnHover": false,
- "position": "topCenter"
- });
- cancelPhoto();
- });
- }
- function cancelPhoto() {
- console.log("cancel photo");
- document.querySelector("#send-photo-btn").classList.add("disabled");
- document.querySelector("#cancel-photo-btn").classList.add("disabled");
- var canvas = document.querySelector("#sb-canvas");
- var context = canvas.getContext("2d");
- context.clearRect(0, 0, canvas.width, canvas.height);
- Countdown.stop();
- }
- 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("#sb-canvas");
- if (!canvas || isBlank(canvas)) {
- var msg = "I cowardly refuse to send a blank image.";
- console.log(msg);
- iziToast.warning({
- "title": msg,
- "titleSize": "3em",
- "messageSize": "2em",
- "close": false,
- "drag": false,
- "pauseOnHover": false,
- "position": "topCenter"
- });
- return;
- }
- return sendData(canvas.toDataURL("image/jpeg"));
- }
- function _takePhoto(message) {
- console.log("take photo");
- var video = document.querySelector("#sb-video");
- if (!(video.offsetWidth && video.offsetHeight)) {
- var msg = "missing video";
- console.log(msg);
- iziToast.warning({
- "title": msg,
- "message": "please grant camera permissions",
- "titleSize": "3em",
- "messageSize": "2em",
- "close": false,
- "drag": false,
- "pauseOnHover": false,
- "position": "topCenter"
- });
- return;
- }
- var canvas = document.querySelector("#sb-canvas");
- var context = canvas.getContext("2d");
- canvas.width = video.offsetWidth;
- canvas.height = video.offsetHeight;
-
- /*
- 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);
- */
- context.drawImage(video, 0, 0, video.offsetWidth, video.offsetHeight);
- document.querySelector("#send-photo-btn").classList.remove("disabled");
- document.querySelector("#cancel-photo-btn").classList.remove("disabled");
- iziToast.question({
- "title": "do you like what you see?",
- "message": message || "press \"share photo\" to publish!",
- "titleSize": "3em",
- "messageSize": "2em",
- "close": false,
- "drag": false,
- "pauseOnHover": false,
- "position": "topCenter"
- });
- Countdown.start(5, cancelPhoto);
- }
- function takePhoto(msg) {
- window.setTimeout(function() { _takePhoto(msg); }, 1000);
- }
- function initCamera() {
- console.log("request camera permission");
- document.querySelector("#canvas-container").style.display = "block";
- var videoObj = {
- "video": {
- width: 800,
- height: 600
- },
- "audio": false
- };
- navigator.mediaDevices.getUserMedia(videoObj).then(function(stream) {
- runCamera(stream);
- document.querySelector("#init-btn").style.display = "none";
- document.querySelector("#take-photo-btn").classList.remove("disabled");
- }).catch(function(err) {
- console.log("unable to open camera");
- console.log(err);
- iziToast.error({
- "title": "unable to open camera",
- "message": "please reload this page: " + err,
- "titleSize": "3em",
- "messageSize": "2em",
- "close": false,
- "drag": false,
- "pauseOnHover": false,
- "position": "topCenter"
- });
- });
- }
- function resizeCanvas(el, canvasID) {
- var canvas = document.getElementById(canvasID);
- canvas.width = el.offsetWidth;
- canvas.height = el.offsetHeighth;
- }
|