KRTirtho / spotube

🎧 Open source Spotify client that doesn't require Premium nor uses Electron! Available for both desktop & mobile!
https://spotube.krtirtho.dev/
Other
26.86k stars 1.1k forks source link

Spotify canvas #1260

Open owencz1998 opened 5 months ago

owencz1998 commented 5 months ago

Is there an existing issue for this?

Pain

This would be a nice addition to spotube.

Suggested solution

Plenty ways to add.

Useful resources

No response

Additional information

No response

Self grab

bmisiak commented 1 month ago

Sample canvas URL: https://canvaz.scdn.co/upload/artist/1h6Cn3P4NGzXbaXidqURXs/video/0fd570d55e794329b3b4788c0210a80f.cnvs.mp4

The mobile Spotify client uses a protocol called Protobuf to communicate with the bridge/cosmos/hermes API and request a canvas link for a given track. However, the Desktop and Web clients do not have protobuf-based implementations and purely send JSON requests.

librespot-java was vital for figuring out the Protobuf format and endpoint for this request. Big thank you to @devgianlu for his work on librespot and the EntityCanvazRequest proto file.

Using the knowledge from librespot, I was able to make a fetch call that bypasses the javascript Cosmos API and does a direct web request with binary protobuf data. You can then decode the binary response to get a list of canvases for a given track (previously, I had to encode the binary as UTF-8 and use the builtin Cosmos client, which was very unreliable). [...] Canvases are H.264 encoded MP4 files.

https://github.com/itsmeow/Spicetify-Canvas