Code Monkey home page Code Monkey logo

live-chat-question-flagger's Introduction

Live Questions and Answers Lower Third Generator

A Nodejs Web app for flagging live chat comments as questions, and generating lower thirds.

  • Enable questions and answers on Live Streams.
  • Show questions from your audience as lower thirds.
  • Encourage more interaction from your Live audience.

How It Works

YouTube Live Chat Question Flagger

  • Live chat stream from YouTube livestream is displayed
  • Click the "Mark as Question" button to flag a question.
  • Questions get highlighted in yellow.
  • Click "Generate Lower Third" to send the question to a static lower-third URL at /lowerthird

You can now use the generated lowerthird in a livestreaming app like OBS.

What It Looks Like

YouTube Live Chat Lower Third for Questions

Installation

This app requires Node.js v6+ to run.

These instructions assume you are using Debian.

Install the dependencies and clone the repo.

curl -sL https://deb.nodesource.com/setup_6.x -o nodesource_setup.sh
bash nodesource_setup.sh
apt-get install nodejs build-essential
git clone https://github.com/Hennamann/Live-Chat-Question-Flagger

Depending on what platforms you want to support you will need to fill in some info:

YouTube

If you want to support YouTube you need a YouTube auth key instructions can be found here: https://developers.google.com/youtube/registering_an_application You will also need to find your YouTube channel ID, instructions here: https://support.google.com/youtube/answer/3250431

Facebook

Facebook requires a user access token from your personal facebook account, these can be obtained from here: https://developers.facebook.com/tools/explorer/ You will need a FaceBook application tool to do so. (User access tokens last for 1 month by default but can be extended to last for two months on this page: https://developers.facebook.com/tools/debug/accesstoken/). You will also need your facebook userid or pageid, the api should work with the id found in the url for you FaceBook page or user page, but you can also use this site to be 100% sure: https://findmyfbid.com/

Twitch

Twitch is really straightforward to setup, simply grab your Twitch username and you're set.

Once you have the information you need, simply fill in the correct fields in the auth.example.json file and save it as auth.json doing something like this:

cd YouTube-Live-Chat-Question-Flagger
cp auth.example.json auth.json
nano auth.json

Don't worry if you don't use some of the live stream services, the server will ignore them as long as you avoid starting the apis for them (more on this later in the README).

Install Node Modules.

npm install

Running The App

Start the app!

node index.js

Go to http://localhost:8080 to see the app in action.

View the lowerthird at http://localhost:8080/lowerthird.

Visiting the site at this point will reveal a fairly empty page, this is because you need to start the different live stream api pullers. If you have added API info for all the different services you can simply visit http://localhost:8080/startall and http://localhost:8080/stopall to stop the API pulllers. If you are not running all of them you have to manually use the start webhooks for the services you are using:

Running The App Continously

To run the app continously you can use forever:

npm install forever -g
forever start index.js

This will run the server even when you leave your ssh session.

You can also use Screen, which comes bundled with almost any Linux installation:

screen -S server

To detach yourself from the screen press Ctrl+A then D separately.

Start The App on Boot Using Systemd

Create a service file for the application:

/etc/systemd/system/livechat.service

Include this inside the service file (modify slightly to match your setup):

[Service]
ExecStart=/usr/bin/node /root/Live-Chat-Question-Flagger/index.js
Restart=always
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=node-livechat
User=root
Group=root
Environment=NODE_ENV=production

[Install]
WantedBy=multi-user.target

Enable and start the service:

systemctl enable livechat
systemctl start livechat

You can restart and/or stop the service with the following commands:

systemctl restart livechat
systemctl stop livechat

TODO

  • Add authentication: As it stands there is no authentication for the app, meaning anyone with the url can flag comments and generate lowerthirds.
  • Improve the Twitch support: This might prove difficult as Twitch does not have any APIs for getting twitch comments outside of the overly compicated IRC system.

Credits

This Nodejs app uses the following node modules:

Thanks to Mike Russell and Music Radio Creative for coming up with the idea, and helping the development of the app!

Development

Want to contribute? Great! Just make a pull request with your changes and we will review it ASAP!

License

MIT

live-chat-question-flagger's People

Contributors

dependabot[bot] avatar hennamann avatar imikerussell avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Forkers

anigeluk ogmkp

live-chat-question-flagger's Issues

Add custom questions

It'd be great for a moderator to be able to input a custom user name and question. This would work well when a question is asked in a community (such as https://community.musicradiocreative.com/).

The host can then reference a question not asked offline or on a forum and not on one of the live stream chats.

Thinking about this further there would also need to be the option to upload an avatar image or link to one on the web.

Button cut off when used on small displays

Platform (OS):
Any
Live Streaming Service(s):
N/A
Version:
Latest(v.1.2.1)
Steps to reproduce:
Scale the window down to a rather small size.
Expected Behaviour:
The buttons should always be available.

Rethinking question flagging and lower thirds

Today I was running and using the app mostly by myself (Joe was also helping plenty) and it got me to thinking about making an easier workflow for both hosts and producers.

Some hosts will not have the luxury of a producer so perhaps it's worth to have "Mark as Question" and "Generate lower third" as icons/options on the same page and in the same chat stream.

e.g. Instead of "Mark as Question" sending the chat to another page it would simply highlight the chat message with a light orange background.

question-highlight

That way any chat message can go straight "on air" and if the host does have a producer around they can highlight chats making it easy for the host to scroll through and generate a lower third.

No display of questions

As of 8c1e440, attempting to click the "?" in the UI causes no questions to appear on the right hand side. The UI doesn't appear to match what is displayed in the screenshots at all: It appears that the split screen with the "Questions" view in modview.html is not actually what is checked in?

Any chance you may have a slightly out of date UI checked in for modview.html, or something obvious I'm missing in the setup? the source HTML doesn't appear to have any handling for displaying questions selected...

Different views for moderator and host

It'd be good to have the live stream view with "?" flagging for moderators only.

The host would only see the curated list of questions in another view.

Make web view responsive

If the window isn't at full size it will cut off some of the questions at the bottom of the screen. There is currently no way to scroll to them if they're cut off by window size.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.