TypeScript를 통한 애니메이션, 사운드 포맷 변환(fluent-ffmpeg)

개시하다

  • 태어날 때부터 TypeScript로 애니메이션과 사운드 형식을 변환하고 싶은 욕구가 있었는데 이렇게 쉽게 할 줄 몰랐어요. 그래서 이 방법을 소개합니다
  • 환경 구축이 조금 필요하긴 하지만 Docker에서 이동하기 위해 그 시간을 최대한 줄였다
  • 쓸것


  • ffmpeg
  • 애니메이션 및 사운드 파일 편집을 위한 CLI 기반 무료 소프트웨어

  • fluent-ffmpeg
    ffmpeg의 node.js용 라이브러리입니다.JavaScript/TypeScript를 통해 애니메이션 및 사운드 변환
  • Type Script에서 사용하기 시작하므로 가져오기@types/fluent-ffmpeg
  • 도 가능
  • TypeScripttypescriptts-node도 가져오기
  • 이루어지다


    TypeScript

  • 애니메이션 또는 사운드 파일을 읽고 직접 복사한 코드는 다음과 같습니다.복사에 성공하면 変換完了
  • 가 나타날 것 같습니다.
    // main.ts
    import ffmpeg from 'fluent-ffmpeg';
    
    async function fixMedia(
        input_file: string,
        output_file: string
    ) {
        // input_fileを読み込んでoutput_fileを生成する
        const converted = await ffmpeg(input_file)
            .on('end', () => {
                console.log(`変換完了`);
            }).save(output_file);
    }
    
    fixMedia();
    
  • 상기 코드를 바탕으로 ffmpeg의 방법체인save에서 전환하기 전에 전환용 방법을 삽입하여 영상과 소리를 희망적인 형식으로 전환할 수 있다
  • 방법 소개가 끝나지 않으니 적당히 참고하세요flent-ffmpeg 문서
  • // 動画サイズを1980x1080、コーデックをH.264にする例
    ffmpeg("input.mp4")
        .size("1980x1080")
        .videoCodec('libx264')
        .on('end', () => {
            console.log(`変換完了`);
        }).save("output.mp4");
    
    // 動画のフレームレートを30fps,音声ビットレートを192kbpsにする例
    ffmpeg("input.mp4")
        .fps(30.0)
        .audioBitrate(192)
        .on('end', () => {
            console.log(`変換完了`);
        }).save("output.mp4");
    
    // wav音声ファイルをmp3にする例
    ffmpeg("input.wav")
        .toFormat('mp3')
        .on('end', () => {
            console.log(`変換完了`);
        }).save("output.mp3");
    

    환경을 구축하고 동원하다


    TypeScript/Node.연관


  • 다음 설치使うもの에 설명된 라이브러리
  • npm install fluent-ffmpeg @types/fluent-ffmpeg typescript ts-node
    
  • 그리고 전형의main.ts를 컴파일하기 위해 다음과 같은 tsconfig를 기록했습니다.제이슨이 필요합니다.
    자세한 내용은 여기.
  • {
      "compilerOptions": {
        "esModuleInterop": true
      }
    }
    

    Docker 관련

  • CLI 애플리케이션에서 ffmpeg를 설치해야 하기 때문입니다.
    재현성을 위해 Docker 컨테이너에 설치
  • # Dockerfile
    FROM node:16-buster
    
    WORKDIR /app
    
    COPY . .
    
    RUN apt update
    RUN apt -y upgrade
    RUN apt install -y ffmpeg
    
    CMD [ "node_modules/.bin/ts-node","main.ts"]
    
  • 변환 결과 파일을 위해 마운트 설정을 설정한 상태에서 Docker
  • 를 시작합니다.
    # docker-compose.yml
    version: '3'
    services:
      app:
        build: .
        volumes:
          - type: bind
            source: "./"
            target: "/app"
    
  • 상기 파일 그룹 + 변환할 파일을 같은 디렉터리에 설정하고 아래 명령을 입력할 때 이동
  • npm install
    docker-compose build
    docker-compose up
    

    성과물

  • 상술한 내용과 기본적으로 같은 내용은 다음과 같다.재설치가 필요한 경우 를 참조하십시오.
  • 주요 추가점은 같은 디렉터리의 애니메이션과 소리를 모두 대상으로 전환하기 위한 것이다glob
  • https://github.com/mini-hiori/ts-fix-framerate

    참고 자료

  • Node.js를 통해 애니메이션 변환 처리 (fluent-ffmpeg)
  • TypeScript의 esModuleInterop 플래그 정보
  • 끝말

  • Type Script에서 fluent-ffmpeg을 사용한 일본어 문장은 가볍게 검색하는 느낌이 없다
    누군가에게 참고가 되었으면 좋겠네요
  • GW Type Script를 처음 접하는 초보라 환영합니다.
  • 좋은 웹페이지 즐겨찾기