
Show HN: Teevox – Twitch Multistream Player,made in Static HTML, React, Firebase - jiggity
https://teevox.com/hn
======
jiggity
Hey everyone, I got fed up with having to juggle around multiple tabs each
with a different stream and manually muting them. I spent the past 2 months
working on a website that hopefully solves this problem.

This was my first foray into React. After having been developing on Ruby /
Node on Heroku, making a pure frontend static app was refreshing.

Here are some of the features:

\- Very, very fast. A lot happening under the hood with video to make the
swaps near instant. I had to play around with GPU acceleration and CSS
transforms to manipulate the streams.

\- Load three streams simultaneously, when you swap out the primary stream,
the other two streams are muted automatically.

\- A powerful compact stream browser accessible to your left. I've tried to
make it so you can scan a whole lot of streams at once to pick out the most
interesting ones.

\- Auto-refreshing stream list. Hopefully you won't even notice it reloading.
It's always kept up to date to minimize any offline streamers and catch your
favorite streamers coming online.

\- Drag and drop streams into screens, click on screens to promote them to the
primary. A lot of small miscellaneous things that hopefully make Teevox more
intuitive.

\- Auto bandwidth optimization, when you select a very high quality stream
(ex: Source), instead of switching all three to high quality, it'll only do it
for the primary stream. When you swap out for another primary stream, it will
seamlessly transition into the proper quality.

The best part was the static HTML portion that allows it to load almost
instantly without any preprocessing necessary. Let me know what you think!

~~~
lavingiasa
Woah, I used Teevox years ago when I watched a lot of Starcraft. I thought it
was discontinued, or am I thinking of a different similar service?

~~~
jiggity
Good to have you back! It's the same guy :)

~~~
marblar
> I spent the past 2 months working on a website that hopefully solves this
> problem.

What’s the relationship between this page and the page I tried in 2011?

------
nacs
Looks good but I've been using
[http://multitwitch.tv/](http://multitwitch.tv/) (
[https://github.com/bhamrick/multitwitch](https://github.com/bhamrick/multitwitch)
) for a while with no issues.

Also, the drag and drop doesn't work for me -- when I drag and drop, the
stream doesn't open, the item just stays where I "dropped", and as you can see
from the screenshot [1], it stays there (and during one of the drag and drops
it also selected some text and couldn't get it to unselect).

Why not just make it to where people click on the items in the sidebar to
automatically go into slot 1, 2, then 3?

[1]:
[http://thumbsnap.com/i/VWKtad3j.png?0120](http://thumbsnap.com/i/VWKtad3j.png?0120)

~~~
bloaf
Just as a historical note, teevox actually predates multitwitch. It used to be
called WarpPrism, and was intended for streaming SC2 events. It fell out of
favor circa 2 years ago, after some big changes at twitch broke a bunch of its
features.

[https://www.reddit.com/r/warpprism](https://www.reddit.com/r/warpprism)
[https://www.reddit.com/r/teevox](https://www.reddit.com/r/teevox)

------
hardwaresofton
Works well for me! Great work.

It would be nice if the URL updated to reflect which videos were being
streamed, and which layout you were in, that would make configs more copy-
paste-able. One of hte great features of multitwitch.tv is that it's easy to
craft/copy-paste a URL that leads directly to both games.

~~~
jiggity
Ahh you mean like pushstate into the addressbar. That's a great idea. One of
the issues has been losing the streams you were watching upon refresh

~~~
hardwaresofton
Yep! It's one of the things Ember is (or should be) best known for. The whole
"don't break the web" tirade.

React-router should be able to handle it (you said you were using react,
wasn't sure if it was in conjunction with react-router), but the documentation
that describes the updating patterns of the URL isn't so easy to find... This
might help though:

[https://github.com/rackt/react-
router/issues/266](https://github.com/rackt/react-router/issues/266) (Issue
from someone trying to change URL without triggering re-route, might help with
saving params to URL).

I was thinking that rather than how multitwitch does it (which is
multitwitch.tv/<stream1>/<stream2> or something like that), you might want to
pass the streams as query string params (ex. "&1=<stream1>").... But then
again, you could just use their style. Also it might be smart to selected
layout type.

------
vdnkh
Whoa! Haven't seen Teevox in a long time. I'm also building a website using
React that uses the Twitch API. How did you get access to their streams
without violating TOS? I found their endpoints and proxy them to deal with
CORS but I feel like I'm breaking some rules.

------
double051
I remember this from way back when it was called WarpPrism, and hosted at
WarpPrism.com. I had it bookmarked and used it to watch SC2 streams all the
time.

Great to see that it's still in active development!

------
noxToken
Please don't take this the wrong way, but why would I want to watch 3 streams
at once?

I imaging that this is supposed to be similar to a sportscast that multi-boxes
games occurring at the same time. The issue I find is that the control isn't
automated, so I'd have to actually be paying attention to all three to see
which is most deserving of my attention at the moment.

I suppose that there are certain games in which multi-boxing is useful, but
none of the ones I watch would have much benefit. What are the games you
stream that benefit from a setup like this?

Also, you're serving all of the images over HTTP.

~~~
jsonau
The other 2 stream might be boring at the moment(streamer afk, in a game
queue, etc)

------
catshirt
awesome! my company would be able to use this if it:

\- supported more streaming platforms (azubu, hitbox, mlg, etc)

\- supported more than 3 streams (currently we use
[http://multitwitch.tv/](http://multitwitch.tv/))

~~~
jiggity
That's awesome! Is the player for consumers? A white-labelled player?

~~~
catshirt
we use it internally- we have a team of editors watching esports 24/7 to keep
our schedules and scores up to date
([http://abiosgaming.com](http://abiosgaming.com))

------
agnivade
Nicely done !

Is there a chance I can look into a github repo for an under the hood look ?

------
nik736
Doesn't work for me. Safari 9, no Flash.

~~~
pki
Twitch player is flash.

~~~
nik736
Just No. They use HLS, which can be viewed native in Safari. On every other
site embedding works in HTML5 and obviously it also works on the Twitch site.

------
quakenul
Wow, feels really snappy. Well done :)

