This is a streaming simulator inspired by the Twitch platform, built entirely using HTML, JavaScript, and CSS. I aimed to replicate the real-life streaming experience as realistically as possible. Expect features like viewer interactions through chats and reactions, random gifting/subscriptions, fluctuating viewer counts, and broadcaster privileges such as banning, modding, etc. and many more.
Please refer to the demo above to see the program in action or type '/command' in the chat for a list of supported commands. More details can be found in the Features section below.
Inspired by the K-drama Celebrity, where an Instagram filter mimics a fast-moving livestream chat, I wanted to recreate the effect. While I considered an Instagram livestream simulator, my familiarity with Twitch’s UI and features led me to replicate Twitch instead.
I originally planned to create simulators for both Instagram and Twitch livestreams. However, as I worked on making this Twitch simulator as realistic as possible, I realized the amount of effort required was intense—even with my familiarity with Twitch. Since I have little experience with Instagram livestreams and rarely interact with them, I decided to focus solely on Twitch.
Most features in this simulator scale with the total viewer count. Higher viewer counts increase the frequency and duration of events, while lower viewer counts reduce them. The stream runs indefinitely once started, with some features dependent on an active chat and others pausing chat when applied.
Viewer Count-Scaled Features:
- Viewer count: Fluctuates up and down, with fluctuation rates increasing alongside viewer counts.
- Chat output: Chat messages are continuously generated, with the output rate scaling with the viewer count.
- Subscription/Gifting: Random viewers may subscribe or gift subscriptions. The likelihood of this scales with viewer count.
Chat Reactions (Duration and Frequency Scale with Viewer Count):
- Greeting: Chat will greet you at the beginning of the stream.
- Gifting: Chat reacts dynamically based on the number of gifted subscriptions.
- Ban/Unban/Mod/Unmod: Chat responds when a viewer is banned, unbanned, promoted to moderator, or demoted from moderator by you.
Commands (also displayed when entering '/command'):
- /username name: change your user name
- /title title: change stream title
- /category category: change stream category
- /mod name/@name: make a viewer a moderator
- /unmod name/@name: demote a moderator
- /vip name/@name: make a viewer a vip
- /unvip name/@name: demote a vip
- /founder name/@name: make a viewer a founder
- /ban name/@name: ban any viewer
- /unban name/@name: unban any banned viewer
- /gift name/@name: gift a sub to a viewer
- /giftrandom number: gifting 1 - 100 subs to random viewers
- /giftrate 1-10: increase usual gifted sub by 1-10 times
- /giftlog: show log of all gifter
- /spam word/"phrase" or both: trigger the chat to spam specified word(s) and/or phrase(s)
- /viewcount number: set viewer count to any number from 1 - 999,999
- /yt URL: change the embedded YouTube video
- /clearpopup: remove all user profile popups
- /clear: clear chat
- /mute: mute all sub/prime/gift sound alert
- /suboverlay on/off: turn sub overlay on/off
- /screencapture: quick disclaimer about this feature
Buttons feature:
- Start/Pause Chat (button): Start, pause, or resume chat.
- Screen Capture (button): Disabled by default. Capture user's screen content and streams it in the video player area. For a disclaimer, enter '/screencapture' in the chat.
- Arrow key up/down: Navigate through chat history.
- Chat (button/enter): Output your message to the chat.
- Follow/Subscribe (button): Decorative only, without functionality.
Other features:
- User profile: Displays a user's profile when their name is clicked.
- Names autocomplete (tab): Autocompletes usernames when used with @.
- Emoji supported: An emoji bank of nearly 300 is supported.
- Emotes autocomplete (tab): Autocompletes emote names.
- Emotes preview (tab): Shows preview when navigating through each emote.
- Message highlight: Highlights messages when a viewer mentions you.
- Badges: Viewers have badges indicating their roles or status in the community.
- Youtube embed: Display any YouTube video (if embedding is allowed) using '/yt URL'.
