douyu-chat-scrapper

It will help generating html file scrapping the last 20 (or configurable) messages from users included a streamer itself in the chatbox ready for OBS or other streaming application to consume via browser source.

Steps To Make It Work

cd to backend/ directory
npm install
DYC_ROOMID=... DYC_OUTPUT_HTML_PATH=... DYC_KEEP_NUM_MSG=... node index.js
Start your local web server and make sure the output generated .html file is accessible
Configure OBS or other streaming application's browser source to point to such .html file as well as its css/style.css (if need to specify it separately; which is the case for OBS), also you need to set vertical scroll offset to the farthest.
Now it should be working!

OBS Configuration

When you add a browser source, set the following setting accordingly

URL - point to your url accessing such generated HTML which is provided by your local server i.e. apache, nginx, etc
Zoom - possibly you need to set maximum zoom level to be able to see chat text, in my case I need to set to 500. I tried with set scaling to screen width like in normal showing HTML on mobile, but it doesn't work. Only setting Zoom level here works. Adjust the value according to what you see visually on OBS.
Vertical Scroll - Set to it a certain high value like 100000. This will ensure it always show the latest chat message.
Custom CSS - location to your CSS file. I recommended to also put it in a directory that web server can access it, although OBS seems to directly locate the file regarding whether it can access via local web server or not.

Note

To put index.html and css/ to be accessible by local web server, you might want to do a sym soft link. This depends on your case.
Every time the program start, it will wipe out the existing HTML file and start over.

Environment Variables

DYC_ROOMID - string - define your room id as a streamer, you can easily check at your Douyu account. Required
DYC_STREAMER_NN - string - define streamer's nickname. Used to check to give different color among other users. Required
DYC_OUTPUT_HTML_PATH - string - define output path for generated HTML file to be consumed and configured at OBS or other streaming application
DYC_KEEP_NUM_MSG - number - number of latest messages to be kept in the chatbox, messages outside of this range are not included in generated HTML file

Event list

Use the following event string to monitor the incoming message.

Thanks to yycdev/douyusdk for the list.

loginres - login / heartbeat response
chatmsg - barrage chat message
onlinegift - received fish ball
dgb - gift message
uenter - user enters the room
rss - room broadcast
ranklist - room contribution/leaderboard updated and broadcast
ssd - super barrage message
spbc - gift broadcast in the room
ggbb - room user grabbed red envelop
rankup - room ranking has changed
error - error message

Example

// monitor user entered into the room
room.on('uenter', function(message){
  console.log('--[' + message.nn + ']: entered into chat room--');
});

Screenshots

Initially start

After some users commented on it

Behind The Scene

Generated HTML file is set to refresh every 3 seconds. The program listens to incoming data over socket throuth douyu package, then process message before geneation of HTML file.

Connect with our Devloper

Our founder and developer goes live for game development on Douyu from time to time, you can connect with him here. Feel free to say hi!

License

MIT, ABZI.co

abzico / dyc