We are striving developers with the goal of being part of a great company

Team Members

Launch Site

Twitch Zoom!

Watch Twitch streams the Japanese way with this refreshing new take on an old concept!

V800 twitchzoom

Description

In the 2000s as video streaming on the internet was gaining popularity, there was a Japanese site called Nico Nico. The hook for their site was that comments and chat messages would be overlaid on the stream live as you were watching via a fly-by marquee one-shot animations in all sorts of random places on the screen!

Nobody has really ever used that hook since the early 2000s and so we decided to apply it to Twitch using their own API and recreate it for a new audience so that you can watch in a more fun way!

As an added bonus, you can use this app to overlay it automatically on your own stream via Open Broadcaster Software (OBS) so that when you combine the app with a Browser Source, you can make it so that your normal stream will automatically display the effect by default for your viewers!

Instructions

Option 1: live demo app

  • Visit this site: http://104.248.4.129/
  • (alternatively, visit http://104.248.4.129/usernamehere if you want to automatically tune in to a particular channel)
  • Enter the username of a Twitch streamer that you want to tune into
  • For best results, pick a Twitch streamer who currently has a fast moving chatroom
  • You are done!

Option 2: local hosting (or, if the live demo isn't working for some reason)

  • Clone the repo and install the npm packages via npm install
  • Run node server.js in one bash terminal console instance
  • Run npm start in the a second bash terminal instance
  • Visit localhost:3000 in your browser
  • Enter the username of a Twitch streamer that you want to tune into
  • You are done!

View the screencast:
https://youtu.be/B49kD61dz-g

Built With

DigitalOcean was used to host the project's worker and web dynos.

We were originally going to deploy this project on Heroku, but we had to switch due to the time constraint due to the back-end sockets not connecting properly and Heroku's console log wasn't giving us any clues to work with.

Here are the NPM packages that we used in the project, per the package.json file in the Github repo's root folder: "cors": "^2.8.4", "express": "^4.16.3", "react": "^16.5.1", "react-dom": "^16.5.1", "react-scripts": "1.1.5", "react-transition-group": "^2.4.0", "socket.io": "^2.1.1", "socket.io-client": "^2.1.1", "tmi.js": "^1.2.1", "twitch-bot": "^1.2.5" "json-loader": "^0.5.7"

Twitch emote icons are fetched from their public API's static image content.

Feedback / Ratings (9)

All Feedback