Создание видеороликов с помощью JavaScript 4

В течение последней недели или около того я работал над некоторыми другими проектами и вернулся к работе, продолжая искать свою первую роль разработчика. Я достиг некоторого прогресса, но пока его недостаточно для того, чтобы о нем говорить. У меня все еще есть некоторые проблемы с ffmpeg, добавляющим аудио к видео, но я все еще оптимистично настроен по отношению к этому проекту и надеюсь скоро завершить последние несколько шагов. Сегодня я расскажу, как я использую puppeteer для получения скриншотов из chrome.

Файл screenshot.js

Этот файл экспортирует функцию screenshot(), которая использует puppeteer для захвата скриншотов из вопроса. Это оказалось на удивление легко сделать, и работа над этим очень порадовала. Функция принимает url вопроса, а также глобальную переменную questionDataObj.

Сначала url устанавливается равным url вопроса. Затем внутри функции getScreenShot() puppeteer используется для запуска безголового браузера chrome, перехода к url и последующего создания скриншотов различных div на основе селекторов CSS, содержащих либо ключевые слова, либо идентификаторы, взятые из вызова API, о котором я говорил на прошлой неделе.

Некоторые из этих процессов повторяются несколько раз из-за того, как выбираются div’ы. Но все начинается с этого блока кода

// open browser and navigate to questionURL
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
// if page has cookies prompt, close prompt
const [cookieButton] = await page.$x(
  "//button[contains(., 'Accept all cookies')]"
);
if (cookieButton) {
  await cookieButton.click();
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Это запускает chrome, переходит к url и затем закрывает запрос «Принять Cookies», который часто появляется, если он существует. Я был приятно удивлен тем, как легко имитировать нажатия с помощью кукловода.

Далее следует код, который делает скриншот заголовка вопроса

// find question title and screenshot it
await page.waitForSelector("#question-header");
const questionTitle = await page.$("#question-header");
await questionTitle.screenshot({
  path: "./screenshots/question-title.png",
});
Вход в полноэкранный режим Выйти из полноэкранного режима

Здесь находится селектор, используемый для заголовка, и делается скриншот только div, содержащего заголовок. После этого находится тело вопроса и делается его скриншот.

// find question body and screenshot it
await page.waitForSelector(
  "#question > div.post-layout > div.postcell.post-layout--right"
);
const questionBody = await page.$(
  "#question > div.post-layout > div.postcell.post-layout--right"
);
await questionBody.screenshot({
  path: "./screenshots/question-body.png",
});
Вход в полноэкранный режим Выход из полноэкранного режима

Для тела вопроса используется другой синтаксис, чем для заголовка, поскольку div, в котором он находится, вложен. Это, вероятно, было самой большой проблемой для меня со скриншотами. Но все же это намного проще, чем я думал.

Затем, используя questionDataObj, я с помощью цикла for перебираю массив идентификаторов ответов из вызова API. Есть еще одна подсказка, которая иногда появляется здесь, и ее тоже нужно обработать.

// loop through answer ID's
for (let i = 0; i < questionDataObj.answerIds.length; i++) {
  // find answer and screenshot it
  await page.waitForSelector(`#answer-${questionDataObj.answerIds[i]}`);
  const answerText = await page.$(`#answer-${questionDataObj.answerIds[i]}`);
  // close prompt if it exists
  const 
= await page.$x("//button[contains(., 'Dismiss')]"); if (button) { await button.evaluate((b) => b.click()); } await answerText.screenshot({ path: `./screenshots/answer${questionDataObj.answerIds[i]}.png`, }); }
Войти в полноэкранный режим Выйти из полноэкранного режима

Это позволяет получить все необходимые скриншоты, и остается только закрыть страницу и chrome.

await page.close();
await browser.close();
Вход в полноэкранный режим Выйти из полноэкранного режима

Это оказалось намного проще, чем я ожидал, и я хочу попробовать использовать puppeteer для других проектов в будущем. Спасибо, что прочитали, и не стесняйтесь знакомиться с другими моими статьями. Если у вас есть вопросы ко мне, я постараюсь ответить на них в комментариях.

Оцените статью
devanswers.ru
Добавить комментарий