Most VODs on Twitch disappear sooner or later. Either because their availability expires or because they are explicitly deleted. So if you haven't finished watching the VOD in time, the content is gone. You can download the video, but what about the chat? "Twitch VOD Offline Viewer" solves this problem. Just download video + chat and play it just like a regular VOD at any time, even offline¹.
¹ Emotes in chat will only appear when images can be downloaded. So to see emotes, you still have to have an internet connection.
Node.js runtime
Recommendation: Use TwitchDownloader to download the desired video, see "VOD Download" tab. But any other tool to download the VOD will do too.
Any codec that is supported by your browser's tag.
Recommendation: Use TwitchDownloader to download the corresponding chat, see "Chat Download" tab. Select "Text" and "Relative".
If you generate the chat file by other means, the expected format is:
[0:00:01] Alice: hi everyone HeyGuys [0:00:01] John: PogChamp [0:00:03] Bob: hey @Alice [0:00:07] Alice: nice to see you, Bob
Timestamp in square brackets (hour can be one or two digits)
Space
Username, followed by a colon
Space
Message
Newline
Move the downloaded video file to /stream/video.mp4. (Replace the dummy file.)
Move the downloaded chat file to /stream/chat.txt. (Replace the dummy file.)
Run node chat.mjs to start a Node.js HTTP server that will serve chat messages in your browser.
Open index.html in your favorite browser.
Pause anytime. The play position is remembered and restored automatically.
Use the watch.bat to resume (does step 4 and 5 for you).
In order to see channel specific emotes, you will need to specify the channel ID. There are many ways to retrieve this information, for example using the Twitch Channel ID Finder.
These emotes will be downloaded automatically whenever the chat server starts. Make sure you adjust the CHANNEL_ID variable at the top in the chat.mjs source file before running the server.
Global Twitch emotes are provided by default. However, exclusive streamer emotes must be provided manually due to requiring OAuth to access the Twitch API. Once authenticated, make the request and save the endpoint's response as /emotes/. Make sure you adjust the CHANNEL_ID variable at the top in the chat.mjs source file before running the server.
Create an app via Twitch developer console. This will yield a "Client-ID" and a "Client-Secret".
Request an access token using your client_id and client_secret:
curl -L 'https://id.twitch.tv/oauth2/token'
-H 'Content-Type: application/x-www-form-urlencoded'
-d 'grant_type=client_credentials'
-d 'client_id={{client_id}}'
-d 'client_secret={{client_secret}}'Store the value of access_token from the response.
Fetch the channel's ID:
curl -L 'https://api.twitch.tv/helix/users?login={{channel_name}}'
-H 'Authorization: Bearer {{access_token}}'
-H 'Client-Id: {{client_id}}'Store the value of data[0].id (channel_id) from the response.
Fetch the channel's emotes:
curl -L 'https://api.twitch.tv/helix/chat/emotes?broadcaster_id={{channel_id}}'
-H 'Authorization: Bearer {{access_token}}'
-H 'Client-Id: {{client_id}}'Save the response to the file.
If you don't care about usernames in chat, change the CHAT_USERNAMES variable in the index.html source file to false.
CHAT_USERNAMES = true | CHAT_USERNAMES = false |
|---|---|
 |  |
Brief disconnects during the live stream cause the chat log to be out of sync. To fix such an issue, you can adjust the CHAT_OFFSET variable in the index.html source file. Refresh the webpage to apply changes.
If you are using an adblock extension in your browser, such as uBlock Origin, the chat server communication might be blocked. This happens due to blocking connections from localhost. Either whitelist localhost:8787 or temporary disable the extension.
