A video player that allows you to watch synchronized content with your friends and family.
Application Link
🌀Spin, local development server:
# install dependencies
$ yarn install
# serve at localhost:3000
$ yarn dev
Open http://localhost:3000 with your browser to see the app.
Note: You can also test peer to peer connection locally by opening multiple tabs.
This is the frontend of the web app. You can get the server here
Set API_URL
env var to the server's url
Note: If you are running the server locally, set
API_URL=http://localhost:5000
and make sure the server is running on port 5000
- Create a room ➕
- Invite your friends 🕺
- Add video 🎬
- Chill 🍿
✅ Minimal UI 🔮
✅ Floating video 📺
✅ Stream youtube videos
✅ Local media playback 📁
✅ Sync playback 🔄
🔳 Stream online videos 🌐
🔳 Torrent Streaming 🧲
🔳 Subtitles 📄
🔳 No refreshes needed ⌛️
-
React Video controler: https://code.pieces.app/blog/react-player-customized-controls
-
Responsive aspect ratio: https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
-
customize MUI theme https://mui.com/material-ui/customization/how-to-customize/
-
Full screen both video and face-time http://jsfiddle.net/zrxewhgL/ http://jsfiddle.net/j40s2bvd/
-
To implement video call feature Refer this code: https://github.com/Alamir151/zoom-clone
-
Torrent streaming: https://codesandbox.io/s/github/dbrowne24/webtorrent-react/tree/master/?file=/src/App.js https://github.com/dbrowne24/webtorrent-react/tree/master/ https://github.com/qqdaiyu55/YanQi/blob/ab61d5933dd106fbed33ee4b6681907353c1bbc2/src/client/containers/Video.js#L9
-
Additional Reference In Notion