

Show HN: Streamus - A Chrome extension for a seamless YouTube music experience - MeoMix420
http://streamus.com

======
MeoMix420
Hi! Developer of Streamus here. I built this whole thing from scratch. The
software is entirely open-source,
[https://github.com/MeoMix/StreamusChromeExtension](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

~~~
tharshan09
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?

~~~
MeoMix420
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](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...](https://developer.mozilla.org/en-
US/docs/HTML/Manipulating_video_using_canvas). 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...](https://github.com/MeoMix/StreamusChromeExtension/blob/master/src/js/common/view/videoView.js)

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...](https://github.com/MeoMix/StreamusChromeExtension/blob/master/src/js/background/collection/streamItems.js#L346)

Let me know if you have any more questions! Thanks for taking the time to look
at it, I appreciate it. :)

~~~
tharshan09
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](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.

~~~
MeoMix420
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...](https://github.com/MeoMix/StreamusChromeExtension/blob/master/src/js/background/model/youTubePlayerAPI.js)
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/](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_...](http://share.streamus.com/playlist/9a9b8a640590/hacker_news_playlist)

:)

