https://github.com/dalascript/picture-in-picture
ZTM JS Web Projects Course | Picture in Picture | Project 3/20
https://github.com/dalascript/picture-in-picture
css html js picture-in-picture screen-capture-api zerotomastery
Last synced: about 1 month ago
JSON representation
ZTM JS Web Projects Course | Picture in Picture | Project 3/20
- Host: GitHub
- URL: https://github.com/dalascript/picture-in-picture
- Owner: DalaScript
- Created: 2025-05-12T10:10:33.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-22T08:48:20.000Z (about 1 year ago)
- Last Synced: 2025-06-24T01:38:23.482Z (about 1 year ago)
- Topics: css, html, js, picture-in-picture, screen-capture-api, zerotomastery
- Language: CSS
- Homepage: https://dalascript.github.io/picture-in-picture/
- Size: 12.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Picture in Picture | ZTM JS Web Projects Course
**Project 3/20**
A minimalist Picture-in-Picture (PiP) web app that allows users to share their screen and pop it out into a floating video window using the browser's native Picture-in-Picture API. Clean design, one-click interaction, and a focused learning experience on media APIs.
---
## 📚 Table of Contents
- [🔎 Overview](#-overview)
- [📸 Screenshot](#-screenshot)
- [🔗 Links](#-links)
- [📌 Features](#-features)
- [🛠️ Built with](#️-built-with)
- [🧠 My process](#-my-process)
- [🗃️ Useful resources](#️-useful-resources)
- [🔙 Previous Project](#-previous-project)
- [🔜 Next Project](#-next-project)
- [👤 Author](#-author)
- [🌐 Connect with Me](#-connect-with-me)
- [💻 Coding Profiles](#-coding-profiles)
---
## 🔎 Overview
### 📸 Screenshot
### 🔗 Links
- [🔴 Live Demo](https://dalascript.github.io/picture-in-picture/)
- [🗂️ GitHub Repository](https://github.com/DalaScript/picture-in-picture)
### 📌 Features
- ✅ Prompts the user to select a screen to share
- ✅ Streams the selected screen into a hidden video element
- ✅ Allows starting Picture-in-Picture with a single click
### 🛠️ Built with
- HTML5
- CSS3
- Vanilla JavaScript
- Picture-in-Picture Web API
- MediaDevices API (`getDisplayMedia()`)
---
## 🧠 My Process
### 🗃️ Useful resources
- [Google Fonts](https://fonts.google.com/)
- [CSS Tricks - Picture-in-Picture Guide](https://css-tricks.com/an-introduction-to-the-picture-in-picture-web-api/)
- [MDN - Screen Capture API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture)
- [TC39](https://github.com/tc39/proposals)
### 🔙 Previous Project
- Infinity Scroll | *Project 2/20* → [View Repository](https://github.com/DalaScript/infinity-scroll)
### 🔜 Next Project
- Joke Teller | *Project 4/20* → [View Repository](https://github.com/DalaScript/joke-teller)
---
## 👤 Author
### 🌐 Connect with Me
- [Instagram](https://www.instagram.com/DalaScript)
- [YouTube](https://www.youtube.com/@DalaScript)
### 💻 Coding Profiles
- [freeCodeCamp](https://www.freecodecamp.org/DalaScript)
- [FrontendMentor](https://www.frontendmentor.io/profile/DalaScript)
- [GitHub](https://github.com/DalaScript)
*🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀*