Photobooth - Webcam with realtime CSS filters.

Developer
Johan Karlsson
Size
4,390 Kb
Views
2,024
  1. Photobooth - Webcam with realtime CSS filters. Previews
  2. Photobooth - Webcam with realtime CSS filters. HTML Codes
  3. Photobooth - Webcam with realtime CSS filters. CSS Codes
  4. Photobooth - Webcam with realtime CSS filters. JS Codes

How do I make an photobooth - webcam with realtime css filters.?

Say cheese!Accesses the webcam with getUserMedia(). You can apply different CSS filters to the webcam stream in real time.. What is a photobooth - webcam with realtime css filters.? How do you make a photobooth - webcam with realtime css filters.? This script and codes were developed by Johan Karlsson on 01 February 2023, Wednesday.

Photobooth - Webcam with realtime CSS filters. Previews
IQ Test

Photobooth - Webcam with realtime CSS filters. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Photobooth - Webcam with realtime CSS filters.</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <video id="video" width="320" height="240" class="margin"></video> <canvas id="canvas" width="320" height="240" style="display: none;"></canvas> <div id="stack" class="playground" style="background-color: darkgray;"> </div> <div class="margin"> <p> <div id="filterButtons"></div> </p> <ol type="1"> <li><button id="startButton">Start webcam</button></li> <li><button id="photoButton">Take photo</button></li> <li id="beCreative">Experiment with different filters. Take more photos. Drag them around.</li> </ol> <p> <a href="https://donkarlssonsan.github.io/Ost/">The GitHub hosted version</a> lets you post the photo collage to Facebook! </p> </div> <script src="js/index.js"></script>
</body>
</html>

Photobooth - Webcam with realtime CSS filters. - Script Codes CSS Codes

body { background-color: antiquewhite;
}
body, button { font-family: 'Montserrat', sans-serif; font-size: small;
}
.playground { position: fixed; top: 0; left: 340px; bottom: 0; right: 0; border: 8px solid black;
}
.margin { margin: 10px; width: 300px;
}
#filterButtons { width: 300px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
li { margin-left: -20px;
}
button { padding: 3px; margin-right: 8px; margin-bottom: 8px; color: white; background-color: #6496c8; border: none; border-radius: 2px; box-shadow: 1px 5px #27496d;
}
button:hover,
button.hover { background-color: #417cb8
}
button:active,
button.active { background-color: #417cb8; box-shadow: 0 3px #27496d; -webkit-transform: translateY(2px) translateX(1px); transform: translateY(2px) translateX(1px);
}
button:disabled,
button.disabled { background-color: darkgrey; box-shadow: 0 3px #27496d; -webkit-transform: translateY(2px) translateX(1px); transform: translateY(2px) translateX(1px);
}
.photo { box-shadow: 3px 3px 3px #888888; position: absolute; top: 0; left: 0; margin: 30px; padding: 12px; background-color: white; cursor: move; -webkit-transition: all 0.5s; transition:all 0.5s;
}
.0000photo:hover { position: absolute; -webkit-transform: translateY(-1px) translateX(-1px) rotate(0deg) scale(1.5); z-index: 999; box-shadow: 15px 15px 30px #666;
}

Photobooth - Webcam with realtime CSS filters. - Script Codes JS Codes

(function() { // A button for each filter will be created dynamically var filters = [ { name: "Reset", filter: "" }, { name: "Blur", filter: "blur(3px)" }, { name: "BnW", filter: "grayscale(100%)" }, { name: "Bright", filter: "brightness(300%)" },{ name: "Hue", filter: "hue-rotate(90deg)" },{ name: "Invert", filter: "invert(100%)" },{ name: "Saturate", filter: "saturate(800%)" },{ name: "Sepia", filter: "sepia(400%)" },{ name: "Contrast", filter: "contrast(500%)" }]; var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var canvasContext = canvas.getContext('2d'); navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if (navigator.getUserMedia) { function gotStream(stream) { if (navigator.mozGetUserMedia) { video.mozSrcObject = stream; } else { var vendorURL = window.URL || window.webkitURL; video.src = vendorURL.createObjectURL(stream); } video.play(); } function error(message) { console.log(message); } function start() { this.disabled = true; navigator.getUserMedia( { audio: false, video: { mandatory: { maxWidth: 320, maxHeight: 240 } } }, gotStream, error); } function getRandomNumberWithMax (max) { return Math.floor(Math.random() * max); } function takePhoto() { canvasContext.drawImage(video, 0, 0, 320, 240); var element = document.createElement("img"); element.src = canvas.toDataURL(); var angle = getRandomNumberWithMax(30) - 15; element.style.transform="rotate(" + angle + "deg)"; element.style.top = getRandomNumberWithMax(50) + "px"; element.style.left = getRandomNumberWithMax(50) + "px"; element.style.zIndex = z; element.style.filter = video.style.filter; element.style.webkitFilter = video.style.webkitFilter; element.className = "photo"; element.addEventListener('dragstart', dragStart, false); document.getElementById("stack").appendChild(element); } var draggedElement; var x, y, z = 0; function dragStart(e) { draggedElement = e.target; x = e.clientX - draggedElement.offsetLeft; y = e.clientY - draggedElement.offsetTop; e.dataTransfer.setDragImage(draggedElement, x-340, y); } function drop(e) { z++; draggedElement.style.left = (e.clientX - x - 30) + "px"; draggedElement.style.top = (e.clientY - y - 30) + "px"; draggedElement.style.zIndex = z; if (e.stopPropagation) { e.stopPropagation(); } e.preventDefault(); return false; } function dragEnter(e) { e.preventDefault(); return true; } function dragOver(e) { e.preventDefault(); } document.getElementById("startButton").addEventListener('click', start); document.getElementById("photoButton").addEventListener('click', takePhoto); var container = document.body; container.addEventListener('drop', drop, false); container.addEventListener('dragenter', dragEnter, false); container.addEventListener('dragover', dragOver, false); function findFilterByName (filterArray, name) { for(var i = 0; i < filterArray.length; i++) { if(filterArray[i].name === name) { return filterArray[i]; } } // Not found return null; }; thisBrowserSupportsCssFilters = function () { var prefixes = " -webkit- -moz- -o- -ms- ".split(" "); var el = document.createElement('div'); el.style.cssText = prefixes.join('filter:blur(2px); '); return !!el.style.length && ((document.documentMode === undefined || document.documentMode > 9)); }; if(thisBrowserSupportsCssFilters()) { var buttonsDiv = document.getElementById("filterButtons"); filters.forEach(function(item){ var button = document.createElement("button"); button.id = item.name; button.innerHTML = item.name; // This will cause a re-flow of the page but I don't care buttonsDiv.appendChild(button); }); function filterClicked (event) { event = event || window.event; var target = event.target || event.srcElement; if(target.nodeName === "BUTTON") { var filter = findFilterByName(filters, target.id); if(filter) { video.style.filter = filter.filter; video.style.webkitFilter = filter.filter; } } }; buttonsDiv.addEventListener("click", filterClicked, false); } } else { document.getElementById("startButton").disabled = true; document.getElementById("photoButton").disabled = true; alert("Sorry, you can't capture video from your webcam in this web browser. Try the latest desktop version of Firefox, Chrome or Opera."); } })();
Photobooth - Webcam with realtime CSS filters. - Script Codes
Photobooth - Webcam with realtime CSS filters. - Script Codes
Home Page Home
Developer Johan Karlsson
Username DonKarlssonSan
Uploaded February 01, 2023
Rating 3
Size 4,390 Kb
Views 2,024
Do you need developer help for Photobooth - Webcam with realtime CSS filters.?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Johan Karlsson (DonKarlssonSan) Script Codes
Name
Cash by Brownian Motion
Apply Filter Effects to Music
Wayward Walker Worms
Laser Writer
Sine Perlin
Rotating Neon Curves
Portrait by Brownian Motion
Circuit Board Warper
Text by Brownian Motion
The Rainbow Spirograph
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!