📝 오늘 한 것

1. 썸네일 추출 및 다운로드 / 썸네일 업로드 및 보여주기

2. flexbox / grid에서 마지막 행을 정렬하는 방법

📚 배운 것

1. WebAssembly video transcode

1) 썸네일 추출 및 다운로드

(1) -ss / -frames:v

// recorder.js
const handleDownload = () => {
  // 중략
  
  // recording.webm을 input으로 받아 output.mp4으로 변환
  await ffmpeg.run("-i", "recording.webm", "-r", "60", "output.mp4");
  
  // recording.webm을 input으로 받아 thumbnail.jpg를 생성 (추가 ❗)
  await ffmpeg.run(
    "-i",
    "recording.webm",
    // 영상의 특정 시간대(여기서는 1초)로 이동한다.
    "-ss",
    "00:00:01",
    // 이동한 시간대의 첫 프레임을 스크린샷으로 1장 찍는다.
    "-frames:v",
    "1",
    // 그 스크린샷을 썸네일로 만든다.
    "thumbnail.jpg"
  );
  
  const mp4File = await ffmpeg.FS("readFile", "output.mp4");
  
  // 중략
};

가상 파일 시스템(FS)의 메모리에 thumbnail.jpg이 만들어진다.

(2) file → blob → url / a.download

앞서 webm 파일을 mp4 파일로 변환했던 것처럼 file → blob → url 과정을 거쳐 thumbnail.jpg에 접근할 수 있도록 만들어준다.

// recorder.js
const handleDownload = () => {
  // 중략 
  const thumbFile = await ffmpeg.FS("readFile", "thumbnail.jpg");
  const thumbBlob = new Blob([thumbFile.buffer], { type: "image/jpg" });
  const thumbUrl = URL.createObjectURL(thumbBlob);
};

thumbUrl로 접근할 수 있는 a 태그를 만들어 thumbnail.jpg를 다운로드 할 수 있도록 한다.

// recorder.js
const handleDownload = () => {
  // 중략  
  const thumbA = document.createElement("a");
  thumbA.href = thumbUrl;
  thumbA.download = "myThumbnail.jpg";
  document.body.appendChild(thumbA);
  thumbA.click();
};

(3) unlink

파일 다운로드가 모두 끝났다면 이들을 FFmpeg의 가상 파일 시스템(FS)에서 unlink 해야 한다.
브라우저의 메모리에 계속 둔다면 쓸데없이 웹 사이트 속도가 느려질 수 있기 때문이다.
소스 파일인 recording.webm 파일과 이를 통해 만든 output.mp4 그리고 thumbnail.jpg 파일까지 unlink 하도록 한다.

// recorder.js
const handleDownload = () => {
  // 중략
  ffmpeg.FS("unlink", "recording.webm");
  ffmpeg.FS("unlink", "output.mp4");
  ffmpeg.FS("unlink", "thumbnail.jpg");
};

또한, 해당 파일에 접근할 수 있는 url도 삭제해야 한다.
URL.revokeObjectURL()을 이용해 webm blob url인 videoFile, mp4 blob url인 mp4Url, jpg blob url인 thumbUrl을 삭제다.

// recorder.js
const handleDownload = () => {
  // 중략  
  URL.revokeObjectURL(videoFile);
  URL.revokeObjectURL(mp4Url);
  URL.revokeObjectURL(thumbUrl);
};

2) handleDownload 함수 최종 수정

(1) startBtn → actionBtn

upload.pug 파일에서 버튼의 id 선택자를 수정한다.
recorder.js 파일에서 변수 이름을 수정한다.

(2) fileName을 변수 이름으로 변환

문자열인 파일 이름들을 변수로 지정해 모두 바꿔줬다.

// recorder.js
const files = {
  input: "recording.webm",
  output: "output.mp4",
  thumb: "thumbnail.jpg",
};

(3) downloadFile 함수 생성

handleDonwload 함수 안에서 a 태그를 만들어 파일을 다운로드 하는 부분이 반복된다.
이를 따로 함수로 만들어 빼냈다.

// recorder.js
const downloadFile = (fileUrl, fileName) => {
  const a = document.createElement("a");
  a.href = fileUrl;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
};

const handleDownload = () => {
  // 중략
  downloadFile(mp4Url, "myRecording.mp4");
  downloadFile(thumbUrl, "myThumbnail.mp4");
  // 중략
};

(4) 다운로드 버튼 연속 클릭 방지

다운로드가 완료되기 전에 다운로드 버튼이 연속으로 활성화되는 것을 막는다.
다운로드가 완료되면 다시 활성화되도록 한다.

// recorder.js
const handleDownload = () => {
  actionBtn.removeEventListener("click", handleDownload);
  actionBtn.innerText = "Transcoding...";
  actionBtn.disabled = true;
  
  // 중략

  actionBtn.disabled = false;
  actionBtn.innerText = "Record Again";
  init(); // 다시 비디오를 실시간으로 볼 수 있도록 함 ❗ 이걸 안 쓰면 이전에 녹화된 비디오가 계속 반복 재생됨
  actionBtn.addEventListener("click", handleDownload);
};

(5) recorder.js 최종 코드

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

const actionBtn = document.getElementById("actionBtn");
const video = document.getElementById("preview");

let stream;
let recorder;
let videoFile;

const files = {
  input: "recording.webm",
  output: "output.mp4",
  thumb: "thumbnail.jpg",
};

const downloadFile = (fileUrl, fileName) => {
  const a = document.createElement("a");
  a.href = fileUrl;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
};

const handleDownload = async () => {
  // (다운로드 완료 전까지) 버튼 비활성화
  actionBtn.removeEventListener("click", handleDownload);
  actionBtn.innerText = "Transcoding...";
  actionBtn.disabled = true;

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

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

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

  // (2) 썸네일을 만든다
  await ffmpeg.run(
    "-i",
    files.input,
    "-ss",
    "00:00:01",
    "-frames:v",
    "1",
    files.thumb
  );

  // (1)(2) 파일 → blob → url
  const mp4File = await ffmpeg.FS("readFile", files.output);
  const thumbFile = await ffmpeg.FS("readFile", files.thumb);

  const mp4Blob = new Blob([mp4File.buffer], { type: "video/mp4" });
  const thumbBlob = new Blob([thumbFile.buffer], { type: "image/jpg" });

  const mp4Url = URL.createObjectURL(mp4Blob);
  const thumbUrl = URL.createObjectURL(thumbBlob);

  // (1)(2) a.download 이용해 비디오 파일 & 썸네일 다운로드
  downloadFile(mp4Url, "myRecording.mp4");
  downloadFile(thumbUrl, "myThumbnail.jpg");

  // 가상 파일 시스템(FS)에서 파일 unlink
  ffmpeg.FS("unlink", files.input);
  ffmpeg.FS("unlink", files.output);
  ffmpeg.FS("unlink", files.thumb);

  // 파일 url 삭제
  URL.revokeObjectURL(videoFile);
  URL.revokeObjectURL(mp4Url);
  URL.revokeObjectURL(thumbUrl);

  // 다운로드 완료 후 버튼 활성화
  actionBtn.disabled = false;
  actionBtn.innerText = "Record Again";
  init();
  actionBtn.addEventListener("click", handleStart);
};

const handleStop = () => {
  actionBtn.innerText = "Donwload Video";
  actionBtn.removeEventListener("click", handleStop);
  actionBtn.addEventListener("click", handleDownload);
  recorder.stop();
};

const handleStart = () => {
  actionBtn.innerText = "Stop Recording";
  actionBtn.removeEventListener("click", handleStart);
  actionBtn.addEventListener("click", handleStop);
  recorder = new MediaRecorder(stream);
  recorder.ondataavailable = (event) => {
    videoFile = URL.createObjectURL(event.data);
    video.srcObject = null;
    video.src = videoFile;
    video.loop = true;
    video.play();
  };
  recorder.start();
};

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

init();

actionBtn.addEventListener("click", handleStart);

3) 썸네일 업로드 및 보여주기

• Video 데이터에 thumbUrl 필드를 만든다.

thumbUrl: { type: String, required: true }

• upload.pug 파일에 input[type="file"]을 추가한다.

label(for="thumb") Thumbnail File
input(name="thumb", type="file", accept="image/*", id="thumb", required)

• videoRouter.js 파일에서 postUpload 컨트롤러 앞에 추가했던 uploadVideo 미들웨어를 수정한다. (single → fields)

videoRouter
  .route("/upload")
  .all(protectorMiddleware)
  .get(getUpload)
  .post(uploadVideo.fields([{ name: "video" }, { name: "thumb" }]), postUpload);

• videoController.js 파일의 postUpload 컨트롤러에서 req.file 대신에 req.files를 변수로 지정한 후 파일의 경로를 받는다.

export const postUpload = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { title, description, hashtags },
    files: { video, thumb }, // 수정 ❗
  } = req;
  try {
    const newVideo = await Video.create({
      fileUrl: video[0].path, // 수정 ❗
      thumbUrl: thumb[0].path, // 추가 ❗
      title,
      description,
      hashtags: Video.formatHashtags(hashtags),
      owner: _id,
    });
    const user = await User.findById(_id);
    user.videos.push(newVideo._id);
    user.save();
  } catch (error) {
    return res.status(400).render("upload", {
      pageTitle: "Upload Video",
      errorMessage: error._message,
    });
  }
  return res.redirect("/");
};

• 썸네일을 실제로 home이나 search, profile 페이지에서 볼 수 있도록 video.pug 파일을 수정한다.

mixin video(video)
  div.video-mixin__item
    div.video-mixin__outer
      div.video-mixin__inner
        a(href=`/videos/${video.id}`)
          img(src="/" + video.thumbUrl).video-mixin__thumb
    div.video-mixin__data
      a(href=`/videos/${video.id}`).video-mixin__title=video.title
      div.video-mixin__meta
        a(href=`/users/${video.owner._id}`) #{video.owner.name}
        br
        span 조회수 #{video.meta.views} 회 ㆍ #{video.createdAt.getFullYear()}/#{video.createdAt.getMonth()+1}/#{video.createdAt.getDate()}
    hr

• 썸네일 크기와 비율 등을 조절하기 위해 video.scss 파일을 수정한다.
  CSS 백그라운드 이미지 및 엘리먼트 비율로 조절하기, Aspect Ratio 참고

.video-mixin__item {
  .video-mixin__outer {
    width: 250px;
    margin: 0 auto;
    .video-mixin__inner {
      padding-top: calc(100% / 16 * 9);
      overflow: hidden;
      position: relative;
      border-radius: 8px;
      .video-mixin__thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .video-mixin__data {
    padding: 15px 0 10px 0;
  }
  .video-mixin__title {
    font-size: $font-regular;
  }
  .video-mixin__meta {
    padding-top: 10px;
    font-size: $font-micro;
    line-height: 1.4;
  }
}

2. flexbox / grid에서 마지막 행을 정렬하는 방법 🔥

Some ways to align the last row in a flexbox grid 참고

썸네일을 가져왔더니 기존 CSS 스타일의 문제점이 보여서 다시 수정했다.
전체 아이템을 적당한 간격을 유지한 채로 중앙 정렬하면서도, 마지막 행의 아이템은 왼쪽에 정렬하고 싶었다.

(1) flexbox: 가상 요소 추가

Flex-box: Align last row to grid를 참고해 아래와 같이 수정했다.
flex container 마지막 행의 flex item은 왼쪽 정렬시키고, 이를 제외한 나머지 부분에는 가상의 빈 공간를 만들어 채워넣는다.

.video-mixin__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 80px auto;
  &::after {
    content: "";
    flex: auto;
  }
}

• flex: auto를 지정하면, 'flex item이 flex container의 크기를 넘지 않기 위해 최소 크기로 줄어들거나, 남은 공간을 채우기 위해 늘어난다.'

• MDN - flexbox의 기본 개념 참고

  flex 항목을 flex: initial로 지정하면 flex: 0 1 auto 로 지정한 것과 동일하게 동작합니다. 이 경우, flex 항목들은 flex-grow가 0이므로 flex-basis값보다 커지지 않고 flex-shrink가 1이므로 flex 컨테이너 공간이 모자라면 크기가 줄어듭니다. 또, flex-basis가 auto이므로 flex 항목은 주축 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지합니다.

  flex: auto로 지정하면 flex: 1 1 auto로 지정한 것과 동일하며, flex:initial 과는 '주축 방향 여유 공간이 있을 때 flex 항목들이 늘어나서 주축 방향 여유 공간을 채우는' 점만 다릅니다.

(2) div 추가

그런데 위와 같이 가상 요소를 추가하면 마지막 행을 제외한 나머지 행들은 space-between에 의해 간격이 일정해지지만, 마지막 행의 간격만 따로 놀게 된다.

이를 해결하기 위해 마지막 행의 남는 부분에 div를 추가한 후 이를 보이지 않도록 함으로써 그리드가 정사각형이 되도록 할 수 있다.

그러나, 이는 flex item이 총 몇 개인지 알고 있거나 이를 계산해서 div를 동적으로 추가할 수 있을 때만 쓸 수 있는 방법이다.

(3) grid: auto-fill / space-evenly 🔥

[responsive-web] CSS grid-layout repeat() (auto-fill, auto-fit)을 참고해 최종적으로 아래와 같이 수정했다.

.video-mixin__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  justify-content: space-evenly;
  grid-gap: 40px;
  margin: 0 40px;
}

• grid-gap에 의해 grid item 간 간격이 유지된다.
• margin에 의해 브라우저 창의 가로 길이가 줄어들어도 양 옆에 여유 공간이 존재한다.
• space-evenly에 의해 grid item 간 간격이 너무 벌어지지 않으면서도 중앙에 정렬된다.
• repeat(auto-fill, 250px)에 의해 화면 너비만큼 grid item이 나열되다가, 화면 너비에 비해 overflow 된 grid item은 자동으로 wrap 되면서도, 마지막 행의 아이템은 왼쪽 정렬된다.

✨ 내일 할 것

1. thumbnail 마무리 및 복습

2. flash messages