/stream-me-board

An epic interface for audience interactive with live stream broadcasters.

Primary LanguageCSSMIT LicenseMIT

stream-me-board Build Status npm version js-standard-style

An epic interface for audience interactive with live stream broadcasters.

Using React,  Redux,  RxJS,  firebase, Babel, and Rollup.

Chat with Screen Effects!

All the chat messages will pop-up like a comic bubble with motion effect. Audience can also use special screen effect to cheer the party alive!

Hit and Vote!

Broadcaster can also raise a vote that does not like any vote you have seen, we count all the mouse clicks for every body. If the audience really like the candidate, they will sure hit harder on their mouse!

Chat robot!

You can use the chat robot

Installation

  1. Apply for a firebase database.
  2. Create an admin account 'admin@admin.com' in Authentication
  3. Create a 'system' data like below:

  1. Create a file config/firebase.js and fill your apiKey:
const FirebaseConf = {
	apiKey: 'XXXXXXXXXXXXXXXXXX',
	authDomain: 'XXXXXXXXXX.firebaseapp.com',
	databaseURL: '//XXXXXXXXXX.firebaseio.com',
	storageBucket: '',
	messagingSenderId: '0000000000000'
}
export default FirebaseConf
  1. Install node.js and run command:
npm install

Build and deploy

npm build-watch
npm build-stream
npm build-admin
firebase deploy
  • It will then all files in public/ for your production.
  • Merge stream.html to your Open Broadcaster Software for chat and screen effect.
  • Use admin.html with your password to begin a broadcast on youtube and start vote.
  • Share your watch.html link to your audience!

System Architecture

  • stream.html shows the comic-like dialog and screen effect, can be merge to video source through Open Broadcaster Software
  • watch.html is the page audience will be look at.
  • admin.html can be used to manage the page.
  • A chat robot that runs on different machine.