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: 3 months 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 (5 months ago)
• Default Branch: main
• Last Pushed: 2025-05-22T08:48:20.000Z (5 months ago)
• Last Synced: 2025-06-24T01:38:23.482Z (4 months 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)

- [🧠 My process](#-my-process)

  - [🛠️ Built with](#️-built-with)

  - [🎓 What I learned](#-what-i-learned)

  - [🔙 Previous Project](#-previous-project)

  - [🔜 Next Project](#-next-project)

  - [🗃️ Useful resources](#️-useful-resources)

- [👤 Author](#-author)

  - [🌐 Connect with Me](#-connect-with-me)

  - [💻 Coding Profiles](#-coding-profiles)

---

## 🔎 Overview

### 📸 Screenshot

![Live Preview Screenshot](./assets/screenshot.jpg)

### 🔗 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

---

## 🧠 My Process

### 🛠️ Built with

 - HTML5

 - CSS3

 - Vanilla JavaScript

 - Picture-in-Picture Web API

 - MediaDevices API (`getDisplayMedia()`)

### 🎓 What I Learned

 - How to work with `getDisplayMedia()` to capture the screen

 - Implementing and controlling Picture-in-Picture mode via JavaScript

 - Managing DOM elements and user interaction state (e.g., disabling button while PiP is active)

 - Creating clean UI with shadows, gradients, and responsive centering

  > 🚀 For me, this project was more about **practice** and gaining additional **experience**,  

  > rather than learning something entirely new.  

  >  

  > 👨‍💻 Since I’m not a beginner and already familiar with these technologies,  

  > I approached it with confidence — and still, I truly **enjoyed working on it**.  

  >  

  > 🎯 Overall, I consider this a very **valuable and enjoyable experience**.

### 🔙 Previous Project

 - Infinite Scroll | *[Project 2/20]* → [View Repository](https://github.com/DalaScript/infinite-scroll)

### 🔜 Next Project

 - Joke Teller | *[Project 4/20]* → [View Repository](https://github.com/DalaScript/joke-teller)

### 🗃️ Useful resources

 - [Google Fonts](https://fonts.google.com/) – Source for beautiful and free web fonts used in your UI.

 - [CSS Tricks - Picture-in-Picture Guide](https://css-tricks.com/an-introduction-to-the-picture-in-picture-web-api/) – Great overview and code snippets for working with the PiP Web API.

 - [MDN - Screen Capture API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture) – In-depth guide on using `getDisplayMedia()` for screen sharing.

 - [TC39](https://github.com/tc39/proposals) – The list of JavaScript language feature proposals

---

## 👤 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 🚀*