Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vikasipar/cowatch
CoWatch: Redefining how users experience content on YouTube! 🚀
https://github.com/vikasipar/cowatch
mediastream-api peerjs popupz reactjs recoil tailwindcss youtubedataapi
Last synced: 7 days ago
JSON representation
CoWatch: Redefining how users experience content on YouTube! 🚀
- Host: GitHub
- URL: https://github.com/vikasipar/cowatch
- Owner: vikasipar
- Created: 2024-01-31T14:14:22.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-03-02T12:36:41.000Z (9 months ago)
- Last Synced: 2024-03-03T11:42:36.246Z (9 months ago)
- Topics: mediastream-api, peerjs, popupz, reactjs, recoil, tailwindcss, youtubedataapi
- Language: JavaScript
- Homepage: https://cowatch.vercel.app
- Size: 98.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 
  **CoWatch**: Redefining how users experience content on YouTube! 🚀
Live Site: 👉 [click here](https://cowatch.vercel.app/)
### Overview
**What is CoWatch?**
CoWatch is an extension of my previous project, the YouTube clone, where I've taken the concept of collaborative video viewing to the next level. With CoWatch, users can seamlessly watch YouTube videos together with their friends while enjoying integrated video call and screen sharing features. It builds upon the foundation of the YouTube clone, enhancing the user experience with real-time interaction and shared enjoyment of content.
### Why I Built the Project This Way
- Revolutionizing YouTube Viewing: CoWatch redefines how users engage with YouTube content, fostering collaborative experiences regardless of physical distance.
- Exploring the Intersection: This project explores the convergence of video streaming, real-time communication, and collaborative experiences, offering a unique blend of technology and interactivity.
- Playground for Experimentation: CoWatch serves as my experimental playground, allowing me to delve into cutting-edge technologies, refine my skills, and push the boundaries of what's possible in web development.
- Commitment to Continuous Improvement: By building CoWatch, I demonstrate my commitment to continuous learning and improvement as a developer, constantly seeking new challenges and opportunities for growth.
### Additional Innovative Features
- **Real-Time Peer-to-Peer Connection:**
- CoWatch utilizes WebRTC technology to establish peer-to-peer connections between users, ensuring low-latency and high-quality video streaming without the need for centralized servers. It allows users to interact and communicate with their friends while watching videos together
- **Screen Sharing Functionality:**
- Users can share their screens with friends, enabling collaborative viewing of YouTube videos.
- **Dynamic Room Creation:**
- Users can easily create new viewing rooms or join existing ones by simply entering a room ID, making it effortless to start watching videos with friends.
### The Tech Behind CoWatch
Building CoWatch has been an incredible learning journey for me, where I've had the opportunity to dive deep into several exciting technologies:
- **WebRTC**: CoWatch leverages WebRTC (Web Real-Time Communication) to establish peer-to-peer video connections between users, enabling seamless video calls for real-time interaction.
- **MediaStream API**: With the MediaStream API, CoWatch can access and manipulate audio and video streams from user devices, facilitating both video playback and screen sharing features.
- **PeerJS**: I've integrated PeerJS, a JavaScript library built on top of WebRTC, to simplify the process of setting up peer connections and handling signaling between clients.
- **React & Recoil**: CoWatch's frontend is powered by React, with Recoil managing state to ensure a smooth and responsive user experience.
- **Tailwind CSS:** A highly customizable CSS framework for modern and responsive UIs.
- **YouTube Data API:** Integrated the API for fetching and displaying YouTube video data.
### Getting Started
1. Clone the repository:
```bash
git clone https://github.com/vikasipar/CoWatch.git
```
2. Install dependencies:
```bash
npm install
```
3. Set up YouTube Data API credential.
### Running the App
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser.
### Screenshots:
