LongCut logo

How to Get YouTube Transcripts Using Node.js (2025) | Full Guide with UI + Backend

By ProdYouTivity

Summary

Topics Covered

  • DevTools Reveals YouTube Transcript Endpoint
  • Copy Fetch Bypasses YouTube API Barriers
  • Incognito Ensures Universal Transcript Access
  • Video ID Alone Fails Without Params
  • Fetch Page Params Unlocks Any Transcript

Full Transcript

Hi everyone. So today we going to try to make a basic app that will be able to retrieve a YouTube transcript using only

the YouTube URL of your video and then get the transcript like here.

Of course we're going to do something very simple today. So it will more look like something like here. And let's

directly see how to do that. So first uh what we're going to do is go onto YouTube onto YouTube and look for a video. So in

my case of course I will search for a video of my own channel. So productivity

and here what we're going to do is open the div tool. So if you don't know how to do that, basically you just have to

press F12 or Fn plus F12 to see something like that. And from there what

you can check is this box fetch uh XHR.

So you will only have all the network query that we need for this video.

And then what we going to do is find a video that have um some subtitles because to get a transcript of a video

we need to ensure that there are some subtitles uh because uh we cannot get them otherwise uh we won't be using AI um to

get transcript in this video.

So let's directly see how to get them.

So let's say I for example click on this video that explain how to remove shorts using productivity on YouTube.

And from there basically what we can see is if we scroll down a bit yeah here we have something called a transcription.

So I'm French so it's written in French here but uh displays transcript in English and if I click on it as we can

see here we have the transcript and what we want to do is get this transcript and be able to display it. So when I've

clicked on that you were certainly able to see here that a query was sent

and if I click on it and deep dive we can see that we have some snippets with the text of the transcript

and what we want to do is uh retrieve all these text and passse them so we have the full transcript. So let's do

it.

So here I have my VS code. So I've

already prepared uh basic environment with uh an HTML file that will call my

server. So I've done a a pretty easy

server. So I've done a a pretty easy thing. Uh I'm only using Express here on

thing. Uh I'm only using Express here on my server to to do some queries.

And so no um what I want to do. Yeah. So here

basically I've started my server. So I

have something really easy. Basically a

very simple UI for now when I click on get transcript. Uh it doesn't retrieve

get transcript. Uh it doesn't retrieve anything. So it's calling my server

anything. So it's calling my server here. And basically it will just yeah

here. And basically it will just yeah send back this message. This is a placeholder. And what we want to do

placeholder. And what we want to do basically is get the transcript from there.

So let's go back on YouTube.

And from there, as we can see, we have our query. And so all so what we could

our query. And so all so what we could think is that we would just have to run this query on our back end on our app

just to get the transcript. So it's

partly true but not fully true and you will see why because it's not that easy.

So let's get the associated query and to do that we just have to do copy copy as fetch notjs

so that we have the query and here.

So I will just past the query here.

And also what I'm going to do for it to be easier to understand is that I am just uh going to make this body more

readable. So I'm using copilot. So I

readable. So I'm using copilot. So I

will just use copilot to do it for me.

Okay, so now that Copilot has worked for us, we have something really more readable with the request body.

Basically, we don't need that. I don't

know why he just used that. We don't

need this line. So, let's do it again.

Let's restart the server.

Okay.

get transcript. Okay. So now we have an object.

We have only an object because what we want is this object but passed as JSON.

So normally Yep. So let's stringify it

Yep. So let's stringify it the data. Let's restart the server

the data. Let's restart the server again.

And let's get it again. All right.

So now we are able to retrieve what we just saw before on the response. But

what we want is only to get the text values. So wait, as we've seen before,

values. So wait, as we've seen before, so only yeah, we have some text value

exactly here. and to parse it. So to do

exactly here. and to parse it. So to do that uh it's a basic parsing. So I will just implement the function and get you

back and just show you what this function look like.

All right. So no that's good. So

basically I have added all of that here to parse the data. So pretty basic. So you can

the data. So pretty basic. So you can just uh reuse it if you want to and in the end I will have the right

transcript. So normally so let's

transcript. So normally so let's directly try it. Oh yeah and also I just forgot to mention here I'm in incognito

mode uh because I want to ensure that when I do my call on YouTube I have uh not any cookies. So I'm not logged in

here and so I'm sure that this would work without identifying myself.

So I recommend this and yeah first I need to restart the server now that it is restarted. Let's get the transcript again. And yeah so basically

transcript again. And yeah so basically this is my transcript automatically generated by YouTube. But let's see

uh for example uh a Mr. Beast video where we should have a bigger transcript. Oh, perfect. So,

transcript. Oh, perfect. So,

and here let's get this YouTube URL. And

now let's paste it and get transcript.

And yeah, here as you can see, we still have the transcript from before.

And why that? Why that? Because normally

we should have the video ID here. So if

I go back on my server, as we can see, we have video URL and

then we retrieve the video ID here.

And here we pass the video ID into external video ID. So normally

it should work but why it's not working?

So basically it's a bit more tricky than that because it's not relying only on the video ID to get the YouTube

transcript but it also relying on this params. These params basically allow to identify the right video.

And so we need to find a way to get the right param for the right video to be sure to get the right transcript. So now

we will implement something to get these params and have the video transcript of any YouTube video only uh using the v

video URL.

And so to do that I will go back on YouTube.

Search for productivity again here. I will clean

here. I will clean this a bit.

And if I open this here, it's this query that will interest us

because in this query, if I look for params normally, wait. I believe um

wait. I believe um uh wait uh let's look for transcript endpoint

because this basically um describe the current page. Yeah. And it's give us also the params for the transcript

endpoint. And so for our transcript

endpoint. And so for our transcript endpoint as I just remind you it's here.

uh we want this param. So every time to ensure we have the right param we need first to do this query to get the param

for our video ID and then we can reuse this param to get the transcript.

So just like before, we just want to get this query

and use it in our server.

So here I will create a function.

So I'm sorry if it is not very clean.

I've just let uh copilot generate uh very basic things. So of course on your side if you want to make it cleaner you can make it cleaner and you can even ask

copilot to make it cleaner.

So here I just want a function to get the params to get video params

and based on that yeah I like what he proposed me. So I get the video ID

proposed me. So I get the video ID here. And now wait.

here. And now wait.

So here should have this.

And now I can just um get my params. So uh con uh data first is equal to

a weight this.

So again I'm going to make this body more readable. So

more readable. So let's just compile it to make it more readable.

Okay, great. And Olly is even very smart because he already has added my video ID to get the params.

So here I should have the right param.

But if I run this query as we just have seen it would get a lot of things. So me

what I just want is this part. So same

as be before I will just parse it for you guys so you can reuse it and just get the right params. So let me just

paste it.

Okay. And now I have pasted it. So I've

make I've made this little L helper that will get only the transcript endpoint. So you can just reuse it on

endpoint. So you can just reuse it on your side. And from there uh under my

your side. And from there uh under my current fetch call I would just retrieve

my JSON body and then parse all the data to retrieve only the endpoint and from there get the params. So now from there I should be able to

get the params and let's reuse it in our order

function. So here to get the transcript

function. So here to get the transcript and inside it

it's here I want to uh wait it just before so at the start of here I want to get my params so here let's do con

params great I need to make it I think.

Okay. And now I can reuse these params just like we said before. So here

and now it should work because I have my video ID. I'm retrieving first the param

video ID. I'm retrieving first the param then using it here and then normally it should work for any video. So let's

restart the server and let's try to get now the Mr. Beast

transcript and it works. So here it's in French because uh my browser is French. But if

we try another video. So for example, um I don't know uh this episode from a French uh French

channel here. Here let's get the YouTube URL. So

here. Here let's get the YouTube URL. So

as you can see here, we have the subtitles and the transcript button. So

it should work.

So if I pass the URL here, yeah, I have the transcript and now you have everything to do it the

same way on your site. And if you work a bit the UI, you can end up having something like here. So it's available for everyone to use it. If you want to

get transcript, but you can also summarize, right? And know I'm getting the Mr.

right? And know I'm getting the Mr. Beast summary, so from the video of before. And basically, if you'd like to

before. And basically, if you'd like to know how to do the same, so just drop a comment and I'll see if I can do a video

about how to do that. And also feel free to download Productivity.

Uh it's available, it's an extension available on the Chrome store. So feel

free to use it to be even more productive on YouTube. And if you liked this video, uh please drop a like button

and have a nice day. Thank you.

Loading...

Loading video analysis...