Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/giacomocerquone/youtube-background-pwa
PWA to listen youtube in background
https://github.com/giacomocerquone/youtube-background-pwa
Last synced: 4 months ago
JSON representation
PWA to listen youtube in background
- Host: GitHub
- URL: https://github.com/giacomocerquone/youtube-background-pwa
- Owner: giacomocerquone
- License: mit
- Created: 2022-02-22T09:33:28.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-03-08T16:13:15.000Z (almost 3 years ago)
- Last Synced: 2023-03-02T09:52:11.002Z (almost 2 years ago)
- Language: JavaScript
- Homepage: ytbg-lac.vercel.app
- Size: 262 KB
- Stars: 34
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PWA to handly runs youtube in background
deployed here -> [https://ytbg-lac.vercel.app/](https://ytbg-lac.vercel.app/)
This is an experiment using next.js and ytdl-core to be able to listen to youtube videos in background.
It's a PWA and leverages the [share-target](https://web.dev/web-share-target/) feature supported by some browsers.
# Why it doesn't always work?
Basically I've deployed it on vercel and if you look closely at my `/api/stream` endpoint implementation, I'm using [ytdl-core](https://github.com/fent/node-ytdl-core) to directly return a node stream to be played by the audio html tag. This means it'll use bandwith, but [vercel cuts it to 5mb](https://vercel.com/support/articles/how-to-bypass-vercel-5mb-body-size-limit-serverless-functions), as soon as the 5mb are reached it'll close the connection.
This means you can't point the app to long videos (maximum will be about 1 minute give or take, depending also on the audio quality of that video).
## Extra
Why returning directly the node stream is the only solution?
Because any youtube downloader will give you a googlevideo link accessible only by the same ip that requested it (you can find this info also within the readme of ytdl).
Therefore, I couldn't just return the video url and then let the client download the audio.
## The interesting bit
is the following one in the manifest.json
```json
"share_target": {
"action": "/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "query"
}
}
```
## Screenshots
