youtube-background-pwa
youtube-background-pwa copied to clipboard
PWA to listen youtube in background
PWA to handly runs youtube in background
deployed here -> 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 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 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, 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
"share_target": {
"action": "/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "query"
}
}
Screenshots