Inspiration

Our love for photobooths and UMD inspired this project.

What it does

The TerpBooth is a UMD-themed web photobooth that lets students take fun, memorable photos directly in their browser. Users can see playful animations while capturing their photo and download it instantly — no app or installation required.

How we built it

We built The TerpBooth using HTML, CSS, and JavaScript. HTML created the page structure and buttons. CSS styled the pages, added animations, and gave it a UMD-themed look. JavaScript handled the webcam, captured photos, animated elements, and navigated between pages. We used GIF animations for interactive effects and stored photos temporarily in the browser.

Challenges we ran into

During development, we faced a few challenges. Positioning the captured images correctly within the UMD-themed borders was tricky, especially when trying to maintain consistency across different screen sizes. Additionally, the download format caused some headaches — even after capturing photos, the saved images were often squished or distorted, which required careful adjustment of the size and aspect ratio.

Accomplishments that we're proud of

We successfully captured live photos in the browser without any downloads, created a fun and interactive UMD-themed design, and built a photobooth that works across both desktop and mobile browsers. Through this project, we learned how to integrate webcam access with JavaScript and , structure a multi-page web app, manage file paths and browser permissions, and design a simple, engaging user interface.

What we learned

We learned:

  • How to integrate webcam access with JavaScript and .
  • How to structure a multi-page web app with HTML, CSS, and JS.
  • The importance of file paths, local servers, and browser permissions for web projects.
  • How to make a simple, engaging UI/UX for interactive web experiences. ## What's next for The TerpBooth Looking ahead, we plan to add features such as filters or overlays for more photo customization, a share option for social media or email, and animated UMD frames or graphics to enhance school spirit. We also aim to add a sticker addition feature.

Built With

Share this project:

Updates