stream-me-board

An epic interface for audience interactive with live stream broadcasters.

Using Vue,  Vuex, firebase, Babel, and Webpack.

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!

8bit style and CSS animation!

We use an 8bit styled interface and user avatars with CSS animation.

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!

Voting and chat screen looks like this, we can see the latest voting count.

Quiz game!

There will be quiz games during broadcast, play the game to level up your character!

Mobile version!

Each of the above functions has mobile version, the audience can view it on mobile or pc device.

Management Controll Page!

Broadcaster can start broadcast and votes with a decent controll page.

Installation

1. Install firebase CLI for hosting the page on firebase
2. Init the firebase

firebase init

6. Create a file static/firebase-conf.js and fill your apiKey:

firebase.initializeApp({
	apiKey: 'XXXXXXXXXXXXXXXXXX',
	authDomain: 'XXXXXXXXXX.firebaseapp.com',
	databaseURL: '//XXXXXXXXXX.firebaseio.com',
	storageBucket: '',
	messagingSenderId: '0000000000000'
})

7. Install node.js and run command:

npm install

Build and run test

npm run start

Then you can test your page on http://localhost:8080

Build and deploy

npm run build
# This will build the watch, stream, admin page

firebase deploy
# Upload the built page to firebase hosting, you can later view on firebase

• It will then all files in dist/ for your production.
• Use streamOverlay.html as your Open Broadcaster Software's browser source for chat and screen effect.
• Use admin.html with your password to begin a broadcast on youtube and start vote.
• Share your firebase root link to your audience!

8. System Architecture

• streamOverlay.html shows the comic-like dialog and screen effect, can be merge to video source through Open Broadcaster Software
• pc.html and mobile.html is the page audience will be look at.
• admin.html can be used to manage the page.