JavaScript 2로 동영상 만들기
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();
마지막으로 before
editVideo
를 호출하여 모든 것을 마무리하고, downloadVideo
를 호출하여 동영상의 배경으로 사용할 YouTube 동영상을 다운로드합니다. downloadVideo
의 유일한 매개변수는 사용자가 전달한 YouTube 동영상입니다.await downloadVideo(videoURL);
그것은
main.js
에 대한 것입니다. 질문이 있으시면 최선을 다해 답변해 드리겠습니다. 읽어주셔서 감사합니다. dev.to에서 제 다른 게시물을 자유롭게 확인하세요.
Reference
이 문제에 관하여(JavaScript 2로 동영상 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kadeesterline/make-videos-with-javascript-2-1pfl텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)