FFmpeg.wasm 및 Solidjs를 사용하여 브라우저에서 비디오 처리

안녕하세요, 이 블로그 게시물의 개발자는 SolidJS와의 WASM 바인딩을 사용하여 브라우저에서 ffmpeg를 활용하는 방법을 보여줍니다.

WASM에 따르면

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.

FFmpeg

FFmpeg는 오디오 및 비디오를 기록, 변환 및 스트리밍하는 크로스 플랫폼 솔루션입니다.

FFmpeg.wasm

ffmpeg.wasm은 FFmpeg의 순수한 Webassembly/Javascript 포트입니다. 브라우저 내에서 바로 비디오 및 오디오 녹음, 변환 및 스트리밍이 가능합니다.

SolidJS

Solidjs는 Reactive, Performant, Powerful, Pragmatic 및 Productive Javascript 라이브러리입니다.

이 게시물에서는 비디오 파일을 useFFmpeg로 변환하고 브라우저 내에서 재생하도록 처리할 후크mp4를 만듭니다. Hope ui를 사용하여 이 웹 앱을 디자인할 것입니다.

새 solidjs 프로젝트를 만들고 종속성을 설치합니다.

> npx degit solidjs/templates/js ffmpeg-solidjs
> cd ffmpeg-solidjs
> pnpm i
> pnpm run dev 

solidjs 프로젝트에 Hope UI 추가

> pnpm add @hope-ui/solid @stitches/core solid-transition-group

FFmpeg.wasm 의존성 추가

> pnpm add @ffmpeg/ffmpeg

useFFmpeg.jsx 안에 src/hooks 파일을 만들어 봅시다.

import { createStore } from "solid-js/store";
import { onCleanup } from "solid-js";
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";

export default function useFFmpeg() {
  const [store, setStore] = createStore({
    progress: null, 
    videoURL: null,
  });

  const ffmpeg = createFFmpeg({ progress: (e) => setStore("progress", e) });

  const transcode = async (file) => {
    const { name } = file;
    // load ffmpeg.wasm code 
    await ffmpeg.load();
    // write file to  memory filesystem 
    ffmpeg.FS("writeFile", name, await fetchFile(file));
    // convert video into mp4 
    await ffmpeg.run("-i", name, "output.mp4");
    // read file from Memory filesystem 
    const data = ffmpeg.FS("readFile", "output.mp4");
    const url = URL.createObjectURL(
      new Blob([data.buffer], { type: "video/mp4" })
    );

    setStore("videoURL", url);
    setStore("progress", null);
  };

  const handleFileChange = (e) => {
    // start video conversion on file change 
    transcode(e.target.files[0]);
  };

  onCleanup(() => {
    // revoke created blob url object 
    URL.revokeObjectURL(store.videoURL)
  })
  return {
    store,
    handleFileChange,
  };
}

createFFmpeg() 기능은 ffmpeg를 초기화하고 비디오 조작 중 모든 세부 정보 로깅을 처리하고 비디오 조작 진행 상황을 추적합니다.

비디오 진행 상황은 반응형 solidjs 저장소에 저장되므로 이 저장소를 활용하여 반응형 작업을 수행할 수 있습니다.
ffmpeg.load()는 코어 ffmpeg를 다운로드하고 ffmpeg wasm 바이너리를 초기화하는 비동기 방식입니다.
ffmpeg.FS()는 브라우저에서 메모리 파일 시스템을 해결하는 데 도움이 되는 도우미 메서드입니다.
URL.createObjectURL() 정적 메서드는 <video>와 같은 html 기본 요소 내에서 직접 사용할 수 있는 blob 객체 URL을 생성합니다.

비디오의 Blob 개체 URL을 생성한 후 비디오를 재생하는 데 활용할 수 있도록 반응형 저장소 내부에 저장합니다.

구성 요소가 마운트 해제될 때 정적 방법URL.revokeObjectURL()을 사용하여 blob 객체 점유 메모리를 지웁니다.

이제 우리는 useFFmpeg 후크 내부 App.jsx를 연결합니다.

import {
  Box,
  Button,
  CircularProgress,
  CircularProgressIndicator,
  CircularProgressLabel,
  Container,
  Flex,
  GridItem,
  Heading,
  HopeProvider,
  HStack,
  SimpleGrid,
  Text,
  VStack,
} from "@hope-ui/solid";
import useFFmpeg from "./hooks/useFFmpeg";
import { Show } from "solid-js";
function App() {
  let fileRef;
  const { store, handleFileChange } = useFFmpeg();
  return (
    <HopeProvider config={{ initialColorMode: "dark" }}>
      <Container minH={"100vh"} display="grid" placeItems={"center"}>
        <Box py={"$4"}>
          <Heading fontSize={"$4xl"} textAlign="center">
            Video processing in browser using
            <Box>
              <Text as="span" color={"$success10"}>
                FFmpeg{" "}
              </Text>
              and{" "}
              <Text as="span" color={"$primary10"}>
                SolidJS
              </Text>
            </Box>
          </Heading>

          <HStack justifyContent={"center"} mt={"$6"}>
            <input
              type="file"
              name="file"
              id="file"
              hidden
              onChange={[handleFileChange]}
              ref={fileRef}
            />
            <Button onClick={() => fileRef.click()}>Select Video File</Button>
          </HStack>

          <Show when={store.progress}>
            <SimpleGrid columns={{ "@initial": 1, "@sm": 2, "@md": 2,"@lg":3 }} justifyContent={"center"} alignItems="center" mt={"$6"} spacing={"$4"}>
              <GridItem mx="auto">
                <CircularProgress
                  value={Math.round(store.progress?.ratio * 100)}
                  size={"$52"}
                >
                  <CircularProgressIndicator color="$success10" />
                  <CircularProgressLabel>
                    <VStack spacing={"$2"}>
                      <Heading fontSize={"$xl"}>Ratio</Heading>
                      <Heading fontSize={"$3xl"}>
                        {Math.round(store.progress?.ratio * 100)} %
                      </Heading>
                    </VStack>
                  </CircularProgressLabel>
                </CircularProgress>
              </GridItem>

              <GridItem mx="auto">
                <CircularProgress value={100} size={"$52"} thickness={"$1"}>
                  <CircularProgressIndicator color="$success10" />
                  <CircularProgressLabel>
                    <VStack spacing={"$2"}>
                      <Heading fontSize={"$xl"}>Duration</Heading>
                      <Heading fontSize={"$3xl"}>
                        {store.progress?.duration}
                      </Heading>
                    </VStack>
                  </CircularProgressLabel>
                </CircularProgress>
              </GridItem>

              <GridItem mx="auto">
                <CircularProgress size={"$52"} indeterminate>
                  <CircularProgressIndicator color="$primary10" />
                  <CircularProgressLabel>
                    <VStack spacing={"$2"}>
                      <Heading fontSize={"$xl"}>Time</Heading>
                      <Heading fontSize={"$3xl"}>{store.progress?.time}</Heading>
                    </VStack>
                  </CircularProgressLabel>
                </CircularProgress>
              </GridItem>
            </SimpleGrid>
          </Show>

          <Show when={store.videoURL}>
            <Flex justifyContent={"center"} mt={"$6"}>
              <video
                src={store.videoURL}
                width={"400px"}
                height={"400px"}
                autoPlay
                controls
              />
            </Flex>
          </Show>

        </Box>



      </Container>
    </HopeProvider>
  );
}

export default App;

마지막으로 Cross-Origin-Embedder-Policy를 추가하여 원본 간 격리를 처리하도록 vite를 구성하고Cross-Origin-Opener-Policy 헤더

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";

export default defineConfig({
  plugins: [
    solidPlugin(),
    {
      name: "configure-response-headers",
      configureServer: (server) => {
        server.middlewares.use((_req, res, next) => {
          res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
          res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
          next();
        });
      },
    },
  ],
  build: {
    target: "esnext",
    polyfillDynamicImport: false,
  },
});

이제 개발 서버를 시작하고 비디오 파일을 선택하십시오.

pnpm run dev

거친 망 갈람 / ffmpeg-solidjs

FFmpeg 및 SolidJS를 사용하여 브라우저에서 비디오 처리

용법

이러한 템플릿 종속성은 pnpm을 통해 pnpm up -Lri를 통해 유지됩니다.
이것이 pnpm-lock.yaml 가 표시되는 이유입니다. 즉, 모든 패키지 관리자가 작동합니다. 템플릿을 복제하면 이 파일을 안전하게 제거할 수 있습니다.

$ npm install # or pnpm install or yarn install

Solid 웹사이트에서 자세히 알아보고 Discord에서 대화를 나누세요.

사용 가능한 스크립트

프로젝트 디렉토리에서 다음을 실행할 수 있습니다.

npm dev 또는 npm 시작

개발 모드에서 앱을 실행합니다.
브라우저에서 보려면 http://localhost:3000을 여십시오.
수정하면 페이지가 다시 로드됩니다.

npm 실행 빌드

프로덕션용 앱을 dist 폴더에 빌드합니다.
프로덕션 모드에서 Solid를 올바르게 번들하고 최상의 성능을 위해 빌드를 최적화합니다.
빌드가 축소되고 파일 이름에 해시가 포함됩니다.
앱을 배포할 준비가 되었습니다!

전개

당신은 할 수 있습니다…

View on GitHub