From 6249655ed9380a2e7e4bdec1a40a392b59537748 Mon Sep 17 00:00:00 2001 From: lividcomet Date: Wed, 30 Sep 2020 07:48:04 +0200 Subject: [PATCH 1/2] Updated with Windows code for python HTTP server --- readme.md | 115 +++++++++++++++++++++++++++++------------------------- 1 file changed, 62 insertions(+), 53 deletions(-) diff --git a/readme.md b/readme.md index 15ba15e..fc600f1 100644 --- a/readme.md +++ b/readme.md @@ -9,7 +9,7 @@ open to experimental ways to **increase followers** on your stream. And you don't want to spend money, because reasons and the internet should be free! -## Installation Guide: OBS Subtitles for Twitch TV +## Installation Guide: OBS Subtitles for Twitch TV > **Start here:** https://www.pubnub.com/developers/twitch-tv-obs-subtitles/ @@ -20,7 +20,6 @@ To install Subtitles in OBS for Twitch, start by visiting the URL above. ![Step 2](https://i.imgur.com/MFhOheM.png) ![Step 3](https://i.imgur.com/s0vvMlC.gif) - ## Parameters and Settings It's easy to change various aspects of the voice capture system including @@ -38,11 +37,11 @@ https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?language=es-U You can change the language to any language code. The following are just a few examples: - - English: `language=en-US` - - Spanish: `language=es` - - Mandarin: `language=zh` - - German: `language=de` - - Japanese: `language=ja` +- English: `language=en-US` +- Spanish: `language=es` +- Mandarin: `language=zh` +- German: `language=de` +- Japanese: `language=ja` More language codes shown here: https://www.w3schools.com/tags/ref_language_codes.asp @@ -72,23 +71,21 @@ The above link will downgrade your voice-to-text to the old algorithm. You can set the font display style using any valid CSS modifiers. Some defaults are available for you. - - Set Style: `?style=CSS_HERE` - - Set Background White: `?style=background:%23white` - - Set Font Red: `?style=color:%23red` - - Set Text Padding: `?style=padding:10px` +- Set Style: `?style=CSS_HERE` +- Set Background White: `?style=background:%23white` +- Set Font Red: `?style=color:%23red` +- Set Text Padding: `?style=padding:10px` Here are some pre-built options to try: - - Clean: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1588208805983537980353&style=color%3Argba(0%2C0%2C0%2C.9)%3Btext-shadow%3A0%200%205px%20%23fff - - CC Caption: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?style=background%3A%23000%3Bfont-weight%3A600%3Btext-transform%3Auppercase%3Btext-shadow%3Anone%3Bpadding%3A10px - +- Clean: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1588208805983537980353&style=color%3Argba(0%2C0%2C0%2C.9)%3Btext-shadow%3A0%200%205px%20%23fff +- CC Caption: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?style=background%3A%23000%3Bfont-weight%3A600%3Btext-transform%3Auppercase%3Btext-shadow%3Anone%3Bpadding%3A10px ![closed-caption](https://user-images.githubusercontent.com/45214/81862816-1fe75300-951f-11ea-9cde-ebd7ad881654.gif) - - - - Blue: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1588208805983537980353&style=color%3A%2300f%3Bfont-weight%3A400%3Btext-shadow%3A0%200%205px%20%23fff - - Rainbow: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1588208805983537980353&style=background%3Alinear-gradient(to%20right%2Corange%2C%23ff0%2Cgreen%2C%230ff%2C%2300f%2Cviolet)%20100%25%3Bfont-weight%3A800%3B-webkit-background-clip%3Atext%3B-webkit-text-fill-color%3Atransparent%3Btext-shadow%3Anone - + +- Blue: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1588208805983537980353&style=color%3A%2300f%3Bfont-weight%3A400%3Btext-shadow%3A0%200%205px%20%23fff +- Rainbow: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1588208805983537980353&style=background%3Alinear-gradient(to%20right%2Corange%2C%23ff0%2Cgreen%2C%230ff%2C%2300f%2Cviolet)%20100%25%3Bfont-weight%3A800%3B-webkit-background-clip%3Atext%3B-webkit-text-fill-color%3Atransparent%3Btext-shadow%3Anone + ![rainbow](https://user-images.githubusercontent.com/45214/81860401-8b2f2600-951b-11ea-9a0d-a7513dd63f20.gif) Sky is the limit! @@ -103,10 +100,10 @@ You can change this by setting the following: > Don't go lower than 2 seconds. It will cause unexpected problems for you. - - Clear Text after 2 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=2 - - Clear Text after 5 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=5 - - Clear Text after 10 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=10 - - Clear Text after 100 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=100 +- Clear Text after 2 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=2 +- Clear Text after 5 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=5 +- Clear Text after 10 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=10 +- Clear Text after 100 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=100 And so on, you can change the value to any valid number. Just don't go lower than 2 seconds. @@ -117,9 +114,9 @@ Using the default of 4 seconds is recommended. By default the intro text is set to "Start talking." You can change this value to anything you'd like: - - Intro Text BLANK: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?introtext=%20 - - Intro Text "Hello!": https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?introtext=Hello! - - Intro Text "Whatup": https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?introtext=Whatup +- Intro Text BLANK: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?introtext=%20 +- Intro Text "Hello!": https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?introtext=Hello! +- Intro Text "Whatup": https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?introtext=Whatup ## Display Last Two Lines @@ -139,19 +136,19 @@ For example you may wish to fine-tune the crop effect using the calc operator: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?style=background%3A%23000%3Bfont-weight%3A600%3Btext-transform%3Auppercase%3Btext-shadow%3Anone%3Bpadding%3A10px;bottom%3Acalc(100vh%20%2B%201.3em) -Essentially you can add the CSS in the URL, or you can +Essentially you can add the CSS in the URL, or you can customize the look and feel by [forking the repo and editing the HTML directly](https://github.com/stephenlb/twitch-tv-obs-subtitles/fork). ## Nyan Cat Subtitles -Nyan Cat helps you with closed captioning. +Nyan Cat helps you with closed captioning. Nyan Cat subtitles, just in case. ![nyan-preview](https://user-images.githubusercontent.com/45214/81875360-f76a5380-9534-11ea-9600-3eb4eec0a8f6.gif) > Try it here: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles-nyan.html?channel=MYCHANNEL -Since **Twitch Subtitles** and Streaming Closed Captions are open source and free tool, +Since **Twitch Subtitles** and Streaming Closed Captions are open source and free tool, it's open to fully customize the display any way you like. ## Set Max Words @@ -173,7 +170,7 @@ https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?mic=off&subke Note that you need to specify the Subscribe Key and Channel, while excluding the Publish Key. -This will prevent others from speaking over your output. +This will prevent others from speaking over your output. ## Subscribe and Publish Keys @@ -184,19 +181,19 @@ You can get a new key at https://dashboard.pubnub.com/ https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?mic=off&subkey=sub-c-XXXX&pubkey=pub-c-XXX&channel=XXXX - ## Running Twitch.TV Subtitles from Local Files on your Hard Drive -If you've downloaded this repository, made changes and want +If you've downloaded this repository, made changes and want them to be available in your OBS, you need to follow these instructions. Due to security, you need to run an HTTP Server for OBS to access your local files. You'll do this by opening a terminal window and running a Simple HTTP server. -Attempting to run Twitch Subtitles without an HTTP server will result in a -non-working page with *"Start talking."* permanently stuck on the viewport. +Attempting to run Twitch Subtitles without an HTTP server will result in a +non-working page with _"Start talking."_ permanently stuck on the viewport. #### 1.) Download and Install Python: https://www.python.org/downloads/ -#### 2.) After you've installed Python, open your terminal and start the +#### 2.) After you've installed Python, open your terminal and start the + Python Simple HTTP Server in the same director as the Twitch.TV Subtitles: > Windows: Press `WinKey+R` type `cmd` and press "Enter" to open a Command Prompt @@ -205,6 +202,15 @@ Python Simple HTTP Server in the same director as the Twitch.TV Subtitles: Navigate to the Twitch TV Subtitles directory using `cd` command. +For Windows machines use: + +```shell +cd twitch-tv-obs-subtitles +python -m http.server 8000 +``` + +For Mac machines use: + ```shell cd twitch-tv-obs-subtitles python -m SimpleHTTPServer 8080 @@ -233,15 +239,17 @@ https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c- **`http://0.0.0.0:8080/subtitles.html`**. Your final URL will look like: + ```shell http://0.0.0.0:8080/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1552687539739502028833&style=background%3Ablack%3Bfont-weight%3A600%3Btext-transform%3Auppercase%3Btext-shadow%3Anone%3Bpadding%3A10px%3B ``` #### 5.) Past the Final URL into OBS. + Note that your final URL will differ from the one shown above. That's it! -If you've made a mistake start over from the beginning +If you've made a mistake start over from the beginning it won't hurt to repeat any of the steps. However you may run into issues. That's why we've included a second option that may work better for you. @@ -249,24 +257,25 @@ That's why we've included a second option that may work better for you. ## Alternate: Running Twitch.TV Subtitles from Local Files on your Hard Drive > While this method is easier, it is not the preferred method. -This method introduces an opportunity for someone else to take -over your subtitles mid-stream. -It is unlikely that someone will know how to do this, -however it is easy for a hacker. -If you want to avoid a hacker taking over your subtitles, -use the secure method: -[Secure Method](#running-twitchtv-subtitles-from-local-files-on-your-hard-drive). +> This method introduces an opportunity for someone else to take +> over your subtitles mid-stream. +> It is unlikely that someone will know how to do this, +> however it is easy for a hacker. +> If you want to avoid a hacker taking over your subtitles, +> use the secure method: +> [Secure Method](#running-twitchtv-subtitles-from-local-files-on-your-hard-drive). > Also if you're using [Subtitles Twitch.TV Page](https://www.pubnub.com/developers/twitch-tv-obs-subtitles/) -directly off the PubNub website, then your are secured automatically. +> directly off the PubNub website, then your are secured automatically. #### 1.) Edit the file `js/username.js`. + It will look like this: ```js function username() { - return ""; // <-- Fill in your username - // example: return "ninja"; + return ""; // <-- Fill in your username + // example: return "ninja"; } ``` @@ -274,8 +283,8 @@ And type in your Twitch Username like this: ```js function username() { - return "MY_TWITCH_ID_HERE"; // <-- Fill in your username - // example: return "ninja"; + return "MY_TWITCH_ID_HERE"; // <-- Fill in your username + // example: return "ninja"; } ``` @@ -289,24 +298,25 @@ https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?channel=15526 #### 3.) Modify the copied URL from Step 2 by replacing -**`channel=1552687539739502028833`** with +**`channel=1552687539739502028833`** with **`channel=MY_TWITCH_ID_HERE`**. -#### 4.) Point your Chrome Browser to: +#### 4.) Point your Chrome Browser to: ```shell https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?channel=MY_TWITCH_ID_HERE&subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&style=background%3Ablack%3Bfont-weight%3A600%3Btext-transform%3Auppercase%3Btext-shadow%3Anone%3Bpadding%3A10px%3B ``` > Warning! Make sure only **one Twitch.TV Subtile Page** is open. -If they are others, they will block your local page. +> If they are others, they will block your local page. #### 5.) Add a new browser source in OBS. #### 6.) Check `Local file` in OBS Browser config window. #### 7.) Click `Browse` button and select `subtitles.html` + found in your folder `twitch-tv-obs-subtitles`. That's it! @@ -321,7 +331,6 @@ is usually not written in the same coding languages as your streaming application, a translator is needed to make it possible for both to communicate with each other. - ## Open Captions Technically this software is considered as `Open Captions`, @@ -342,7 +351,7 @@ You can see a live version of the ## See more voice app projects -We have built several more apps using the +We have built several more apps using the [Spoken NPM Package](https://www.npmjs.com/package/spoken). Check them out below. From 09b858a09ce97287c90cdf84f3fac19ab99dfd00 Mon Sep 17 00:00:00 2001 From: lividcomet Date: Wed, 30 Sep 2020 07:51:29 +0200 Subject: [PATCH 2/2] Formatting changes --- readme.md | 106 +++++++++++++++++++++++++++--------------------------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/readme.md b/readme.md index fc600f1..98a44ef 100644 --- a/readme.md +++ b/readme.md @@ -9,7 +9,7 @@ open to experimental ways to **increase followers** on your stream. And you don't want to spend money, because reasons and the internet should be free! -## Installation Guide: OBS Subtitles for Twitch TV +## Installation Guide: OBS Subtitles for Twitch TV > **Start here:** https://www.pubnub.com/developers/twitch-tv-obs-subtitles/ @@ -20,6 +20,7 @@ To install Subtitles in OBS for Twitch, start by visiting the URL above. ![Step 2](https://i.imgur.com/MFhOheM.png) ![Step 3](https://i.imgur.com/s0vvMlC.gif) + ## Parameters and Settings It's easy to change various aspects of the voice capture system including @@ -37,11 +38,11 @@ https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?language=es-U You can change the language to any language code. The following are just a few examples: -- English: `language=en-US` -- Spanish: `language=es` -- Mandarin: `language=zh` -- German: `language=de` -- Japanese: `language=ja` + - English: `language=en-US` + - Spanish: `language=es` + - Mandarin: `language=zh` + - German: `language=de` + - Japanese: `language=ja` More language codes shown here: https://www.w3schools.com/tags/ref_language_codes.asp @@ -71,21 +72,23 @@ The above link will downgrade your voice-to-text to the old algorithm. You can set the font display style using any valid CSS modifiers. Some defaults are available for you. -- Set Style: `?style=CSS_HERE` -- Set Background White: `?style=background:%23white` -- Set Font Red: `?style=color:%23red` -- Set Text Padding: `?style=padding:10px` + - Set Style: `?style=CSS_HERE` + - Set Background White: `?style=background:%23white` + - Set Font Red: `?style=color:%23red` + - Set Text Padding: `?style=padding:10px` Here are some pre-built options to try: -- Clean: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1588208805983537980353&style=color%3Argba(0%2C0%2C0%2C.9)%3Btext-shadow%3A0%200%205px%20%23fff -- CC Caption: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?style=background%3A%23000%3Bfont-weight%3A600%3Btext-transform%3Auppercase%3Btext-shadow%3Anone%3Bpadding%3A10px - -![closed-caption](https://user-images.githubusercontent.com/45214/81862816-1fe75300-951f-11ea-9cde-ebd7ad881654.gif) + - Clean: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1588208805983537980353&style=color%3Argba(0%2C0%2C0%2C.9)%3Btext-shadow%3A0%200%205px%20%23fff + - CC Caption: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?style=background%3A%23000%3Bfont-weight%3A600%3Btext-transform%3Auppercase%3Btext-shadow%3Anone%3Bpadding%3A10px -- Blue: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1588208805983537980353&style=color%3A%2300f%3Bfont-weight%3A400%3Btext-shadow%3A0%200%205px%20%23fff -- Rainbow: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1588208805983537980353&style=background%3Alinear-gradient(to%20right%2Corange%2C%23ff0%2Cgreen%2C%230ff%2C%2300f%2Cviolet)%20100%25%3Bfont-weight%3A800%3B-webkit-background-clip%3Atext%3B-webkit-text-fill-color%3Atransparent%3Btext-shadow%3Anone +![closed-caption](https://user-images.githubusercontent.com/45214/81862816-1fe75300-951f-11ea-9cde-ebd7ad881654.gif) + + + - Blue: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1588208805983537980353&style=color%3A%2300f%3Bfont-weight%3A400%3Btext-shadow%3A0%200%205px%20%23fff + - Rainbow: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1588208805983537980353&style=background%3Alinear-gradient(to%20right%2Corange%2C%23ff0%2Cgreen%2C%230ff%2C%2300f%2Cviolet)%20100%25%3Bfont-weight%3A800%3B-webkit-background-clip%3Atext%3B-webkit-text-fill-color%3Atransparent%3Btext-shadow%3Anone + ![rainbow](https://user-images.githubusercontent.com/45214/81860401-8b2f2600-951b-11ea-9a0d-a7513dd63f20.gif) Sky is the limit! @@ -100,10 +103,10 @@ You can change this by setting the following: > Don't go lower than 2 seconds. It will cause unexpected problems for you. -- Clear Text after 2 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=2 -- Clear Text after 5 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=5 -- Clear Text after 10 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=10 -- Clear Text after 100 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=100 + - Clear Text after 2 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=2 + - Clear Text after 5 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=5 + - Clear Text after 10 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=10 + - Clear Text after 100 Seconds: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?cleartime=100 And so on, you can change the value to any valid number. Just don't go lower than 2 seconds. @@ -114,9 +117,9 @@ Using the default of 4 seconds is recommended. By default the intro text is set to "Start talking." You can change this value to anything you'd like: -- Intro Text BLANK: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?introtext=%20 -- Intro Text "Hello!": https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?introtext=Hello! -- Intro Text "Whatup": https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?introtext=Whatup + - Intro Text BLANK: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?introtext=%20 + - Intro Text "Hello!": https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?introtext=Hello! + - Intro Text "Whatup": https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?introtext=Whatup ## Display Last Two Lines @@ -136,19 +139,19 @@ For example you may wish to fine-tune the crop effect using the calc operator: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?style=background%3A%23000%3Bfont-weight%3A600%3Btext-transform%3Auppercase%3Btext-shadow%3Anone%3Bpadding%3A10px;bottom%3Acalc(100vh%20%2B%201.3em) -Essentially you can add the CSS in the URL, or you can +Essentially you can add the CSS in the URL, or you can customize the look and feel by [forking the repo and editing the HTML directly](https://github.com/stephenlb/twitch-tv-obs-subtitles/fork). ## Nyan Cat Subtitles -Nyan Cat helps you with closed captioning. +Nyan Cat helps you with closed captioning. Nyan Cat subtitles, just in case. ![nyan-preview](https://user-images.githubusercontent.com/45214/81875360-f76a5380-9534-11ea-9600-3eb4eec0a8f6.gif) > Try it here: https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles-nyan.html?channel=MYCHANNEL -Since **Twitch Subtitles** and Streaming Closed Captions are open source and free tool, +Since **Twitch Subtitles** and Streaming Closed Captions are open source and free tool, it's open to fully customize the display any way you like. ## Set Max Words @@ -170,7 +173,7 @@ https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?mic=off&subke Note that you need to specify the Subscribe Key and Channel, while excluding the Publish Key. -This will prevent others from speaking over your output. +This will prevent others from speaking over your output. ## Subscribe and Publish Keys @@ -181,19 +184,19 @@ You can get a new key at https://dashboard.pubnub.com/ https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?mic=off&subkey=sub-c-XXXX&pubkey=pub-c-XXX&channel=XXXX + ## Running Twitch.TV Subtitles from Local Files on your Hard Drive -If you've downloaded this repository, made changes and want +If you've downloaded this repository, made changes and want them to be available in your OBS, you need to follow these instructions. Due to security, you need to run an HTTP Server for OBS to access your local files. You'll do this by opening a terminal window and running a Simple HTTP server. -Attempting to run Twitch Subtitles without an HTTP server will result in a -non-working page with _"Start talking."_ permanently stuck on the viewport. +Attempting to run Twitch Subtitles without an HTTP server will result in a +non-working page with *"Start talking."* permanently stuck on the viewport. #### 1.) Download and Install Python: https://www.python.org/downloads/ -#### 2.) After you've installed Python, open your terminal and start the - +#### 2.) After you've installed Python, open your terminal and start the Python Simple HTTP Server in the same director as the Twitch.TV Subtitles: > Windows: Press `WinKey+R` type `cmd` and press "Enter" to open a Command Prompt @@ -239,17 +242,15 @@ https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?subkey=sub-c- **`http://0.0.0.0:8080/subtitles.html`**. Your final URL will look like: - ```shell http://0.0.0.0:8080/subtitles.html?subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&channel=1552687539739502028833&style=background%3Ablack%3Bfont-weight%3A600%3Btext-transform%3Auppercase%3Btext-shadow%3Anone%3Bpadding%3A10px%3B ``` #### 5.) Past the Final URL into OBS. - Note that your final URL will differ from the one shown above. That's it! -If you've made a mistake start over from the beginning +If you've made a mistake start over from the beginning it won't hurt to repeat any of the steps. However you may run into issues. That's why we've included a second option that may work better for you. @@ -257,25 +258,24 @@ That's why we've included a second option that may work better for you. ## Alternate: Running Twitch.TV Subtitles from Local Files on your Hard Drive > While this method is easier, it is not the preferred method. -> This method introduces an opportunity for someone else to take -> over your subtitles mid-stream. -> It is unlikely that someone will know how to do this, -> however it is easy for a hacker. -> If you want to avoid a hacker taking over your subtitles, -> use the secure method: -> [Secure Method](#running-twitchtv-subtitles-from-local-files-on-your-hard-drive). +This method introduces an opportunity for someone else to take +over your subtitles mid-stream. +It is unlikely that someone will know how to do this, +however it is easy for a hacker. +If you want to avoid a hacker taking over your subtitles, +use the secure method: +[Secure Method](#running-twitchtv-subtitles-from-local-files-on-your-hard-drive). > Also if you're using [Subtitles Twitch.TV Page](https://www.pubnub.com/developers/twitch-tv-obs-subtitles/) -> directly off the PubNub website, then your are secured automatically. +directly off the PubNub website, then your are secured automatically. #### 1.) Edit the file `js/username.js`. - It will look like this: ```js function username() { - return ""; // <-- Fill in your username - // example: return "ninja"; + return ""; // <-- Fill in your username + // example: return "ninja"; } ``` @@ -283,8 +283,8 @@ And type in your Twitch Username like this: ```js function username() { - return "MY_TWITCH_ID_HERE"; // <-- Fill in your username - // example: return "ninja"; + return "MY_TWITCH_ID_HERE"; // <-- Fill in your username + // example: return "ninja"; } ``` @@ -298,25 +298,24 @@ https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?channel=15526 #### 3.) Modify the copied URL from Step 2 by replacing -**`channel=1552687539739502028833`** with +**`channel=1552687539739502028833`** with **`channel=MY_TWITCH_ID_HERE`**. -#### 4.) Point your Chrome Browser to: +#### 4.) Point your Chrome Browser to: ```shell https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html?channel=MY_TWITCH_ID_HERE&subkey=sub-c-79b0a26a-80a9-11e8-8f4a-96bbd71e7d14&pubkey=pub-c-fd9b97a4-7b78-4ae1-a21e-3614f2b6debe&style=background%3Ablack%3Bfont-weight%3A600%3Btext-transform%3Auppercase%3Btext-shadow%3Anone%3Bpadding%3A10px%3B ``` > Warning! Make sure only **one Twitch.TV Subtile Page** is open. -> If they are others, they will block your local page. +If they are others, they will block your local page. #### 5.) Add a new browser source in OBS. #### 6.) Check `Local file` in OBS Browser config window. #### 7.) Click `Browse` button and select `subtitles.html` - found in your folder `twitch-tv-obs-subtitles`. That's it! @@ -331,6 +330,7 @@ is usually not written in the same coding languages as your streaming application, a translator is needed to make it possible for both to communicate with each other. + ## Open Captions Technically this software is considered as `Open Captions`, @@ -351,7 +351,7 @@ You can see a live version of the ## See more voice app projects -We have built several more apps using the +We have built several more apps using the [Spoken NPM Package](https://www.npmjs.com/package/spoken). Check them out below.