📝 오늘 한 것

1. video recorder - getUserMedia / MediaRecorder / a.download

2. webassembly video transcode - FFmpeg.wasm / webm → mp4 / file → blob → url

📚 배운 것

1. video recorder

1) recorder.js 파일 추가

client 폴더에 recorder.js 파일을 만든 후 webpack이 이를 변환할 수 있도록 webpack.config.js 파일에서 entry에 추가한다.
webpack을 다시 시작해 변경사항을 업데이트한다.

// webpack.config.js
module.exports = {
  entry: {
    main: "./src/client/js/main.js",
    videoPlayer: "./src/client/js/videoPlayer.js",
    recorder: "./src/client/js/recorder.js",
  },
  // 중략
};

upload.pug 파일에 recorder.js 파일을 연결한다.
server.js 파일에서 지정해준 route 이름을 참고해 upload.pug 파일에 script를 추가한다.

//- upload.pug

block scripts
  script(src="/static/js/recorder.js")

// server.js
app.use("/static", express.static("assets"));

2) 녹화 버튼 만들기

upload 페이지에서 user가 녹화 버튼을 눌러 video를 녹화할 수 있도록 하려고 한다.

① 카메라와 오디오에 대한 접권 권한 가져오기: user가 녹화 버튼을 누르면 user의 카메라와 오디오에 대한 접근 권한을 얻는다.
② 비디오 실시간 보기 & 미리보기: 녹화된 video를 다운로드하기 전에 user가 미리 볼 수 있도록 한다.
③ 비디오 녹화 및 다운로드: video를 녹화한 후 다운로드 할 수 있도록 한다.

(1) upload.pug 파일 수정

block content
  div
    button#startBtn Start Recording

(2) getUserMedia()

MDN - mediaDevices.getUserMedia() 참고

① navigator.mediaDevices.getUserMedia() 함수는 mediaStream 객체를 반환함으로써 user의 navigator에서 카메라와 오디오를 가져다 준다.
그런데 카메라와 오디오는 가져오는 데 시간이 걸리기 때문에 async & await 또는 promise를 사용해야 한다.

💡 regeneratorRuntime

프론트엔드 상에서 async & await을 사용하려면 regeneratorRuntime을 설치해야 한다.

$ npm i regenerator-runtime

async & await을 사용할 파일에서 직접 import 할 수도 있지만
여기서는 프론트엔드 상의 모든 자바스크립트 파일에서 async & await을 사용할 수 있도록
client 폴더의 main.js 파일에서 regeneratorRuntime을 import 한 후
base.pug 파일에 script로 main.js 파일을 연결했다.

// main.js
import regeneratorRuntime from "regenerator-runtime";

//- base.pug

// 중략

script(src="/static/js/main.js")
block scripts

이제 base.pug 파일에서 main.js 파일의 regeneratorRuntime을 로드하고
upload.pug 파일에서 recorder.js 파일을 로드함으로써
recorder.js 파일 안에서 (async & await을 사용한) getUserMedia() 함수를 실행할 수 있다.

② (아직 video를 녹화하지는 않음) 카메라와 오디오에 대한 접근 권한을 얻어와 녹화된 video를 user가 미리 볼 수 있도록 코드를 작성한다.
upload.pug 파일에 src를 부여해주지 않은 video 태그를 추가하고, getUserMedia() 함수로부터 얻은 mediaStream 객체를 video에 넣어준다.

// recorder.js
const startBtn = document.getElementById("startBtn");
const video = document.getElementById("preview");

const handleStart = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { width: 1280px, height: 720px },
    audio: true,
  }); // mediaStream 객체를 반환
  video.srcObject = stream; // video 태그에 stream을 넣어줌
  video.play(); // 결과적으로 녹화 버튼을 누르면 카메라가 활성화됨 (미리보기)
};

startBtn.addEventListener("click", handleStart);

이제 녹화 버튼을 누르면 카메라가 활성화되어 내 추레한 모습이 화면에 뜨는 것을 확인할 수 있다.

(3) addEventListener / removeEventListener

현재는 녹화 버튼을 눌러야 미리보기 화면이 뜬다.
이를 ⓐ upload 페이지를 들어가면 (카메라와 오디오 권한을 얻어온 후) 바로 미리보기 화면이 뜨도록 하고, ⓑ 녹화 버튼을 누르면 실제로 녹화가 시작되고, 버튼을 다시 누르면 녹화가 중단되도록 수정했다.

// recorder.js

// ⓑ - 2
const handleStop = () => {
  startBtn.innerText = "Start Recording";
  startBtn.removeEventListener("click", handleStop);
  startBtn.addEventListener("click", handleStart);
};

// ⓑ - 1
const handleStart = () => {
  startBtn.innerText = "Stop Recording";
  startBtn.removeEventListener("click", handleStart);
  startBtn.addEventListener("click", handleStop);
};

// ⓐ
const init = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { width: 1280, height: 720 },
    audio: false,
  });
  video.srcObject = stream;
  video.play();
};

init();

// ⓑ
startBtn.addEventListener("click", handleStart);

(4) MediaRecorder

MDN - MediaRecorder 참고

③ MediaRecorder를 이용해 비디오 혹은 오디오를 녹화하고 다운로드 할 수 있다.

💡 비디오 녹화

1. MediaRecorder가 stream을 받아온다.

2. 실제 녹화가 시작되도록 녹화 버튼을 눌러 MediaRecorder를 활성화한다.
   녹화된 video를 미리 볼 수 있다.

3. 녹화 버튼을 다시 누르면 MediaRecorder가 비활성화되어 녹화가 중단된다.

4. 녹화가 중단되면 저장된 데이터의 최종 video를 담은 dataavailable 이벤트가 발생한다.
   MediaRecorder.ondataavailable 함수를 이용해 dataavailable 이벤트를 핸들링할 수 있다.
   dataavailable 이벤트는 data 속성을 가진 BlobEvent로써 여기에 녹화된 video에 대한 정보가 담겨 있다.

   event.data는 일종의 파일(blob - 뒤에서 설명)인데, 이를 이용해 무언가를 하기 위해서는 url에 집어넣어 해당 파일에 접근할 수 있도록 만들어야 한다.
   URL.createObjectURL()은 브라우저의 메모리에서만 존재하는 url을 만든다.
   이 url은 실제로 웹 사이트에는 존재하지 않는 url로써 단순히 접근할 수 있는 파일을 가리키고 있다.
   다시 말해, 해당 url은 브라우저에 의해 만들어져 브라우저 상에서만 존재하는 것으로써, 브라우저의 메모리에 파일을 저장한 후 브라우저가 그 파일에 접근할 수 있도록 한다.
   실제로 존재하는 url이 아니라 브라우저가 파일을 보여주는 방법일 뿐이므로 백엔드에는 존재하지 않기 때문에 서버가 열려 있어도 컴퓨터를 껐다 다시 돌아오면 해당 url은 없어진다.

// recorder.js
let stream;
let recorder;

const handleStop = () => {
  // 중략
  recorder.stop(); // 3
};

const handleStart = () => {
  // 중략
  recorder = new MediaRecorder(stream); // 1
  recorder.ondataavailable = (event) => {
    const videoFile = URL.createObjectURL(event.data); // 4
    video.srcObject = null;
    video.src = videoFile;
    video.loop = true;
    video.play();
  } 
  recorder.start(); // 2
};

const init = async () => {
  stream = await navigator.mediaDevices.getUserMedia({
    video: { width: 1280, height: 720 },
    audio: false,
  });
  video.srcObject = stream;
  video.play();
};

startBtn.addEventListener("click", handleStart);

💡 비디오 다운로드

Stop Recording 버튼을 누르면 버튼이 Download Video 버튼으로 바뀌도록 한 후 다시 같은 버튼을 눌렀을 때 녹화한 video가 다운되도록 한다.

// recorder.js
const handleStop = () => {
  startBtn.innerText = "Download Video";
  startBtn.removeEvenetListener("click", handleStop);
  startBtn.addEventListener("click", handleDownload);
  recorder.stop();
};

a 태그(즉, 링크)를 만들어 href 속성에 위에서 얻어온 videoFile을 넣는다.
a.download는 링크를 클릭 시 해당 url로 이동하는 대신 url을 저장하도록 한다. 이때 파일 저장 시 제안할 파일 이름을 지정할 수 있다.
a 태그를 body에 추가한다.
링크를 클릭하도록 한다. (실제로 사용자가 링크 클릭x)

// recorder.js
let videoFile;

const handleDownload = () => {
  const a = document.createElement("a");
  a.href = videoFile;
  a.download = "myRecording.webm";
  document.body.appendChild(a);
  a.click();
};

이를 통해 user는 Download Video 버튼을 눌렀을 때 링크가 가리키는 파일을 저장할 수 있다.

2. WebAssembly video transcode

그런데 현재 다운로드한 비디오는 재생은 되지만 길이(duration)를 갖지 못하기 때문에 이 점을 해결해야 한다.
또한 모든 기기들이 webm을 이해하지는 못하기 때문에 webm 파일을 mp4 파일로 바꿔야 하고, 비디오에서 썸네일도 추출해야 한다.
이를 위해 ffmpeg.wasm을 이용할 수 있다.

1) FFmpeg와 WebAssembly

ffmpeg란 비디오나 오디오와 같은 미디어 파일을 다양한 종류의 형태로 기록하고 변환해주는 컴퓨터 프로그램을 말한다.

예를 들어, FFmpeg를 이용해 비디오를 압축하거나 비디오에서 오디오를 추출할 수 있다.
비디오에서 스크린샷을 찍거나 비디오를 gif 파일로 만들거나 비디오에 자막을 추가할 수도 있다.
또한, 유튜브처럼 같은 비디오를 여러 개의 포맷과 화질로 인코딩할 수도 있다.

그런데 FFmpeg는 백엔드에서 실행해야 하기 때문에 원래는 서버를 이용한 만큼 비용을 지불해야 한다.
이 문제를 해결하기 위해 WebAssembly를 이용한다.

웹 어셈블리는 자바스크립트의 무덤일까? & 초보 개발자를 위한 웹 신기술 WebAssembly 설명 참고

WebAssembly란 프론트엔드에서 매우 빠르게 코드를 실행할 수 있도록 하는 개방형 표준이다.
브라우저에서 실행 가능한 언어는 기본적으로 HTML, CSS, JavaScript이지만, 자바스크립트가 아닌 다른 종류의 언어 또한 WebAssembly로 컴파일함으로써 자바스크립트가 아닌 언어도 브라우저에서 실행할 수 있다.

예를 들어, 게임 등은 자바스크립트로 만들기에 자바스크립트 속도가 너무 느리거나 자바스크립트로 구현할 수 없는 부분들이 있어 다른 언어를 사용해 만든 후 실제로 실행하기 위해서는 게임 설치 과정을 거쳐야 한다.
그러나 WebAssembly로 컴파일하면 설치하지 않고도 브라우저에서 게임을 실행할 수 있다.
이를 통해 실행 비용이 큰 프로그램들도 비용을 절약하고 브라우저에서 실행할 수 있다.

한편, 우리는 WebAssembly로 컴파일될 언어를 이용해 프로그램을 만들 뿐, 보통 WebAssembly를 직접 작성하지는 않는다.

2) FFmpeg.wasm

앞서 말했듯 비디오를 다양한 형태로 변환하는 데 FFmpeg를 사용한다.
이때 유튜브의 경우에는 사용자가 업로드한 비디오를 그들의 비싼 서버에서 변환하지만
Fmpeg.wasm를 이용하면 사용자가 업로드한 비디오를 사용자의 브라우저에서 변환하도록 할 수 있다.
FFmpeg는 원래 자바스크립트가 아닌 C 언어로 만들어진 프로그램이지만, WebAssembly를 이용하면 브라우저에서 FFmpeg를 실행시킬 수 있기 때문이다.

여기서는 handleDownload 함수 안에서 user가 video를 다운로드 하기 전에 mp4 파일로 바꿔보려고 한다.

(1) 설치 및 사용 (FFmpeg 로드하기)

ffmpegwasm/ffmpeg.wasm 참고

아래 명령어를 실행하여 FFmpeg.wasm를 설치한다.

$ npm install @ffmpeg/ffmpeg @ffmpeg/core

recorder.js 파일에서 이를 import 한다.

createFFmpeg()를 통해 ffmpeg instance를 만든다.
{log: true}는 콘솔에서 로그를 확인하기 위해 넣어준 옵션이다.

사용자가 ffmpeg를 사용할 수 있도록 load한다.
소프트웨어가 무거울 수 있으므로 await을 사용해야 한다.
이는 우리의 서버가 아니라 사용자의 컴퓨터에서 일어나는 일이다.

// recorder.js
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";

const hanldeDownload = async () => {
  const ffmpeg = createFFmpeg({ log: true });
  await ffmpeg.load();
  
  // 중략
};

(2) ffmpeg에 파일 만들기

먼저, FFmpeg 가상의 세계에 파일을 만들어야 한다.
이렇게 만들어진 파일은 실존하지 않지만 브라우저의 메모리에 저장된다.

이를 위해서는 0과 1의 정보(binaryData)를 전해줘야 한다.
녹화된 video에 대한 정보를 담고 있는 url, 즉 videoFile이 바로 그것이다.
따라서, fetchFile()을 이용해 videoFile을 전해주도록 한다.

ffmpeg.FS("writeFile", "파일 이름.확장자", await fetchFile(binaryData));

(3) 파일 변환하기 (webm → mp4)

다음으로, FFmpeg 명령어를 사용해 위에서 만든 가상의 파일을 변환하려고 한다.
FFmpeg를 사용자의 브라우저에서 로딩하기 때문에 FFmpeg 명령어 또한 사용자의 브라우저에서 실행되도록 할 수 있다.

ffmpeg.run()은 앞서 만든 가상의 파일(recording.webm)을 가상의 컴퓨터에서 input으로 받은 후 이를 지정한 결과물(output.mp4)로 변환하도록 한다.
이때 video를 초당 60 프레임으로 인코딩하기 위해 아래와 같이 코드를 작성하였다.

await ffmpeg.run("-i", "recording.webm", "-r", "60", "output.mp4");

이제 가상 파일 시스템(브라우저의 메모리)에는 output.mp4 파일이 있다.

(4) mp4 파일 사용하기 (file → blob → url)

실제로 파일을 만들기 위해 가상의 세계에 존재하는 ouput.mp4 파일을 불러와야 한다.

const mp4File = await ffmpeg.FS("readFile", "output.mp4");

이때 불러온 파일(mp4File)을 콘솔에서 확인해보면 다음과 같다.

console.log(mp4File);
console.log(mp4File.buffer); 

불러온 파일(mp4File)은 기본적으로 자바스크립트 세계에서 파일을 표현하는 방법인 Unit8Array(8비트 양의 정수로 이루어진 배열) 타입이다.
console.log(mp4File)을 실행한 결과 콘솔 창을 살펴보면 숫자로 이루어진 길이가 매우 긴 배열을 확인할 수 있다.

그러나 이것만으로는 아무것도 할 수 없기 때문에 이 배열을 blob으로 만들어야 한다.
blob이란 binary data를 담고 있는 파일류의 불변하는 raw data를 말한다.

그런데 Unit8Array(가공 가능)을 blob으로 만들 수는 없다.
실제 파일을 의미하는 raw binary data(미가공 이진 데이터)를 사용하기 위해서는 ArrayBuffer를 이용해야 한다.

이를 통해 실제 파일인 blob을 만든다.
이때 자바스크립트에게 이것이 mp4 파일이라고 알려줘야 한다.

const mp4Blob = new blob([mp4File.buffer], { type: "video/mp4" });

실제 파일에 접근할 수 있도록 실제 파일에 대한 정보를 담고 있는 blob을 그 파일을 가리키는 url로 만든다.

const mp4Url = URL.createObjectURL(mp4Blob);

(5) 최종 코드

const handleDownload = async () => {
  // FFmpeg를 로드한다
  const ffmpeg = createFFmpeg({
    log: true,
    corePath: "https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js",
  });
  await ffmpeg.load();

  // FFmpeg 세계에 파일을 만든다 - 실존하지는 않지만 브라우저 메모리에 저장된다
  ffmpeg.FS("writeFile", "recording.webm", await fetchFile(videoFile));

  // 파일을 변환한다 (webm → mp4)
  await ffmpeg.run("-i", "recording.webm", "-r", "60", "output.mp4");

  // 파일 → blob → url
  const mp4File = await ffmpeg.FS("readFile", "output.mp4");
  const mp4Blob = new Blob([mp4File.buffer], { type: "video/mp4" });
  const mp4Url = URL.createObjectURL(mp4Blob);

  // a.download 이용해 비디오 파일 다운로드
  const a = document.createElement("a");
  a.href = mp4Url;
  a.download = "myRecording.mp4";
  document.body.appendChild(a);
  a.click();
};

이제 다운로드된 video를 보면 길이가 정상적으로 주어져 있고, 확장자가 mp4인 것을 확인할 수 있다.

3) 에러 해결

(1) Cannot find module '@ffmpeg/core'

최신 버전의 ffmpeg/core를 설치한다.

$ npm install @ffmpeg/core@latest

ffpmeg instance를 만들 때 corePath를 다음과 같이 추가한다.

// recorder.js
const ffpmeg = createFFmpeg({
  log: true,
  corePath: "https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js", // 추가 ❗
});

(2) SharedArrayBuffer is not defined

server.js 파일에서 라우터들 앞에 다음과 같은 코드를 추가한다.

// server.js
app.use((req, res, next) => {
  res.header("Cross-Origin-Embedder-Policy", "require-corp");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
});

header.pug와 profile.pug 파일의 github 아바타에 crossorigin을 추가한다.

+github로부터 가져온 아바타와 직접 프로필 사진을 업로드해서 만든 아바타를 나눈다.
이렇게 안 하면 직접 업로드한 프로필 사진의 경로가 상대 경로가 되어 에러가 발생한다.

div.profile-outer-box
  div.profile-inner-box
    if (loggedInUser.avatarUrl).startsWith("h") 
      img(src=loggedInUser.avatarUrl,crossorigin).profile-img
    else
      img(src="/" + loggedInUser.avatarUrl).profile-img

✨ 내일 할 것

1. Thumbnail