Free javascript Hosting


wcam-sept-28.js

Uploaded on Sep 28 2021 22:34 by ayushmainali11

// Configure a few settings and attach camera
console.log("From WCAM")


//Landscape
if (screen.width > screen.height) {
Webcam.set({
width: 640 / 1.5,
height: 480 / 1.5,
image_format: "jpeg",
jpeg_quality: 90,
flip_horiz: true,

});
}

//Potrait
else {

if (screen.width > 480) {
Webcam.set({
width: 480,
height: 550,
image_format: "jpeg",
jpeg_quality: 90,
flip_horiz: true,
});
}
else {
Webcam.set({
width: 320,
height: 450,
image_format: "jpeg",
jpeg_quality: 90,
flip_horiz: true,
});
}

}



Webcam.attach("#my_camera");

// preload shutter audio clip
var shutter = new Audio();
// shutter.autoplay = true;
shutter.src = navigator.userAgent.match(/Firefox/)
? "https://bweventsllc.com/servicenow/photobooth/bwSnapBar/shutter.ogg"
: "https://bweventsllc.com/servicenow/photobooth/bwSnapBar/shutter.mp3";

function take_snapshot() {
// play sound effect
shutter.play();

$("#photo").modal("show");

function DataURIToBlob(dataURI) {
const splitDataURI = dataURI.split(",");
const byteString =
splitDataURI[0].indexOf("base64") >= 0
? atob(splitDataURI[1])
: decodeURI(splitDataURI[1]);
const mimeString = splitDataURI[0].split(":")[1].split(";")[0];

const ia = new Uint8Array(byteString.length);
for (let i = 0; i < byteString.length; i++)
ia[i] = byteString.charCodeAt(i);

return new Blob([ia], { type: mimeString });
}

// take snapshot and get image data
Webcam.snap(function (data_uri) {
// display results in page
document.getElementById("results").innerHTML =
'<img class="img-fluid w-100" src="' + data_uri + '"/>';

//-----------------------------------------
document.getElementById("submit-with-background").onclick = function () {
// location.href = "pedit.html";

// Custom Starts
// height, url, width
$(".discription").fadeOut();
$(".choice-section").fadeOut("normal", function () {
$(".edit-section").removeClass("d-none").hide().fadeIn();
$(".fabric-canvas-wrapper").append(
`<canvas id="meme-canvas"></canvas>`
);

//------------------------------------------

let myHeaders = new Headers();
myHeaders.append(
"Authorization",
"Basic c25hcGJhckBhZG1pbi5jb206c25AUEJhcg=="
);
// myHeaders.append("Content-Type", "multipart/form-data");
myHeaders.append(
"Cookie",
"JSESSIONID=B14E298F191B3BFC99BB632A06C688AC"
);
const file = DataURIToBlob(data_uri);
var formdata = new FormData();
formdata.append("image", data_uri);
formdata.append("image", file, "image.png");
// formdata.append("originalImageId", null)
let requestOptions = {
method: "POST",
headers: myHeaders,
body: formdata,
redirect: "follow",
};
document.querySelector(".overlay-bg").classList.remove("hide");

// Blob if the image is taken from webcam
console.log(file);
fetch(
`https://snapbarevent.herokuapp.com/api/v1/events/${eventId}/persons/SOCPerson/images?shoutOut=true`,
requestOptions
)
.then((res) => {
if (res.status >= 400) {
throw new Error()
}
return res.json()
})
.then((res) => {
// --------------

//-------------------------
// Reset Webcam
Webcam.reset();

const successColor = "#5cb85c";
document.querySelector(".overlay-bg").classList.add("hide");
Toastify({
text:
"Successfully Fetched Image! Please wait until image is loading in canvas..",
backgroundColor: successColor,
gravity: "top",
position: "right",
stopOnFocus: true,
}).showToast();

processMeme({
height: "1200",
url: res.url,
width: "1200",
originalImageId: res.originalImageId,
imageId: res.imageId,
});

localStorage.setItem("memeInfo", JSON.stringify({
height: "1200",
url: res.url,
width: "1200",
originalImageId: res.originalImageId,
imageId: res.imageId,
}));
})
.catch((err) => {
const errorColor = "#d9534f";
Toastify({
text: "Error fetching image!!",
backgroundColor: errorColor,
gravity: "top",
position: "right",
stopOnFocus: true,
}).showToast();
document.querySelector(".overlay-bg").classList.add("hide");
console.log(err);
setTimeout(() => {
location.href = "pedit.html";
}, 1500);
});
$("#photo").modal("hide");
});
};



document.getElementById("submit-without-background").onclick = function () {
// location.href = "pedit.html";

// Custom Starts
// height, url, width
$(".discription").fadeOut();
$(".choice-section").fadeOut("normal", function () {
$(".edit-section").removeClass("d-none").hide().fadeIn();
$(".fabric-canvas-wrapper").append(
`<canvas id="meme-canvas"></canvas>`
);

//------------------------------------------

let myHeaders = new Headers();
myHeaders.append(
"Authorization",
"Basic c25hcGJhckBhZG1pbi5jb206c25AUEJhcg=="
);
// myHeaders.append("Content-Type", "multipart/form-data");
myHeaders.append(
"Cookie",
"JSESSIONID=B14E298F191B3BFC99BB632A06C688AC"
);
const file = DataURIToBlob(data_uri);
var formdata = new FormData();
formdata.append("image", data_uri);
formdata.append("image", file, "image.png");
// formdata.append("originalImageId", null)
let requestOptions = {
method: "POST",
headers: myHeaders,
body: formdata,
redirect: "follow",
};
document.querySelector(".overlay-bg").classList.remove("hide");

// Blob if the image is taken from webcam
console.log(file);
fetch(
`https://snapbarevent.herokuapp.com/api/v1/events/${eventId}/persons/SOCPerson/images?shoutOut=false`,
requestOptions
)
.then((res) => {
if (res.status >= 400) {
throw new Error()
}
return res.json()
})
.then((res) => {
// --------------

//-------------------------
// Reset Webcam
Webcam.reset();

const successColor = "#5cb85c";
document.querySelector(".overlay-bg").classList.add("hide");
Toastify({
text:
"Successfully Fetched Image! Please wait until image is loading in canvas..",
backgroundColor: successColor,
gravity: "top",
position: "right",
stopOnFocus: true,
}).showToast();

processMeme({
height: "1200",
url: res.url,
width: "1200",
originalImageId: res.originalImageId,
imageId: res.imageId,
});

localStorage.setItem("memeInfo", JSON.stringify({
height: "1200",
url: res.url,
width: "1200",
originalImageId: res.originalImageId,
imageId: res.imageId,
}));
})
.catch((err) => {
const errorColor = "#d9534f";
Toastify({
text: "Error fetching image!!",
backgroundColor: errorColor,
gravity: "top",
position: "right",
stopOnFocus: true,
}).showToast();
document.querySelector(".overlay-bg").classList.add("hide");
console.log(err);
setTimeout(() => {
location.href = "pedit.html";
}, 1500);
});
$("#photo").modal("hide");
});
};



});
if (ALLOW_CENTERING_PROFILE_IMAGE) {
PLACE_INITIAL_IMAGE_AT_BOTTOM_CENTER = true;
}
}

let SHOW_TIMER = document.querySelector("[data-timer-button]").dataset.showTimer === "true";
document.querySelector("#uploadPhoto").onclick = () => {
console.log(SHOW_TIMER)
if (SHOW_TIMER) {
let timer = TIMER_VALUE;
console.log(timer)
document.querySelector(".timer-overlay").classList.remove("d-none");
document.querySelector(".timer-overlay-text").textContent = timer;
timer--;
const intervalId = setInterval(() => {
console.log({ timer })

if (timer === 0) {
document.querySelector(".timer-overlay").classList.add("d-none");
take_snapshot();
clearInterval(intervalId);
return;
}
else {
document.querySelector(".timer-overlay-text").textContent = timer;
console.log("Hi")
timer--;
}
}, 1000)
return;
}
else {
take_snapshot();
}
}

Back to list