JavaScript 4로 동영상 만들기

저는 지난주 정도에 다른 프로젝트를 진행했고 첫 번째 개발자 역할을 찾는 동안 다시 일을 시작했습니다. 나는 아직 이야기할 수 있을 만큼 충분히 진전을 이뤘습니다. 비디오에 오디오를 추가하는 ffmpeg에 여전히 몇 가지 문제가 있지만 여전히 이 프로젝트에 대해 낙관적이며 마지막 몇 단계를 곧 마무리할 수 있기를 바랍니다. 오늘은 puppeteer를 사용하여 크롬에서 스크린샷을 캡처하는 방법을 설명하겠습니다.

스크린샷.js 파일

이 파일은 puppeteer를 사용하여 질문에서 스크린샷을 캡처하는 기능screenshot()을 내보냅니다. 이 작업은 놀라울 정도로 쉬웠고 일을 시작하는 데 정말 만족스러웠습니다. 이 함수는 질문 URL과 questionDataObj 전역 변수를 사용합니다.

먼저 url는 질문 URL과 동일하게 설정됩니다. 그런 다음 getScreenShot() puppeteer라는 함수 내부에서 헤드리스 크롬 브라우저를 시작하고 URL로 이동한 다음 지난주에 언급한 API 호출에서 가져온 키워드 또는 ID가 포함된 CSS 선택기를 기반으로 다른 div를 스크린샷하는 데 사용됩니다.

이 프로세스 중 일부는 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();
}

이렇게 하면 크롬이 시작되고 URL로 이동한 다음 쿠키가 있으면 자주 표시되는 '쿠키 허용' 프롬프트가 닫힙니다. 인형극으로 클릭을 시뮬레이션하는 것이 얼마나 쉬운지 즐겁게 놀랐습니다.

다음은 질문 제목을 스크린샷하는 코드입니다.

// 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 호출에서 응답 ID의 배열을 반복합니다. 때때로 처리해야 하는 팝업을 좋아하는 또 다른 프롬프트가 있습니다.

// 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 [button] = await page.$x("//button[contains(., 'Dismiss')]");
  if (button) {
    await button.evaluate((b) => b.click());
  }
  await answerText.screenshot({
    path: `./screenshots/answer${questionDataObj.answerIds[i]}.png`,
  });
}

필요한 모든 스크린샷을 가져오고 남은 것은 페이지와 크롬을 닫는 것입니다.

await page.close();
await browser.close();

처음에 예상했던 것보다 훨씬 쉬웠고, 나중에 다른 프로젝트에서 꼭두각시를 다시 사용해 보고 싶습니다. 읽어주셔서 감사합니다. 제 다른 게시물도 확인해보세요. 저에게 질문이 있으시면 의견에 최선을 다해 답변하겠습니다.