robinadr

Tagged Twitch

After I discovered a way to watch Twitch without Flash, I’ve been using it to watch streams on Twitch. But manually opening a new window and going to the new HLS URL is tedious, so I made a JavaScript bookmarklet to automate it. Note that it requires Safari on OS X to watch the HLS stream. I’m not aware of any other browsers that support HLS at this time.

Install it by dragging this to your favorites bar: Twitch HLS.

Use it by clicking the bookmark whenever you’re on a Twitch stream page. It does two things: pauses the Flash stream, and opens a popup with the HLS stream.

The code is available on Github. More details are there too.

Update: I’ve made a bookmarklet to create a popup window of the HLS stream if you’re using Safari on Mac OS X.

One of the last things I still use Flash for is watching streams on Twitch. I don’t really mind it on my desktop, but it drains battery like crazy on my MacBook Pro. My battery lasts for about 1.5 hours while watching streams, compared to around 4 hours for normal use (browsing the web, etc.).

It turns out Twitch did some work on streaming with HLS, but there doesn’t seem to have been much progress and the ETAs given in that thread by Twitch staff have long passed. HLS is Apple’s HTTP Live Streaming protocol, which is supported by Safari on Mac OS X and iOS, as well as various other clients.

The trick to watch a stream through HLS is just adding /hls to the URL, for example:

http://www.twitch.tv/riotgames/hls

The above URL looks like this in Safari (but will work in any HLS player):

Twitch using HLS

A great part of this is that only one ad seems to run — right when you open the stream. After that, it’s ad-free for as long as I’ve been using it. I had to disable Adblock for the stream to load, using the filter rule below. It seems if you block the ad video, the stream won’t load at all.

@@|http://www.twitch.tv/*/hls|$document

Disadvantages

  • Quality is automatically determined, and there’s no manual setting
  • You have to play the ad at the beginning for it to work, but that’s the only one
  • No access to chat, but this could be considered a feature…

Power Savings

Example of Flash being power hungry

As you can see in this screenshot of Activity Monitor’s Energy tab, the Flash player was using more than 5 times the energy that the native HLS player is using.