Show HN: Streamus - A Chrome extension for a seamless YouTube music experience
streamus.comHi! Developer of Streamus here. I built this whole thing from scratch. The software is entirely open-source, https://github.com/MeoMix/StreamusChromeExtension, and has been my hobby for about 15 months now.
The gist is simple -- make YouTube easier and quicker to use. Streamus provides the basics, such as searching YouTube and building/sharing playlists, but also provides extension-specific features such as keyboard shortcut support, omnibox integration and a ton more.
I'd love to field any questions, comments or concerns.
Cheers
Very nice! I built a very similar web app and in hindsight I should have made it into a chrome extension. Very nice and clean design! The video is laggy for an HTML5 video, however it is not a big issue. Just curious - how does the radio work? are you using youtube mix's?
Hey! I'm glad someone responded! :D
Working inside of a Chrome extension has honestly been the best part. It feels a bit like Christmas every time new APIs are made stable. The playground comes with its own set of caveats, but I think it is definitely worth it.
A lot of the credit for the design has to be given to GitHub. I've been using GitHub for Windows for a while now and, upon taking a closer look, realized that the information it was presenting was, conceptually, very similar to the needs of Streamus. After sending them some e-mails they pointed me towards this blog post of theirs: https://github.com/blog/1151-designing-github-for-windows which proved to be extremely helpful. Implementing a 'Metro UI' theme is super fun -- especially since I've never been much of a 'design guy.'
There's a pretty deep-dark secret lurking around the video, but I am working on it. As an extension, Streamus is comprised of a foreground and a background page. The two pages can communicate with each other and with external pages, but only the foreground is visible. Additionally, the foreground is only temporary -- every time focus is lost the entire page is destroyed. As such, if I hosted the YouTube player in the foreground, it would be destroyed when minimized and the music would cease playing.
SO, the player is on the background page. "But then how am I watching the video?" Well, with a couple of canvas elements and some clever permissions, I'm able to implement something similar to what is described here: https://developer.mozilla.org/en-US/docs/HTML/Manipulating_v.... I establish a port between the YouTube iframe on the background page and my foreground and pipe the image frame-by-frame to the foreground and re-render it. As you can imagine, this is pretty intense, especially because I can't use requestAnimatiomFrame from an invisible page. I'm still playing around with other possible optimizations, but mostly I need canvas.transferControlToProxy() to be implemented in Google Chrome. You can see the code in question here: https://github.com/MeoMix/StreamusChromeExtension/blob/maste...
I'm not using YouTube mixes for radio mode. It's a bit more clever than that. Each video in your stream keeps track of its top 5 related videos by asking YouTube for related videos. This is just the information shown on the RHS when you're browsing YouTube. If I have 10 items in my stream -- the pool consists of roughly 50, non-distinct, items. Non-distinct is pretty key here because it provides weighting. If a related video appears 5 times in the pool of 50, it's clearly related to a lot of your videos and receives an implicitly greater weight because of it.
I also just apply some filters for time, etc. In the future, radio mode will show faded-out 'future picks' so it's not such a mystery what is coming next. You can see the code for all this here: https://github.com/MeoMix/StreamusChromeExtension/blob/maste...
Let me know if you have any more questions! Thanks for taking the time to look at it, I appreciate it. :)
Haha no worries.
Yea it does sound like you are doing a bunch of work arounds, I can now appreciate the development time for this. However, the clean design hides all these hacks :) I assume you had tried the youtube IFrame API etc in the background page etc? But I guess if you were to use that then the elements on the youtube player are there and you don't really need it.
That weighting feature for the radio is gold - its kept me listening since I installed it! I had not thought of that when developing my app (https://github.com/viperfx/ng-juketube), I just used the mix's. I have been using your extension since I installed it, I might have to use this and not my own app :) or improve my one.
One bug I did notice is that videos tend to overlap, what I mean by this is that some videos seem to be smaller so you can see the previous video paused or stopped in the background and the current video playing over it - you notice it because the current video is somehow smaller.
I look forward to the updates.
Yeah, there's definitely a few workarounds. Things aren't really designed with Chrome Extensions in mind ever -- down to the fact that their URL isn't http or https. I even have to make myself look like a website by intercepted the headers being sent out by the iframe: https://github.com/MeoMix/StreamusChromeExtension/blob/maste... But, yes, the YouTube IFrame API is called from the background, but it still need a DOM element to target which gets destroyed on the foreground.
In theory, it would be possible to spawn a second, muted instance of the YouTube API in the foreground and, when the user wants video, swap to it while attempting to not introduce noticeable audio issues, but that seemed pretty ugly for now. I think if I ever get around to playing with cross-fading (http://solayo.com/ supports it..) then I might be confident enough to try this out.
I'm glad you like radio mode. It can go off-track sometimes... had people complain about Justin Bieber and other Top 40 leaking into it. I starred your repo -- if you ever want to collab or chat about ideas, I'm down! I'm always idling on IRC: #streamus irc.freenode.net
Yeah, I know about that bug. I haven't quite figured it out yet because all of my canvas elements are the exact same size -- something about YouTube serving up a different quality of image, maybe. I only released video back into the wild about 2 days ago and it might be removed again temporarily while I debug further.
Oh, also, if it wasn't immediately apparent -- there's also a whole server + DB backing this. This is only to allow sharing of playlists for now, but definitely opens the door to more possibilities in the future.
Here's a couple of full-length tracks I'm listening to currently: http://share.streamus.com/playlist/9a9b8a640590/hacker_news_...
:)