Скачать или смотреть Subtitles on Youtube Live

We wanted to add live subtitles to our stream so people can read what we're saying as we talk. To do this, we need to capture our audio, send it to an AI service that turns speech into text, then display that text in real time on the stream, usually through OBS or any streaming tool that lets you use a browser source. I actually built a tool for this about seven years ago but forgot some of the details.

After dusting off the code and setting everything up again, I noticed the subtitles were showing up on screen, but they were kind of slow. I figured out the delay was partly because of how the subtitles were sent over the network. My original code waited to collect a few words before sending updates, which made things less snappy.

After some digging, I found the right spot in the JavaScript (in subtitles.js) and changed a line that controlled the delay. After updating and testing it, the subtitles were almost instant, which was a huge improvement. I even showed how you can change the look and position of the subtitles using CSS so they are easier to read.

If anyone wants to add this to their own stream, the code is open source, supports many languages, and works with most browser-source overlays in OBS and similar software. Now, after seven years, we fixed the lag and the subtitles finally display right away on stream.