JavaScript 2로 동영상 만들기

내 블로그 게시물 이후로 작업하고 있는 앱에 몇 가지 변경 사항을 적용했습니다. 이 앱은 stackoverflow 질문 URL 및 YouTube 동영상 URL에 대한 사용자 입력을 받아 this 프로젝트와 유사한 내레이션 틱톡을 생성합니다. 먼저 내가 수행한 몇 가지 변경 사항에 대해 이야기하고 싶은 다음 main.js 파일과 그 기능에 대해 이야기하겠습니다.

지난 주 이후 변경 사항

몇 가지가 변경되었지만 중요한 것은 없습니다. /lib에서 사용되는 파일을 위해 edit-video.js 안에 폴더를 만들었습니다. 실제로 비디오를 함께 편집하는 데 필요한 단계의 양이 분할되는 것을 정당화하기 때문에 이렇게 했습니다. 지금까지 Google Cloud 텍스트 음성 변환 API의 오디오 파일을 Puppeteer의 스크린샷에 첨부할 수 있었습니다. 처음처럼 많은 진전을 이루기 위해 같은 양의 시간을 찾을 수 없었지만 etro.js에서 ffmpeg 사용으로 전환한 이후로 훨씬 더 원활하게 진행되고 있습니다. 나는 remotion을 읽고 구현을 시도한 후 ffmpeg로 전환하기로 결정했습니다. 나는 또한 shotstack을 찾았지만 잠재적으로 내가 할 수 있는 API 호출의 양에 제한을 받고 싶지 않았습니다.

또한 어느 시점에서 index.js 파일의 이름을 main.js로 변경했지만 아직 다시 변경하지 않았습니다.
/lib 파일에 대한 변경 사항은 다음과 같습니다.

└─── lib
    └─── edit-video
            add-audio.js
            edit-video.js
            image-to-video.js
    │
    │   api-call.js
    │   download-video.js
    │   parse-text.js
    │   screenshot.js
    │   text-to-speech.js

프로젝트를 마무리하는 동안 여전히 몇 가지 변경 사항이 있을 수 있으며 다음에 게시물을 작성할 때 비슷한 업데이트가 있을 것입니다.

Main.js 파일

main.js는 앱의 진입로입니다. main.js 에서는 /lib 및 몇 가지 npm 패키지에서 모듈을 가져옵니다.

import chalk from "chalk";
import inquirer from "inquirer";
import { screenshot } from "./lib/screenshot.js";
import { makeApiCall } from "./lib/api-call.js";
import { downloadVideo } from "./lib/download-video.js";
import { convertTextToSpeech } from "./lib/text-to-speech.js";
import { editVideo } from "./lib/edit-video.js";

지난 게시물에서 내가 사용하고 있는 각 npm 패키지가 수행하는 작업에 대해 조금 이야기했지만 내 앱에서 사용되는 방법에 대해 더 자세히 설명하겠습니다.

Chalk와 Inquirer는 앱이 콘솔에 인쇄할 때와 사용자 입력을 요청할 때 함께 사용됩니다. Inquirer는 입력을 가져오는 데 사용되고 Chalk는 콘솔에 기록된 모든 항목의 스타일을 지정하는 데 사용됩니다.
main.js에서 사용되는 방법은 다음과 같습니다.

const greeting = chalk.green("STACKOVERFLOW VIDEO CREATOR");
console.log(greeting);

async function getQuestionURL() {
  const answer = await inquirer.prompt({
    name: "questionURL",
    type: "input",
    message: "Enter the stackoverflow questions URL:",
  });
  questionURL = answer.questionURL;
}

greeting는 녹색 텍스트로 인쇄되며 getQuestionURL가 호출되면 사용자에게 stackoverflow 질문에 대한 URL을 입력하라는 메시지가 표시됩니다.

다음 5개의 import 문은 /lib에서 내보내는 가져오기 모듈입니다. 이 게시물에서 각 함수가 어떻게 호출되는지 보여주고 호출되는 함수가 실제로 수행하는 작업에 대해 몇 가지 추가 게시물을 작성할 것입니다.

앱이 사용자로부터 두 URL을 모두 받은 후 앱은 startVideoEdit 모듈에 대한 함수 호출을 수행하는 /lib라는 함수를 호출하기 전에 입력을 확인하도록 사용자에게 요청합니다.

먼저 makeApiCall는 오디오로 변환할 텍스트를 가져옵니다. 질문 URL과 앱 전체에서 사용되는 몇 가지 전역 변수main.js에 전달됩니다.

await makeApiCall(questionURL, questionDataObj, plainTextStrings, fileNames);

그런 다음 screenshot가 호출되고 Puppeteer를 사용하여 필요한 사진을 스크린샷합니다. 이 함수는 질문 URL과 전역 변수도 사용합니다.

await screenshot(questionURL, questionDataObj, fileNames);

다음convertTextToSpeech이 호출되어 제목, 질문 본문 및 질문에 대한 답변에 대한 오디오를 가져옵니다. 오디오를 저장할 제목과 함께 텍스트 문자열이 함수에 전달됩니다. 나는 결국 이것을 단 하나의 함수 호출로 리팩터링하려고 시도하고 싶지만 지금은 작업을 완료하는 데 몇 가지가 걸립니다. 먼저 제목에 대한 오디오를 얻은 다음 질문 문자열 배열을 반복하기 전에 질문 본문을 얻습니다.

await convertTextToSpeech(questionDataObj.title[0], "question-title");
await convertTextToSpeech(questionDataObj.textString[0], "question-body");

async function getAnswerAudio() {
  for (let i = 1; i <= plainTextStrings.strings.length; i++) {
    await convertTextToSpeech(
      plainTextStrings.strings[i - 1],
      fileNames[i + 1]
    );
  }
}

await getAnswerAudio();

마지막으로 beforeeditVideo를 호출하여 모든 것을 마무리하고, downloadVideo를 호출하여 동영상의 배경으로 사용할 YouTube 동영상을 다운로드합니다. downloadVideo의 유일한 매개변수는 사용자가 전달한 YouTube 동영상입니다.

await downloadVideo(videoURL);

그것은 main.js에 대한 것입니다. 질문이 있으시면 최선을 다해 답변해 드리겠습니다. 읽어주셔서 감사합니다. dev.to에서 제 다른 게시물을 자유롭게 확인하세요.