mrbrax / twitch-vod-chat Goto Github PK

License: MIT License

TypeScript 21.30% Vue 74.14% JavaScript 0.54% SCSS 3.45% HTML 0.56%

twitch-vod-chat's Introduction

Demo

http://vod.dongers.net/player.html

I'll try to keep it up to date, but i would recommend cloning and serving the project locally for an up to date version. If I figure out how to automatically make zip files of releases I'll do that.

Some other stuff exists on root as well.

Setting up

With downloaded VOD (recommended)

Install youtube-dl

youtube-dl https://www.twitch.tv/videos/<ID>

Install twitch-chat-downloader

pip install tcd

tcd --video <id> --format json

With twitch embed (experimental, might buffer)

Just download chat, but don't input a video at all.

Automated

/#source=file&video_path=PATH&chatfile=CHATFILE.json

/#source=youtube&youtube_id=VIDEO_ID&chatfile=CHATFILE.json

/#source=twitch&twitch_id=VIDEO_ID&chatfile=CHATFILE.json

/#source=twitch&twitch_id=VIDEO_ID&chatdump=VIDEO_ID

Playing back

Open the player.html page, load the video file (for better stability) and chat dump (can take a while).

Set settings as wanted, then press Start Playback. Pressing apply while playing will apply modified settings.

Press space when player is focused to play, useful if you've toggled fullscreen. Arrow keys to seek.

Recording

Make the browser window fullscreen (F11). It's optimized for a 1920x1080 screen at the minimum.

Do a screen/window capture and crop to 1280x720 top left.

Record at a high bitrate.

twitch-vod-chat's People

Contributors

Stargazers

Watchers

Forkers

marisradu marco-selenati nicolasseiler migeru-san

twitch-vod-chat's Issues

Stop button isn't working

Stop button pauses chat but not the video. Resuming is only possible via progress bar.
Also spacebar does nothing regardless if focused/fullscreen or not.

Twitch Chat Downloader

Hi, I just found this repo!

Twitch Chat Downloader switched to New Twitch API for video data, which makes it incompatible with your parsing.

TCD is now available via pip install tcd and to download json data, you'd run tcd -v {id} --format json.

It seems the emotes showing is broken

If I tick the Emotes in the Chat style box, only those only emotes chats will be showed:

After cancel Emotes it's working but without emotes...

Vod Chat not working anymore (LivesteamDVR)

Hello,

Using LivesteamDVR on unraid.

Since a short time when using the inbuild VODPlayer, the chat is not working anymore. I only see the latest frame of the chat and nothing more.

When setting chat delay to 0 or to the capture difference it does not make any difference.

Here you can see the beginning of the vod, but the chat is showing the goodby texts (ending of the stream)

Can not find something about this in the logs.

2022-12-26.log

Older Vods hower do work.

The top folder is showing a new VOD, where the chat doesn't work. The lower folder is showing a older VOD where the chat does work.

Hoping I give you enough info.

Thanks for this amazing project

[Suggestion] Make usage of the full page width.

Using this with TwitchAutomator/LiveStreamDVR.

With minimal mode here, but without it it's the exact same: there's so much free space not being used and I don't have a way of using it.

Ultrawide also doesn't do anything besides removing the top space from what it seems.

Either make a setting to use the full page width or change the default behavior all together.

Another point is the fullscreen button doesn't do anything.

Resize video to fullscreen

Is it possible to resize video to screen size if video resolution is not the same as screen?

BTTV FFZ emotes

Is it possible to add BTTV and FFZ emotes?

[Suggestion] OBS browser feature?

Will it be possible to make this for the OBS browser? It could be a nice interaction with the live chat

Chat not working when BTTV fails to load

Not all channels have a BTTV-channel.

failed to load bttvchannel 
Object { id: "5b7333fd4beb943561eafb43", bots: [], avatar: "https://static-cdn.jtvnw.net/jtv_user_pictures/e7986b3a-7c01-4fe2-b767-3de59c301387-profile_image-300x300.png", channelEmotes: [], sharedEmotes: (99) […] }
index.e69eff3a.js:5:9199
    fetchEmotes https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:5

When that happens no chat is displayed and the console is spammed with this during playback:

Uncaught (in promise) TypeError: this.emotes is not iterable
    parseComment https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:5
    tick https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:5
    setInterval handler*startTicker https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:5
    play https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:5
    startPlayback https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:5
    nt https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:1
    Se https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:1
    zr https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:1
    1 https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:5
    nt https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:1
    Se https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:1
    s https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:1
index.e69eff3a.js:5:11807
    tick https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:5
    InterpretGeneratorResume self-hosted:1458
    AsyncFunctionNext self-hosted:668
    (Async: async)
    tick self-hosted:1151
    tick self-hosted:1151
    (Async: setInterval handler)
    startTicker https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:5
    startTicker self-hosted:1151
    play https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:5
    play self-hosted:1151
    startPlayback https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:5
    InterpretGeneratorResume self-hosted:1458
    AsyncFunctionNext self-hosted:668
    (Async: async)
    startPlayback self-hosted:1151
    nt https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:1
    Se https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:1
    zr https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:1
    zr self-hosted:1198
    1 https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:5
    nt https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:1
    Se https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:1
    s https:/vodrecorder.domain/vodplayer/assets/index.e69eff3a.js:1

Empty white page

I've cloned this and run yarn install and yarn run build but the only thing I'm getting is an empty white page.
This is the sourcecode of the page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>twitch-vod-chat</title>

    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <script src="https://player.twitch.tv/js/embed/v1.js"></script>
    <script src="https://www.youtube.com/iframe_api"></script>
    <link href="https://cdn.betterttv.net/betterttv.css" type="text/css" rel="stylesheet" />
    <script type="module" crossorigin src="/assets/index.e69eff3a.js"></script>
    <link rel="stylesheet" href="/assets/index.c993bb63.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but twitch-vod-chat doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    
  </body>
</html>

Multiple issues with the player.

So I have chat capture turned on and while I try to play a record using the chat capture, no chat at all appears.

Chat replay not working as intended

I tried to play a vod + chat downloaded with TwitchAutomator, the chat is not being show correctly, it only shows messages with ONE emote, no text or any message with more than one emote in it.

[Suggestion] Chat at side instead of in video

I have a suggestion for an option;
A toggle to put the chat on the side next to the video instead of in the video. There is a fork which claims to do this, but it doesn't work for me, but I don't have the technical knowhow to do it myself.

More chat issues with the player.

I tried out a recording with the chat downloaded (not sure if this happens too with captured chat) and the chat messages just works sometimes. I'll try to give more info on what happened and what I did:

So I open the player via LiveStreamDVR with downloaded chat, set chat to not be overlaid, seek the video to a middle point (to avoid intros on the stream) and the chat was properly working. After couple of minutes the chat froze, no more chat messages appeared so I clicked "reset chat" which only cleared the stuck messages from the screen and nothing more.

After that I tried out to seek the video back to a place where the chat messages were working previously and they didn't work anymore this time.

All this without refreshing the page.

Another issue I found out is at the start of the video, the chat seems to never work. I confirmed that the messages are on the chat.json file but they never appear at the first couple of minutes, for some reason.