Youtube-Video-Transcript
A TypeScript Version of Youtube Transcript Api
If you want to use it in node js without typescript you need to specify "type" : "module" in your package.json
Table of Contents
- Description
- Installation
2.1 Server Side
2.2 Client Side
2.3 Setup Proxy
2.4 Setup Cdn
- Example
3.1 Fetch Transcript of a video
3.1.1 Server Side
3.1.2 Client Side
3.1.3 Data
3.2 Fetech Transcript in multiple language
3.2.1 Server Side
3.2.2 Client Side
3.2.3 Data
3.3 Fetch Transcript of multiple video
3.3.1 Server Side
3.3.2 Client Side
3.3.3 Data
3.4 Useful Ressource
3.4.1 Server Side
3.4.2 Client Side
3.4.3 Other Functions
- License
Description
This repository provides a simple and efficient way to interact with the YouTube Transcript API. It is designed to fetch transcripts from YouTube videos, with support for both single and multiple video transcripts.
Installation
Run this command to install it
npm i youtube-video-transcript
Server Side
Import it in node js / deno like this
import Transcriptor from 'youtube-video-transcript';
Client Side
If you want to use it in your browser
<!DOCTYPE html>
<html>
<head>
<title>Import Inspector</title>
</head>
<body></body>
<script type="module">
import Inspector from '../dist/index.mjs';
</script>
</html>
Setup Proxy
You also need to setup a proxy (Hello Cors), but don't worry i provide you a small handler to do it
Create a new file server.js
Copy / Paste the following code
import { Server } from 'youtube-video-transcript';
Server.default.listen(8080);
Then run node server.js
Setup Cdn
All the following exemple will use the file mjs in local assuming that you have run the npm install command but if you don't want to it you can use the following
<script type="module">
import Transcriptor from 'https://cdn.jsdelivr.net/npm/youtube-video-transcript/dist/index.mjs';
</script>
But you will need to install a proxy like tiny-cors-proxy to bypass the cors option
You can install this package via npm:
npm install tiny-cors-proxy
Then create a new file server.js and paste the following snipset :
import Server from 'tiny-cors-proxy';
Server.listen(8080);
Then run node server.js
Example
Fetch Transcript of a video in one language
Server Side
Quickly import and translate the video of your choice !
import Transcriptor from 'youtube-video-transcript';
await Transcriptor.getTranscript('url or video id', ['en'])
Client Side
If you are working directly in your browser (you must setup a proxy server)
<!DOCTYPE html>
<html>
<head>
<title>Fetch Transcript of a video in specific language</title>
</head>
<body>
<button>Fetch Transcripts</button>
</body>
<script type="module">
import Inspector from '../dist/index.mjs';
document.querySelector('button').addEventListener('click', async () => {
const transcriptions = await Transcriptor.setProxy({url : 'http://localhost:8080/'}).getTranscript('url or video id', ['en']);
});
</script>
</html>
Data
You will receive something like that
{
"language" : "en",
"type" : "auto",
"data" : [
{
"start": 0,
"duration": 6.339,
"text": "Hello everyone thanks you so much for the last video"
}
]
}
Fetch Transcript of a video in multiple language
Server Side
It's also possible to fetch transcripts in multiple language
import Transcriptor from 'youtube-video-transcript';
await Transcriptor.getTranscript('url or video id', ['en', 'es'])
Client Side
If you are working directly in your browser (you must setup a proxy server)
<!DOCTYPE html>
<html>
<head>
<title>Fetch Transcript of a video in specific language</title>
</head>
<body>
<button>Fetch Transcripts</button>
</body>
<script type="module">
import Inspector from '../dist/index.mjs';
document.querySelector('button').addEventListener('click', async () => {
const transcriptions = await Transcriptor.setProxy({url : 'http://localhost:8080/'}).getTranscript('url or video id', ['en', 'fr']);
});
</script>
</html>
Data
You will receive something like that
[
{
"language" : "en",
"type" : "auto",
"data" : [
{
"start": 0,
"duration": 6.339,
"text": "Hello everyone thanks you so much for the last video"
}
]
},
{
"language" : "es",
"type" : "manual",
"data" : [
{
"start": 0,
"duration": 5.439,
"text": "¡Hola a todos, muchas gracias por el último video!"
}
]
}
]
Fetch Transcript of multiple video in a specific language
Server Side
If you want you can download multiple transcripts from different videos
import Transcriptor from 'youtube-video-transcript';
await Transcriptor.getTranscript(['url video 1', 'url video 2'], ['en'])
Client Side
If you are working directly in your browser (you must setup a proxy server)
<!DOCTYPE html>
<html>
<head>
<title>Fetch Transcript of a video in specific language</title>
</head>
<body>
<button>Fetch Transcripts</button>
</body>
<script type="module">
import Inspector from '../dist/index.mjs';
document.querySelector('button').addEventListener('click', async () => {
const transcriptions = await Transcriptor.setProxy({url : 'http://localhost:8080/'}).getTranscript(['url or video id 1', 'url of video id 2'], ['en']);
});
</script>
</html>
Data
You will receive something like that
[
{
"language" : "en",
"type" : "auto",
"data" : [
{
"start": 0,
"duration": 6.339,
"text": "Hello everyone thanks you so much for the last video"
}
]
},
{
"language" : "en",
"type" : "auto",
"data" : [
{
"start": 0,
"duration": 1.219,
"text": "Welcome everybody !"
}
]
}
]
Useful ressources
Sometimes you just wan to fetch all the transcripts available
Server Side
If you want you can download multiple transcripts from different videos
import Transcriptor from 'youtube-video-transcript';
const listTranscripts = await Transcriptor.listTranscripts('video url')
Client Side
If you are working directly in your browser (you must setup a proxy server)
<!DOCTYPE html>
<html>
<head>
<title>Fetch Transcript of a video in specific language</title>
</head>
<body>
<button>Fetch Transcripts</button>
</body>
<script type="module">
import Inspector from '../dist/index.mjs';
document.querySelector('button').addEventListener('click', async () => {
const transcriptions = await Transcriptor.setProxy({url : 'http://localhost:8080/'}).listTranscripts('video url')
});
</script>
</html>
Other functions
To get all the transcripts as an array
listTranscripts.list()
Filter to only have the transcriptions who are generated by AI form youtube
listTranscripts.getAuto()
Filter to only have the transcriptions who are manually add by youtube creator
listTranscripts.getManual()
Filter to only have the transcriptions in some specific languages
listTranscripts.getMultipleLanguages(['en', 'fr', 'es'])
License
This project is licensed under the MIT license