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
- 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
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.
Run this command to install it
npm i youtube-video-transcript
Import it in node js / deno like this
import Transcriptor from 'youtube-video-transcript';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>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
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-proxyThen 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
Quickly import and translate the video of your choice !
import Transcriptor from 'youtube-video-transcript';
await Transcriptor.getTranscript('url or video id', ['en'])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>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"
}
]
}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'])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>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!"
}
]
}
]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'])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>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 !"
}
]
}
]Sometimes you just wan to fetch all the transcripts available
If you want you can download multiple transcripts from different videos
import Transcriptor from 'youtube-video-transcript';
const listTranscripts = await Transcriptor.listTranscripts('video url')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>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'])