ffmpeg.wasm을 사용하여 브라우저에 화면 녹화 기능을 설치하면

개시하다

이전에 Linux 사용자였기 때문에 Blog에 사용되는gif 애니메이션을 제작할 때 ffmpeg를 사용했습니다.최근에 Windows로 옮겼는데 도대체 gif 애니메이션을 만들려면 어떻게 해야 하나요?조사해 보니 보통 ffmpeg로 한다는 것을 알았다참고 자료.뭐, 결론은 이렇지만 Windows에 여러 앱을 넣으면 동작이 불안정해져서 싫어져요.얼마 전에 실수를 한 ffmpeg.나는 wasm으로 브라우저에서 화면을 녹음해 보기로 결정했다.이렇게 되면 이상한 앱을 넣지 않아도 될 것 같아요.
이번에 만든 건 이런 느낌이에요.왼쪽에 객체를 캡처할 영역을 지정하여 녹화합니다.오른쪽에 녹화 결과를 표시하고 다운로드합니다.

주제 밖의 말을 해도 윈도 10이라면 윈+G에서 녹화할 수 있다는 것을 나도 안다.알아요. 그런데 솔직히 이번에 브라우저 앱을 만들어서 알았어요. 그래서 못 들었어요.전체 화면을 녹화하거나 여러 창을 뛰어넘어 녹화할 수 없을 것 같기 때문이다.

ffmpeg.wasm 사용법

ffmpeg.wasm의 공식 페이지는 여기.입니다.이름과 같이 Webassembly에 ffmpeg를 구축했습니다.브라우저에서 ffmpeg 기능을 사용할 수 있습니다.그러나 GPU 등의 하드웨어 보조는 트랜스퍼를 격렬하게 느리게 사용할 수 없기 때문이다.10초짜리 4K 애니메이션을 처리하는 데 몇 분이 걸릴 것 같다.여기 기사.에도 이런 말이 쓰여 있다.그래서 필요 없는 걸 해줄 필요가 있어.
엑플을 보세요.Media Recorder record의 Blob을 Input으로 처리할 수 있을 것 같습니다.Blob 데이터 fetch를 MEMFS에서 ffmpeg로 변환합니다.wasm부터 접촉할 필요가 있을 것 같습니다.그리고 ffmpeg에 익숙한 명령을 사용하여 처리합니다.마지막으로 MEMFS에서 출력을 제거하면 됩니다.ffmpeg의 사용법만 알면 특별히 어려운 점이 없다.MEMFS에 대한 정보는 API 문서 및 emscripten 문서에 더 자세히 적혀 있습니다.

프로세스 개요

브라우저로 모니터를 캡처하려면 getDisplay Media를 사용하여 MediaStream을 가져오십시오.보통 미디어 리코더에게 이걸 먹이면 된다고 생각했는데 이번에는 비디오 영역을 지정하고 싶어서 먼저 HTML 비디오 엘리먼트에게 미디어 스트리밍을 먹이고 대상 영역만 HTML Canvas 엘리먼트에 적었다.그리고 이 HTML Canvas Element에서 Media Stream을 얻어 Media Recorder를 먹게 합니다.
Media Recorder를 통해 Blob 데이터를 가져오면 Blob 데이터를 MEMFS로 읽습니다.ffmpeg.wasm을 사용하여 Blob 데이터를 mp4로 변환합니다.변환된 mp4를 MEMFS에서 읽고 다운로드 가능 상태로 설정합니다(anchor로 설정).

Source Code

ffmpeg.wasm의 실행 부분과 전후 코드는 다음과 같다.
(1) 의 MEMFS에서 fetch에 Blob 데이터가 있습니다.(2) 중ffmpeg.wasm 명령을 실행하고 있습니다.(3) 변환된 데이터를 읽습니다.
(2)에서transode를 진행하지 않기 위해-c copy 옵션을 주었습니다.
간단하네.

    appInfo.ffmpeg.FS('writeFile', name, await fetchFile(new Blob(blobs)));  // <---(1)
    await appInfo.ffmpeg!.run('-i', name,  '-c', 'copy', outName);           // <---(2)
    const data = appInfo.ffmpeg!.FS('readFile', outName)                     // <---(3)

데모 및 웨어하우스

이번에 제작된 녹화 기능의 시연은 아래 URL에서 공개된다.transode가 없어서 의외로 빨리 처리할 수 있을 것 같아요.
https://flect-lab-web.s3-us-west-2.amazonaws.com/P02_screen-recorder-ts/index.html
이 밖에 원본 코드는 아래 창고에 저장됩니다.
https://github.com/w-okada/screen-recorder-ts

총결산

ffmpeg.wasm을 사용하여 브라우저에 화면 녹화 기능을 설치했습니다.
의외의 느낌이 유용한 것이 될 것 같아 개인적으로 만족한다.