Headless Browser
Как использовать Docker-образ Nstbrowser для скачивания видео с YouTube?
В этом руководстве используется образ Docker Nstbrowser для демонстрации извлечения ссылок на видео YouTube
Jan 08, 2025Luke Ulyanov
У нас невероятная скидка 90% на подписку специально для вас! Теперь вы можете наслаждаться следующими непревзойденными ценами:
- Профессиональный план: Всего **29.9/месяц** (первоначальная цена 299)
- Корпоративный план: Всего **59.9/месяц** (первоначальная цена 599)
Более того, вы будете продолжать пользоваться этими скидками с автоматическим продлением! Никаких дополнительных действий не требуется — ваша скидка будет автоматически применена при продлении.
Предварительные условия
Прежде чем мы официально начнём, нам нужно разобраться с Nstbrowser.
Nstbrowser — это мощный браузер с отпечатками пальцев, который можно настроить с использованием множества отпечатков, что помогает избежать некоторых проблем при выполнении масштабных задач по сбору данных, таких как обнаружение роботов, распознавание капчи и блокировка IP-адресов, и эффективно предотвращает идентификацию и отслеживание посещаемых сайтов.
Сначала нам нужно получить API Key в Nstbrowser.
Шаг 1. Загрузка образа Docker Nstbrowser
Bash
docker pull docker.io/nstbrowser/browserless:latestШаг 2. Запуск контейнера
Bash
docker run -d -it \
-e TOKEN="ВАШ API KEY" \
-p 8848:8848 \
--name nstbrowserless \
nstbrowser/browserless:latestШаг 3. Создание скрипта для сбора данных
Здесь для демонстрации используется puppeteer-core
- Установка
puppeteer-core:
Bash
# pnpm
pnpm i puppeteer-core
# yarn
yarn add puppeteer-core
# npm
npm i --save puppeteer-core- Подготовка конфигурации Docker для Nstbrowser
Здесь приведён лишь частичный список конфигураций. Полный список конфигураций см. в документации по API Nstbrowser: https://apidocs.nstbrowser.io/api-10293510.
JavaScript
async function start() {
const config = {
"name": "testProfile",
"platform": "windows",
"kernel": "chromium",
// "proxy": "http://127.0.0.1:8000", //Nstbrowser Docker поддерживает использование прокси для сетевого доступа
// "doProxyChecking": false,
// "fingerprint": { // настройка необходимой информации об отпечатке для обхода отслеживания на посещаемых сайтах
// "flags": {
// "timezone": "BasedOnIp",
// "screen": "Custom"
// },
// "screen": {
// "width": 1000,
// "height": 1000
// },
// "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.6723.60 Safari/537.36"
// },
// "args": { //поддержка настройки параметров запуска браузера
// "--proxy-bypass-list": "*.nstbrowser.io"
// }
};
const query = new URLSearchParams({
config: encodeURIComponent(JSON.stringify((config))),
});
const browserWSEndpoint = `ws://localhost:8848/connect?${query.toString()}`;
await execPuppeteer(browserWSEndpoint);
}- Начало извлечения элементов видео на YouTube
- Сначала используем инструменты разработчика браузера (F12), чтобы получить элемент строки поиска и элемент кнопки поиска на YouTube:
Затем напишем скрипт ввода поиска и скрипт нажатия кнопки поиска:
JavaScript
async function execPuppeteer(browserWSEndpoint) {
try {
const browser = await puppeteer.connect({
browserWSEndpoint,
});
const page = await browser.newPage();
// переход на YouTube
await page.goto('https://www.youtube.com');
// ввод поискового запроса
await page.type('#center > yt-searchbox > div.ytSearchboxComponentInputBox > form > input', 'The Shawshank Redemption', { delay: '100' }) // Здесь delay используется для задержки интервального события каждого ввода символа, чтобы имитировать сцену ввода реального пользователя.
// нажатие кнопки поиска
await page.click('yt-searchbox button[aria-label=Search]')
// ожидание отрисовки элемента страницы
await page.waitForSelector('ytd-video-renderer ytd-thumbnail >a')- Используем тот же метод для поиска необходимой нам информации о видео:
JavaScript
// тег ytd-video-renderer — это элемент на видео
const videoElement = await page.$$('ytd-video-renderer')- Извлекаем заголовок видео, номер канала, ссылку и другую информацию из тегов:
JavaScript
const renderList = []
for (const element of videoElement) {
const link = await element.$('ytd-thumbnail > a').then((el) => {
return el.evaluate((ele) => {
return `https://www.youtube.com${ele.getAttribute('href')}`;
})
})
const title = await element.$('ytd-thumbnail + div yt-formatted-string').then((el) => {
return el.evaluate((ele) => {
return ele.textContent
})
})
const channel = await element.$('ytd-thumbnail + div > div[id=channel-info] yt-formatted-string >a').then((el) => {
return el.evaluate((ele) => {
return ele.textContent
})
})
renderList.push({
channel,
title,
link
})
}
console.log("renderList:", renderList)- Запуск вышеуказанного скрипта позволяет получить данные видео на YouTube:
JavaScript
renderList: [
{
channel: 'Warner Bros. Entertainment',
title: 'The Shawshank Redemption | Trailer | Warner Bros. Entertainment',
link: 'https://www.youtube.com/watch?v=PLl99DlL6b4&pp=ygUYVGhlIFNoYXdzaGFuayBSZWRlbXB0aW9u'
},
{
channel: 'King of Movies',
title: 'The Shawshank Redemption Morgan Freeman, Tim Robbins',
link: 'https://www.youtube.com/watch?v=XIv97tIImz8&pp=ygUYVGhlIFNoYXdzaGFuayBSZWRlbXB0aW9u'
},
{
channel: 'Eli D',
title: 'The Shawshank Redemption/Best scene/Tim Robbins/Bob Gunton/Morgan Freeman/William Sadler',
link: 'https://www.youtube.com/watch?v=0spucxvMfjE&pp=ygUYVGhlIFNoYXdzaGFuayBSZWRlbXB0aW9u'
},
.......
{
channel: 'BBC Global',
title: 'How The Shawshank Redemption went from flop to hit | BBC Global',
link: 'https://www.youtube.com/watch?v=jbn9IgCIeB4&pp=ygUYVGhlIFNoYXdzaGFuayBSZWRlbXB0aW9u'
},
{
channel: 'Turner Classic Movies',
title: 'Tim Robbins and Morgan Freeman reflect on 30 years of THE SHAWSHANK REDEMPTION | TCMFF 2024',
link: 'https://www.youtube.com/watch?v=pYmAy3H0s3Q&pp=ygUYVGhlIFNoYXdzaGFuayBSZWRlbXB0aW9u'
}
]Весь код:
JavaScript
import puppeteer from 'puppeteer-core';
import express from "express";
async function execPuppeteer(browserWSEndpoint, search) {
try {
const browser = await puppeteer.connect({
browserWSEndpoint,
});
const page = await browser.newPage();
await page.goto('https://www.youtube.com');
await page.type('#center > yt-searchbox > div.ytSearchboxComponentInputBox > form > input', search, { delay: '100' })
await page.click('yt-searchbox button[aria-label=Search]')
await page.waitForSelector('ytd-video-renderer ytd-thumbnail >a')
const videoElement = await page.$$('ytd-video-renderer')
const renderList = []
for (const element of videoElement) {
const link = await element.$('ytd-thumbnail > a').then((el) => {
return el.evaluate((ele) => {
return `https://www.youtube.com${ele.getAttribute('href')}`;
})
})
const title = await element.$('ytd-thumbnail + div yt-formatted-string').then((el) => {
return el.evaluate((ele) => {
return ele.textContent
})
})
const channel = await element.$('ytd-thumbnail + div > div[id=channel-info] yt-formatted-string >a').then((el) => {
return el.evaluate((ele) => {
return ele.textContent
})
})
renderList.push({
channel,
title,
link
})
}
console.log(renderList);
await browser.close();
return renderList;
} catch (err) {
console.log(`Error fetching ${selector}:`, e);
}
}
async function start(search) {
const config = {
"name": "testProfile",
"platform": "windows",
"kernel": "chromium",
"kernelMilestone": "130",
// "proxy": "http://127.0.0.1:8000",
// "doProxyChecking": false,
// "fingerprint": {
// "flags": {
// "timezone": "BasedOnIp",
// "screen": "Custom"
// },
// "screen": {
// "width": 1000,
// "height": 1000
// },
// "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.6613.85 Safari/537.36"
// },
// "args": {
// "--proxy-bypass-list": "*.nstbrowser.io"
// }
};
const query = new URLSearchParams({
config: encodeURIComponent(JSON.stringify((config))),
});
const browserWSEndpoint = `ws://localhost:8838/connect?${query.toString()}`;
return await execPuppeteer(browserWSEndpoint, search);
}
const app = express();
app.get("/youtube/:search", async (req, resp) => {
const search = req.params.search;
const renderList = await start(search);
resp.send({ "code": 200, "data": renderList })
})
app.listen(8080, () => console.log("Listening on PORT: 8080"))Использование API Nstbrowser Docker
В процессе работы вы также можете вызывать другие API в службе контейнера для управления браузером в контейнере
- http://localhost:8848/start
- Метод: POST
Шаг 1. Запуск нового экземпляра браузера:
JavaScript
запрос:
{
"name": "testProfile",
"once": true,
"platform": "windows",
"kernel": "chromium",
"kernelMilestone": "130",
"fingerprint": {
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.6613.85 Safari/537.36"
}
}
ответ:
{
"data": {
"profileId": "4a9911a9-6d28-41b9-8bf4-cc08592afcbd",
"port": 31685,
"webSocketDebuggerUrl": "ws://127.0.0.1:31685/devtools/browser/19df3c03-2b13-49db-ac1d-989bb68a353f"
},
"err": false,
"msg": "success",
"code": 200
}Шаг 2. После завершения запуска вы можете непосредственно подключиться к только что запущенному браузеру через URL параметра webSocketDebuggerUrl для выполнения других команд скрипта.
- http://localhost:8848/stop/{profileId}
- Метод: GET
Закрытие экземпляра браузера с указанным profileId:
JavaScript
ответ:
{
"data": null,
"err": false,
"msg": "success",
"code": 200
}- http://localhost:8848/stopAll
- Метод: GET
Закрытие всех экземпляров браузера:
JavaScript
ответ:
{
"data": null,
"err": false,
"msg": "success",
"code": 200
}- http://localhost:8848/running
- Метод: GET
Получение всех запущенных экземпляров браузера:
JavaScript
ответ:
{
"data": [
{
"profileId": "605ffe1f-7bdf-4ac7-b0bb-70746cb92a0f",
"remoteDebuggingPort": 26192,
"running": true,
"starting": false,
"stopping": false
},
{
"profileId": "8693f526-5a9f-4669-86db-c48866921ffc",
"remoteDebuggingPort": 45850,
"running": true,
"starting": false,
"stopping": false
}
],
"err": false,
"msg": "success",
"code": 200
}- http://localhost:8848/json/list/{profileId}
- Метод: GET
Получение списка страниц, открытых экземпляром браузера. С помощью списка страниц мы можем в любое время проверять состояние работы браузера:
JavaScript
ответ:
{
"data": [
{
"description": "",
"devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:45850/devtools/page/401571FE7D5A477074F539B39AEE0EC6",
"id": "401571FE7D5A477074F539B39AEE0EC6",
"title": "tiktok - Google Search",
"type": "page",
"url": "https://www.google.com/search?q=tiktok&oq=tikto&gs_lcrp=EgZjaHJvbWUqDQgAEAAYgwEYsQMYgAQyDQgAEAAYgwEYsQMYgAQyBggBEEUYOTINCAIQABiDARixAxiABDIKCAMQABixAxiABDIKCAQQABixAxiABDIKCAUQABixAxiABDIHCAYQABiABDIHCAcQABiABDIKCAgQABixAxiABDINCAkQLhiDARixAxiABNIBCTgyMzJqMGoxNagCALACAA&sourceid=chrome&ie=UTF-8",
"webSocketDebuggerUrl": "ws://127.0.0.1:45850/devtools/page/401571FE7D5A477074F539B39AEE0EC6"
},
{
"description": "",
"devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:45850/devtools/page/293BECFB09421FE88DB74CB222AFDCA6",
"id": "293BECFB09421FE88DB74CB222AFDCA6",
"title": "The Shawshank Redemption - YouTube",
"type": "page",
"url": "https://www.youtube.com/results?search_query=The+Shawshank+Redemption",
"webSocketDebuggerUrl": "ws://127.0.0.1:45850/devtools/page/293BECFB09421FE88DB74CB222AFDCA6"
}
],
"err": false,
"msg": "success",
"code": 200
}Заключительные мысли
Nstbrowser Docker предоставляет удобный сервис браузера с отпечатками пальцев Nstbrowser. Благодаря технологии контейнеров Docker, он хорошо изолирует сложную среду на хост-машине и поддерживает запуск служб браузера Nstbrowser на разных платформах. Изоляция контейнеров позволяет запускать несколько экземпляров локально, собирать данные на разных веб-сайтах и обеспечивать защиту от отслеживания пользователя.
Больше
