GIF를 비디오 변환기로 만드는 방법 😎 Vue + Wasm

여기에서 우리가 만들고 있는 것을 볼 수 있습니다.
https://hunterjs-bit.github.io/vue_wasm_gif_to_video/

내 저장소에서 이 튜토리얼의 전체 소스 코드를 찾을 수 있습니다.
https://github.com/HunterJS-bit/vue_wasm_gif_to_video

무엇을 만들 것인가?

GIF를 비디오로 변환하는 간단한 애플리케이션을 구축할 것입니다. 사용자는 변환된 비디오를 미리 보고 다운로드할 수 있습니다. 일반적으로 이 사용자는 변환을 처리하기 위해 일부 서버 코드를 작성해야 하지만 WASM 덕분에 클라이언트 측에서 모두 할 수 있습니다 :)

전제 조건

기본 프로그래밍을 알아야 합니다. 이것은 재미로 할 수 있는 상당히 쉬운 프로젝트입니다. 우리는 Vue & Wasm을 사용하고 있지만 이를 위해 다른 프레임워크를 사용할 수 있습니다.

시작하자

먼저 Vue 프로젝트를 생성하고 필요한 종속성을 설치하고 코드에 대해 좀 더 이야기하겠습니다.

Vue CLI를 사용한 초기 설정

참고로 Vue CLI documentation 을 참조하십시오. Vue CLI를 통해 설치 및 초기화하려면 다음 단계를 따르십시오.

1단계: Vue CLI 3 설치

```
 npm install -g @vue/cli
```

2단계: Vue CLI 3로 프로젝트 초기화

```
   vue create vue-app
```

4단계: localhost 제공

모든 것이 설치되면 프로젝트 폴더로 이동하고 터미널에서 npm run serve를 실행하여 localhost를 제공합니다.

브라우저를 열면 이와 유사한 화면이 나타납니다.

종속성 설치

ffmpeg.wasm 라이브러리를 사용하여 gif를 비디오로 변환할 것입니다. Ffmep 라이브러리는 인기 있는 포트FFmpeg library이며 오디오, 비디오 조작을 위해 사용하기 쉬운 API를 제공합니다.

다음 명령을 실행하여 ffmpeg를 설치합니다.

npm install @ffmpeg/ffmpeg @ffmpeg/core

파일 구조 개요

구성 요소 트리 자체는 획기적인 것이 아니며 하나의 구성 요소만 사용합니다.

VideoMaker.vue - Vue 비디오 변환기 구성 요소를 렌더링합니다

.

따라서 새 구성 요소 VideoMaker.vue를 만드십시오.

Vue 단일 파일 구성 요소의 기본 구조에는 마크업, 스크립트 및 스타일 태그가 포함됩니다.

<template>
  <div>

  </div>
</template>

<script>
export default {
 name: 'VideoMaker',
}
</script>

<style scoped>

</style>

다음으로 양식과 구성 요소 논리를 추가합니다.

양식 추가, Fmmpeg 라이브러리 및 스타일 구성 요소 로드

<template>
  <div class="gif-converter">
    <div class="upload-form">
      <h2>Upload your Gif</h2>
      <form >
        <div class="upload-box" :style="{ backgroundImage: 'url(' + gifImage + ')' }">
          <div class="upload-icon" v-if="!gifImage">

          </div>
          <input type="file" id="fileInput" name="filename" />
        </div>
      </form>
      <div class="action-bar mt-10">
        <button class="convert-btn">Convert to Video</button>
      </div>
    </div>
    <div class="preview-form">
      <h2>Result</h2>
      <div class="video-wrapper">
        <div class="loader" v-if="loading">
          <h2 class="loading-text">Loading ...</h2>
        </div>
        <video v-if="video" id="output-video" controls :src="video"></video>
      </div>
    </div>
  </div>
</template>

<script>
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";
// create ffmpeg instance
const ffmpeg = createFFmpeg({ log: true });

export default {
  name: "VideoMaker",
  async created() {
    // load ffmpeg when component is created
    await ffmpeg.load();
  },
  data() {
    return {
      gifImage: null, // gif image is loadaded
      video: null, // video converted
      loading: false // should show loading animation
    };
  },
};
</script>

<style scoped>
.gif-converter {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 20px 50px;
  background: white;
  box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3),
    0 55px 50px -35px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
}
.preview-form video {
  max-width: 100%;
  width: 100%;
  height: auto;
}
.loader {
  margin-top: 50px;
}
.loader .loading-text {
  font-weight: 100;
  color: #dedede;
}
#fileInput {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
</style>

많은 것을 알 수 있지만 대부분의 개발자가 따를 수 있을 만큼 명확하기를 바랍니다. 분명히 여기에 많은 부스러기가 있습니다. 그러나 조금 설명하려고 노력할 것입니다.

먼저 ffmpeg/ffmpeg에서 fetchFile 및 createFFmpeg 메서드를 가져옵니다.
const ffmpeg = createFFmpeg({ log: true });
여기에서 나중에 사용할 수 있도록 ffmpeg 인스턴스를 만듭니다.
await ffmpeg.load();
여기서 우리는 브라우저에서 ffmpeg를 로드할 때까지 기다려야 합니다.

템플릿에서 볼 수 있듯이 2가지 양식이 있습니다. 첫 번째 형식은 gif를 업로드하기 위한 것이고 두 번째 형식은 변환된 비디오를 형식으로 렌더링하기 위한 것입니다.

그리고 구성 요소의 가시성을 전환하는 데 많이 사용되는 데이터 속성gifImage , video , loading이 있습니다.

그리고 이제 논리를 추가하십시오

 methods: {
    uploadFile(e) {
      const file = e.target.files[0];
      this.gifImage = URL.createObjectURL(file);
    },
    /**
     * Handles gif to video conversion
     */
    async convertToVideo() {
      this.video = null;
      ffmpeg.FS("writeFile", "randGif.gif", await fetchFile(this.gifImage)); // load gif image into ffmpeg
      this.loading = true;
      await ffmpeg.run("-f", "gif", "-i", "randGif.gif", "output.mp4");  // convert gif to mp4
      const data = ffmpeg.FS("readFile", "output.mp4");
      this.video = URL.createObjectURL(
        new Blob([data.buffer], { type: "video/mp4" })
      ); // create URL representing video field
      this.loading = false;
    }
  }

여기에서 볼 수 있듯이 두 가지 방법이 있습니다.
uploadFile - 사용자가 업로드한 Gif 이미지를 가져오는 데 메서드가 사용됨convertToVideo - 여기에서 볼 수 있듯이 방법은 비디오 변환을 처리합니다. 먼저 gif 이미지를 ffmpeg 라이브러리에 로드한 다음 ffmpeg.run 명령을 사용하여 변환하고 마지막으로 생성된 비디오 파일의 URL을 얻습니다.

여기에 업데이트된 템플릿이 있습니다.

<template>
  <div class="gif-converter">
    <div class="upload-form">
      <h2>Upload your Gif</h2>
      <form @submit.prevent="uploadFile">
        <div class="upload-box" :style="{ backgroundImage: 'url(' + gifImage + ')' }">
          <div class="upload-icon" v-if="!gifImage">
            <upload-icon></upload-icon>
          </div>
          <input type="file" id="fileInput" @change="uploadFile" name="filename" />
        </div>
      </form>
      <div class="action-bar mt-10">
        <button class="convert-btn" :disabled="!gifImage" @click="convertToVideo">Convert to Video</button>
      </div>
    </div>
    <div class="preview-form">
      <h2>Result</h2>
      <div class="video-wrapper">
        <div class="loader" v-if="loading">
          <h2 class="loading-text">Loading ...</h2>
          <loader-icon></loader-icon>
        </div>
        <video v-if="video" id="output-video" controls :src="video"></video>
      </div>
    </div>
  </div>
</template>

템플릿에서 방금 convertToVideo 및 uploadFile 메서드를 클릭하여 첨부했습니다.

마무리 생각

이제 이 프로젝트를 구축했으므로 Vue.js가 Wasm과 함께 사용되는 방식을 확실하게 이해해야 합니다. 추가 연습을 위해 더 많은 기능을 구현하고 기존 구조를 기반으로 구축해 보십시오.

새로 찾은 지식으로 다음과 같은 기능을 추가할 수 있습니다.

역방향 변환 추가(비디오에서 gif로)

비디오 변환 시 다른 형식 추가

애니메이션 추가

Full source code is available here. You are welcome to join in and feel free to contribute