Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kauderk/youtube-browser-api

Retrieve YouTube data from your Browser
https://github.com/kauderk/youtube-browser-api

endpoint javascript scraper transcript video-data youtube youtube-api

Last synced: 3 months ago
JSON representation

Retrieve YouTube data from your Browser

Host: GitHub
URL: https://github.com/kauderk/youtube-browser-api
Owner: kauderk
License: mit
Created: 2023-02-18T15:57:41.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-04-24T06:07:51.000Z (over 1 year ago)
Last Synced: 2024-06-30T15:50:15.167Z (5 months ago)
Topics: endpoint, javascript, scraper, transcript, video-data, youtube, youtube-api
Language: TypeScript
Homepage: https://youtube-browser-api.netlify.app/
Size: 530 KB
Stars: 13
Watchers: 1
Forks: 5
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        Fully typed endpoints that parse HTML/JSON data from youtube.com from any environment.

# [YouTube Browser API](https://youtube-browser-api.netlify.app/)



## Features

- Get data on YouTube videos, channels, playlists, heatmap, chapters and more

- Get YouTube video transcripts

- Simple and user-friendly API wrapper

- Works from any environment

# Install 

```bash

npm install youtube-browser-api

```

###### `REST API is also available`

---

## Endpoints

### **[/query](https://youtube-browser-api.netlify.app/query/page)**: Extract data by passing schemas on `video ids`:

- 🔥 **You can make granular request as complex as the Javascript Object Notation allows**.[Go to the playground](https://stackblitz.com/edit/youtube-browser-api-client-playground?file=index.ts)



📚 Response Reference - Your IDE will autocomplete everthing :) 

| JSON | Interface | Source Code |

|--------|--------|--------|

| Examine the shape of the Response from a Video using a JSON Viewer | The autogenerated Interfaces for the `playerResponse, videoData, apiToken, context and transcriptMeta`| The source code from a YouTube Video website - [how to](https://www.lifewire.com/view-web-source-code-4151702) |

| [Dummy](https://jsonhero.io/j/NFIdMOFrHINJ) - [Skeleton](https://jsonhero.io/j/vrmFSgjGNLFv) | [Inspect](https://github.com/kauderk/youtube-browser-api/blob/main/src/routes/data/types/player-response.ts) | view-source:https://www.youtube.com/watch?v=s-I_dV5oY8c | 




📦 Visual Response Reference

![Excalidraw Link](https://user-images.githubusercontent.com/65237382/233469077-b5aa5878-6b1f-46c7-8d19-88809adc23b6.png) ⠀




Code </>

```ts

// typescript

import Api from 'youtube-browser-api'

const myVideoQuery = await Api.query({

    id: 'ZwLekxsSY3Y',

    schema: {

        playerResponse: {

            videoDetails: {

                title: true,

                shortDescription: true,

                thumbnail: {

                    thumbnails: {

                        1: {

                            url: true,

                            height: true,

                            width: true,

                        },

                    },

                },

            },

        },

    },

})

```

🚧 Keep in mind

**For complex queries you may** enable `tsAny: true` to bypass typechecking.
 Help to solve the issue [https://github.com/kauderk/youtube-browser-api/issues/1](https://github.com/kauderk/youtube-browser-api/issues/1)




Javascript

```js

// javascript

const partialChapterQuery = {

    id: 'ZwLekxsSY3Y',

    schema: {

        initialData: { playerOverlays: { playerOverlayRenderer: { decoratedPlayerBarRenderer: { decoratedPlayerBarRenderer: { playerBar: { multiMarkersPlayerBarRenderer: { markersMap: { 0: { value: { chapters: { 1: { chapterRenderer: { title: true, }, }, }, }, }, }, }, }, }, }, }, }, }

    },

    // optional paths|paths[]

    paths: 'playerResponse.streamingData.formats.0.url',

};

const fetchUrl = 'https://youtube-browser-api.netlify.app/query?' + new URLSearchParams(partialChapterQuery).toString()

// https://youtube-browser-api.netlify.app/query?id=ZwLekxsSY3Y&paths=playerResponse.streamingData.formats.0.url

fetch(fetchUrl)

    .then(res => res.json())

    .then(console.log)

```

---

### **[/content](https://youtube-browser-api.netlify.app/content/page)**: Extract all or some video data by a video ID.



Code </>

```ts

// typescript

import Api from 'youtube-browser-api'

const titleData = await Api.content({

    id: 'pOEyYwKtHJo',

    params: ['title'],

})

```

Javascript

```js

// javascript

const query = {

    id: 'pOEyYwKtHJo',

    params: ['title'], // ['title','suggestions','storyboard','heatmapPath','isLive','channel','description','initialData','playerResponse','apiToken','context','auto_chapters','chapters','heatmap']

}

const fetchUrl = `https://youtube-browser-api.netlify.app/content?id=${query.id}&params=` + query.params.join()

// https://youtube-browser-api.netlify.app/content?id=pOEyYwKtHJo&params=title

fetch(fetchUrl)

    .then(res => res.json())

    .then(console.log)

```

---

### **[/data](https://youtube-browser-api.netlify.app/data/page)**: Search for narrower data by passing keywords in the query parameter. For example `search`:



Code </>

```ts

// typescript

import Api from 'youtube-browser-api'

const mySearch = await Api.data('search', {

    keyword: 'AI',

    limit: 1,

})

```

Javascript

```js

// javascript

const query = {

    keyword: 'AI',

    withPlaylist: false,

    limit: 1,

    option: ''

};

const fetchUrl = 'https://youtube-browser-api.netlify.app/data/search?' + new URLSearchParams(query).toString()

// https://youtube-browser-api.netlify.app/data/search?keyword=record&withPlaylist=false&limit=1&option=

fetch(fetchUrl)

    .then(res => res.json())

    .then(console.log)

```

---

### **[/transcript](https://youtube-browser-api.netlify.app/transcript/page)**: Extract transcripts by passing video IDs in the query parameter. For example `video ids`:



Code </>

```ts

// typescript

import Api from 'youtube-browser-api'

const myTranscript = await Api.transcript({

    videoId: 'pOEyYwKtHJo',

})

```

Javascript

```js

// javascript

const query = {

    videoId: 'pOEyYwKtHJo'

};

const fetchUrl = 'https://youtube-browser-api.netlify.app/transcript?' + new URLSearchParams(query).toString()

// https://youtube-browser-api.netlify.app/transcript?videoId=pOEyYwKtHJo

fetch(fetchUrl)

    .then(res => res.json())

    .then(console.log)

```

---

## Description

This YouTube API Wrapper website offers a simple and user-friendly interface to access YouTube's API. It is tailored to the needs of developers; it provides data through fully typed endpoints. Whether you need to extract video analytics, search for specific data, or extract transcripts, the API wrapper can help you do it quickly and easily.

### License

This project is licensed under the [MIT License](https://github.com/kauderk/youtube-browser-api/blob/main/LICENSE).