Learn how to add filters, effects, and overlays to webcam photos in a React app with Cloudinary. We'll learn how to set up a new app that uses a webcam to grab photos, uploads the photos to Cloudinary from a serverless function, and uses Cloudinary to add style filters and overlays including a Darth Vader mask to the photo. 🧐 What's Inside 00:00 - Intro 00:12 - Tools we'll use including React Webcam, Next.js, and Cloudinary 02:03 - Creating a Next.js app from a demo starter 03:25 - Adding a webcam stream in React with React Webcam 06:29 - Using getScreenshot to grab a still of the webcam from a React ref 11:43 - Uploading an image from a serverless function using the Cloudinary node SDK 22:35 - Configuring the Cloudinary URL Gen SDK to create image URLs 26:04 - Adding Instagram-like style effects to images with Cloudinary Art Effect filters 33:23 - Overlaying masks on faces and image layer effects with Cloudinary 39:19 - Outro Demo Camera Filters Starter https://github.com/colbyfayock/demo-camera-filters-starter 💾 Code https://github.com/colbyfayock/my-camera-filters 🗒️ Read More https://spacejelly.dev/posts/how-to-add-webcam-photo-filters-effects-in-react-with-cloudinary/ 🔔 Subscribe for more tech and developer videos null 🐦 Get updates straight to your Twitter @colbyfayock https://twitter.com/colbyfayock 📸 Catch the next stream live on Twitch @colbyfayock https://twitch.tv/colbyfayock ✉️ Or a newsletter right to your inbox! https://www.colbyfayock.com/newsletter/ 💝 Sponsor me for more free content like this! GitHub: https://github.com/sponsors/colbyfayock Other: hello@colbyfayock.com 👨‍🚀 Brought to by colbyfayock.com https://www.colbyfayock.com/ 🎥 Want to know what A/V equipment I use? https://www.colbyfayock.com/uses 🧰 More Resources Demo Camera Filters Starter https://github.com/colbyfayock/demo-camera-filters-starter React Webcam https://github.com/mozmorris/react-webcam Placing layers on images https://cloudinary.com/documentation/layers Image transformations https://cloudinary.com/documentation/image_transformations Media Stream Capabilities, constraints, and settings https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints 🎼 Music Music from Uppbeat (free for Creators!): https://uppbeat.io/t/kevin-macleod/fantasia-fantasia License code: BK1AAVZ5WF0V6DC7 #colbyfayock #webcam #cloudinary #nextjs #filters #photoediting #webdevelopment