Never give up

Node - appending row to Google spread sheet

대기만성 개발자 — Tue, 16 Sep 2025 16:17:28 +0900

최근에

1. aws s3에 업로드 되는 파일이 보기 편하면 좋겠다(링크, 날짜, 해당 파일 정보)

2. 에러 발생시 에러대응 가능하도록 트래킹 할수있게 해달라

라는 요구를 받아서 비개발자가 보기에 가장 편한방식이 뭐가 있을까 고민해봤습니다

먼저 개발진행된 상황으로는

1. 특정 pc에만 배포되어있는 react, node

2. 외부 서버 없음

3. 해당 pc는 유저들이 사용하는 pc

그래서 고민해봤던게 2가지로

slack을 사용하는 환경으로 webhook추가(빠른 알람 및 대응)

google spread sheet를 사용해 줄추가를 해보게 됐습니다

webhook은 url이랑 data약속만 지키면 되니 건너뛰고 예제를 만들어봤습니다

~~(사실 대부분이 url이랑 약속만 잘지키면 됩..)~~

export const appendToGoogleSheet = async ({
  state,
  songInfo,
  uuid,
}: {
  state: number;
  songInfo?: string[];
  uuid: string;
}) => {
  try {
    const client = (await auth.getClient()) as any;
    const sheets = google.sheets({ version: "v4", auth: client });

    const s3Link = process.env.S3_BUCKET_FOLDER + uuid + "/";

    let values: string[][];
    let range: string;

    if (state === MEDIA_STATE.error) {
      values = [[s3Link, getCurrentDate()]];
      range = getRange("error", values[0].length);
    } else {
      values = [[...songInfo!, s3Link, getCurrentDate()]];
      range = getRange("log", values[0].length);
    }

    await sheets.spreadsheets.values.append({
      spreadsheetId: SPREADSHEET_ID,
      range,
      valueInputOption: "RAW",
      requestBody: {
        values,
      },
    });
  } catch (err) {
    logger.error(`[google] error: ${getErrMsg(err)}`);
  }
};

const getRange = (sheet: string, columnCount: number) => {
  const lastColumn = String.fromCharCode("A".charCodeAt(0) + columnCount - 1);
  return `${sheet}!A:${lastColumn}`;
};

google api를 사용하다보니 서비스계정이 필요하고

api 설정, 편집자 등록 후 GoogleAuth를 콜해서 인증을 해줍니다

그리고 values에 넣을 데이터를 적어줍니다

이후 range에 "sheet name!첫번째행:마지막행"으로 적어주시면 됩니다

multiple row를 appending하고 싶은 경우

let values:string[][] = []

for(const e of list){
  const value = [...e.songInfo, s3Link, getCurrentDate()]
  values.push(value)
}

request body의 values 부분만 변경해 넣어주시면 됩니다

작업 후 확인해보면 정상적으로 작동되는데, 한가지 아쉬움이 있다면

최신 데이터를 맨 위로 쌓는 기능은 제공하지 않더군요

React, Next - localization with google spread sheet

대기만성 개발자 — Tue, 16 Sep 2025 15:32:13 +0900

대부분의 다국어 지원 서비스를 개발할 때, 비개발자랑 같이 진행하게 되는데

json만 던져주고 알아서 수정하라기에는 난이도가 있다보니

google spread sheet를 공유하면서 작업하는게 더 생산성이 높다 생각합니다

그래서 간단하게 예제를 만들어봤는데

~~(오랜만에 localization 작업하다가 정리 안해놨더니 다시 작업할 때 삽질 포인트를 반복해서 적는건 안비밀)~~

먼저 필자가 원하는 저장경로는 대략 /[lang code]/common.json으로

경로가 다르다면 구현할 때 해당 부분을 조금 신경써주시면 될거 같습니다

const Papa = require("papaparse");
const fs = require("fs/promises");

async function fetchTranslations() {
  const url = 'https://docs.google.com/spreadsheets/d/e/[id]/pub?output=csv';

  console.log("Fetching translations from Google Sheets...", { url });
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Failed to fetch sheet: ${res.statusText}`);

  const csvText = await res.text();
  const parsed = Papa.parse(csvText, { header: true });

  const rows = parsed.data;
  if (!rows.length) throw new Error("No data found in the sheet.");

  const languages = Object.keys(rows[0]).filter((col) => col !== "key");

  const translations = {};
  languages.forEach((lang) => {
    translations[lang] = {};
  });

  rows.forEach((row) => {
    const key = row.key;
    if (!key) return;
    languages.forEach((lang) => {
      translations[lang][key] = row[lang] || "";
    });
  });
  
  for (const lang of languages) {
    await fs.mkdir(`./src/i18n/${lang}`, { recursive: true });
    const filePath = `./src/i18n/${lang}/common.json`;
    await fs.writeFile(
      filePath,
      JSON.stringify(translations[lang], null, 2),
      "utf-8"
    );
    console.log(`Saved ${filePath}`);
  }

  console.log("All translation files saved successfully!");
}

fetchTranslations().catch((err) => {
  console.error("Error fetching translations:", err);
  process.exit(1);
});

먼저 spread sheet에서 웹에 게시를 해줍니다

(google api를 사용하실 예정이면 서비스계정으로 진행하시면 되겠습니다)

google api를 사용하지 않은 이유는 중요한정보를 글로서리로 관리하지 않았고 렌딩페이지 전용이었습니다

~~(가장 중요한 이유는.. 권한을 안주셨어요)~~

fetch로 csv파일 형태로 가져오고, papaparse라는 csv 파싱 라이브러리를 이용해 작업을 하는데

먼저 헤더에서 lang code를 추출하고, key value 형태로 저장합니다

(excel 형태에 따라 변경될 수 있습니다)

이후 각각 언어에 맞게 폴더 생성 및 저장을 진행해주면 됩니다

이후에 해당 파일을 node를 이용해서 해당 코드를 실행해주시면 되겠습니다

{
  "scripts": {
    "download:lang": "node src/i18n/index.js",
    "build": "yarn download:lang && next build",
  }
}

이런식으로 말이죠

React - Multiple camera recording

대기만성 개발자 — Tue, 16 Sep 2025 12:21:34 +0900

최근 여러개의 카메라를 제어할 일이 생겼는데

한번에 모든 카메라를 보여주는 형태는 아니고

원하는 시점에 카메라를 스위칭 후 화면에 보여주고

해당 화면을 원하는 형태로 편집 후 녹화해 주는 기능이 필요했습니다

< 3초마다 변경되는 화면 >

처음에 고민했던 부분은 카메라를 껏다 켯다 해보는거 였는데

media recorder n개를 사용해서 각각 녹화 후 timeline에 맞게 ffmpeg으로 붙여주는 번거로운 작업이 예상 되었고

지연이랑 플리커링 부분 그리고 만약 카메라가 원하는 시점에 안켜지면 서비스 품질이 떨어질거라 예상해 다른 방법을 선택했습니다

1. streaming은 계속 진행

2. canvas를 이용해서 카메라 보여주기

3. 시간 혹은 특정 이벤트에 따른 video 스위칭

4. canvas를 media recorder로 녹화

그럼 코드로 확인해보겠습니다

export const getMultipleMedia = async () => {
  const list = await getMultipleCameras();

  let streams: MediaStream[] = [];

  for (let i = 0; i < list.length; i++) {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: i === 0,
      video: {
        deviceId: { exact: list[i] },
        width: VIDEO_SIZE.width,
        height: VIDEO_SIZE.height,
        aspectRatio: VIDEO_SIZE.aspectRatio,
        frameRate: { ideal: 30, max: 60 },
      },
    });

    streams = [...streams, stream];
  }

  return streams;
};

const getMultipleCameras = async () => {
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    return [];
  }

  // Request permission
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
  });

  try {
    const devices = await navigator.mediaDevices.enumerateDevices();

    // 비디오 입력 장치 (카메라) 필터링
    const videoDevices = devices.filter(
      (device) => device.kind === "videoinput"
    );

    let list: string[] = [];

    for (const e of videoDevices) {
      const label = e.label.toLowerCase();

      if (사용하는 카메라 label) {
        list = [...list, e.deviceId];
      }
    }

    return list;
  } finally {
    // Stop all tracks to turn off camera/mic
    stream.getTracks().forEach((track) => track.stop());
  }
};

사용전에 먼저 permission을 가져와야되는데

기존에 사용하던 request permission은 deprecated돼서, 껏다가 켜는 형태로 진행 했습니다

그리고 사용 가능한 기기들을 검색 후, 원하는 카메라를 가져옵니다

다음으로 카메라 id를 이용해서 stream들을 불러옵니다

const useTestRecord = () => {
  const videoRefList = useRef<HTMLVideoElement[]>([]);

  const frameId = useRef<number>(null);

  const canvasRef = useRef<HTMLCanvasElement>(null);

  const [streams, setStreams] = useState<MediaStream[]>([]);

  const activeIdx = useRef<number>(0);

  const { startInterval, stopInterval } = useInterval(() => {
    activeIdx.current = (activeIdx.current + 1) % streams.length;
  }, 3000);

  console.log(videoRefList.current, activeIdx);

  const {
    videoBlob,
    setVideoBlob,
    setRecordVideo,
    startRecordingVideo,
    stopRecordingVideo,
  } = useTestVideo();

  useEffect(() => {
    init();

    commonUtil.delay(5000).then(() => {
      onStartRecording();
    });
    return () => {
      onTurnOffMedia();
    };
  }, []);

  useEffect(() => {
    onStreamMedia();
  }, [streams]);

  useEffect(() => {
    if (videoBlob) {
      downloadBlob(videoBlob, "test.webm");
    }
  }, [videoBlob]);

  const downloadBlob = (blob: Blob, filename: string) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
  };

  const init = async () => {
    const streams = await getMultipleMedia();

    setStreams(streams);
  };

  const onStreamMedia = () => {
    if (streams.length === 0) {
      return;
    }

    for (let i = 0; i < streams.length; i++) {
      videoRefList.current[i].srcObject = streams[i];
    }

    videoRefList.current[0].onloadedmetadata = () => {
      drawFrame();
      startInterval();
    };

    const videoStream = canvasRef.current!.captureStream(30);

    setRecordVideo(videoStream);
  };

  const onTurnOffMedia = () => {
    for (let i = 0; i < streams.length; i++) {
      const mediaStream = streams[i];
      mediaStream.getTracks().forEach((track) => {
        track.stop();
      });
    }

    videoRefList.current.forEach((video) => {
      video.pause();
      video.srcObject = null;
    });

    stopRecordingVideo();

    stopInterval();
    setVideoBlob(null);

    if (frameId.current) {
      cancelAnimationFrame(frameId.current);
      frameId.current = null;
    }
  };

  const onStartRecording = () => {
    startRecordingVideo();
  };

  const drawFrame = () => {
    drawCanvas(canvasRef.current, videoRefList.current[activeIdx.current]);

    frameId.current = requestAnimationFrame(drawFrame);
  };

  return {
    videoRefList,
    onTurnOffMedia,
    canvasRef,
    streams,
  };
};

해당 hook에서는 canvas를 이용해서 video를 그려서 출력해주는 부분을 진행해줍니다

기본적인 video 세팅 후 interval이 지나면 active index를 바꿔주면서 canvas에 그려주는 작업을 수행합니다

drawCanvas는 여러가지 세팅이 들어갈텐데 필요한 부분만 보자면

const ctx = canvas.getContext("2d");
ctx.drawImage(video, ...기타 크기 세팅);

video 태그에 출력되는 부분을 canvas에 그려주는 형태입니다

이후 해당 부분은 media recorder를 통해 record하는 부분인데

해당 코드는 예제가 많이 있을테니 생략하도록 하겠습니다

추가로 지금 현재 고민되는 포인트는

1. 여러 카메라의 스트리밍을 한 pc에서 받기에 더 나은 쿨링 솔루션이 필요

2. media tracking을 중단했다가 시작하는게 성능적으로 문제 없고, 발열제어에 도움이 될지

3. deviceId 지정 불가능 및 가변적

3번 부분은 gpt신에게 물어보니

IDs are only unstable if: unplug/replug, switch ports, or site loses camera permission.

처음에 작동 시키고 별도로 코드분리, 전원 on/off, permission변경만 없으면 동일하다 합니다

그래서 시나리오로 전원켜기 -> 어드민에서 지정 -> 시작

해당 부분을 자동화할 수 있을지 확인해봐야될거 같습니다

이 부분은 프로젝트를 더 진행해가면서 맞춰봐야될거 같습니다

Ubuntu - install cursor easily

대기만성 개발자 — Wed, 9 Jul 2025 16:44:30 +0900

(해당 작업은 1.3 .AppImage만 다운로드 가능한 시점에 만들어졌습니다)

사용하는 우분투 pc에 cursor ide를 설치하려고 보니 조금 귀찮은 설정이 필요하더군요

간단하게 프로세스를 누가 정리해놔서 확인해보니

(링크 : https://gist.github.com/evgenyneu/5c5c37ca68886bf1bea38026f60603b6)

1. appImage 설치

2. libfuse2 설치

3. appImage 실행 가능하도록 변경

4.1 script로 실행

4.2 파일로 만들기

뭐 한번 해놓으면 문제 없지만 앞으로 사용할 pc마다 하는건 여간 귀찮은일이 아닐 수 없습니다

그래서 자동화를 한번 해봤습니다

프로세스를 간단히 설명드리자면

1. curl을 이용해 cursor appimage download

2. cursor 아이콘 임시 폴더에 설치 후 특정 폴더로 이동(해당 폴더로 다운로드시 permission문제 발생)

3. appimage, 아이콘 permission 변경

4. 앱 표시부분에 등록

5. 임시폴더 삭제

그리고 삭제할 때는 설치된 경로에 있는 파일 제거로 진행을 해봤습니다

사용법은 다음과 같고

//설치시
curl -fsSL https://raw.githubusercontent.com/devmemory/cursor-ubuntu-installer/main/scripts/cursor.sh | sudo bash -s -- install

//삭제시
curl -fsSL https://raw.githubusercontent.com/devmemory/cursor-ubuntu-installer/main/scripts/cursor.sh | sudo bash -s -- uninstall

코드가 궁금하신 분들은 아래 링크를 참고해주세요

(링크: https://github.com/devmemory/cursor-ubuntu-installer)

< 설치 후 등록된 아이콘 >

-- 이하 필자의 헛소리가 있으니 필요하신부분을 얻으셨다면 그냥 넘겨주시면 됩니다

사실 필자는 cursor를 한번도 안사용해봤고 cody ai라는 vs code extension을 사용했었는데

~~(한참 일할 때 회사에서 안사줬어요..)~~

쓰다보니까 이런 무료 extension도 나름 훌륭(?)한데 ide로 내놓는건 얼마나 훌륭할까 해서 써보려하니..

설치부터 귀찮아보이고 삭제도 귀찮아보였습니다 개발자는 귀찮은 일을 해결하는게 주 업무다보니(?)

이런거 하나 만들어볼까 해서 만들어봤는데 GPT가 잘못알려줘서 삽질한 부분이 있었던거 같습니다

커서 설치후 이것저것 테스트 해봐야되는데 셀 스크립트만 열심히 만진건 안비밀..

HLS - 4. outro

대기만성 개발자 — Wed, 19 Mar 2025 18:06:14 +0900

해당 부분에서는 구현한 코드 깃헙 주소와 결과물 gif

그리고 작업하던중 발생한 문제에 대해 공유해보고자 합니다

< upload UI 개선 >

< upload video, streaming HLS>

서버쪽 작업하면서 가장 시간 많이잡아먹은 부분은 다름아닌 nodemon문제 였습니다

nodemon default가 js나 ts가 변경될 때 재시작 되는 특성을 가지는데

ts도 아닌 바이너리 파일(segment.ts)가 변경될때마다 서버가 재시작이 돼서

api는 cancel됐는데 영상은 남아있는 상황이 생겼던거죠..

이거 원인 찾느라 들인 시간이 구현하는 부분보다 더 많이들었었습니다..

그리고 클라이언트쪽에서 테스트하는데 serving url잘못 잡아놔서 발생했던 문제가 조금 있었습니다..

해당 부분을 조금 더 빠르게 지나갔으면 더 빨리 완성했을텐데 하는 아쉬움이 남았습니다..

전체 예제 깃헙 주소 : https://github.com/devmemory/hls_example

Intro : https://devmemory.tistory.com/130

Node server : https://devmemory.tistory.com/131

React client : https://devmemory.tistory.com/132

HLS - 3. HLS player client

대기만성 개발자 — Wed, 19 Mar 2025 17:58:21 +0900

클라이언트쪽은 코드가 상대적으로 많을예정인데

일단 영상 플레이어 자체가 이런저런 기능이 들어가다보니 상대적으로 많아진것도 있습니다

먼저 api 구현부분부터 보면

services/api.ts

export default class Api {
  private instance: AxiosInstance;

  constructor(
    baseURL = "/",
    timeout = 60000
  ) {
    this.instance = axios.create({
      baseURL,
      timeout,
    });

    this.instance.interceptors.request.use(
      (config) => {
        return config;
      },
      (error: AxiosError) => {
        return Promise.reject(error);
      }
    );

    this.instance.interceptors.response.use(
      (response) => {
        return response;
      },
      async (error: AxiosError) => {
        return Promise.reject(error)
      }
    );
  }

  /** - params setting : get(url, {a:1,b:2}) => url?a=1&b=2 */
  protected async get<T>(url: string, params?: any) {
    const res = await this.instance.get<T>(url, { params });

    const rm = res.data;

    return rm;
  }

  protected async post<T>(url: string, data: any, config?: AxiosRequestConfig) {
    const res = await this.instance.post<T>(url, data, config);

    const rm = res.data;

    return rm;
  }
}

언제나 사용하는 공통 axios 셋팅.. 여기에 인증인가 부분이랑 re issue부분은 생략했습니다

services/videoApi.ts

class VideoApi extends Api {
  async getVideoList() {
    return await super.get<string[]>("/api/video/list");
  }

  async uploadVideo(
    file: File,
    onUploadProgress?: (e: AxiosProgressEvent) => void
  ) {
    const formData = new FormData();
    formData.append("file", file);

    const res = await super.post<{ msg: string; url: string }>(
      "/api/video/upload",
      formData,
      {
        headers: { "Content-Type": "multipart/form-data" },
        onUploadProgress,
      }
    );

    return res.msg;
  }
}

export const getVideoList = async () => {
  const api = new VideoApi();

  return await api.getVideoList();
};

export const uploadVideo = async (model: {
  file: File;
  onUploadProgress?: (e: AxiosProgressEvent) => void;
}) => {
  const api = new VideoApi();

  return await api.uploadVideo(model.file, model.onUploadProgress);
};

요즘 tanstack query를 이용하고 있어서 선언부 클래스 따로, 사용하는 함수로 정의하고 있습니다

예제에 사용하는 api는 2개로

1. video 리스트 조회

2. 비디오 업로드

route/upload/index.tsx

const UploadPage = () => {
  const controller = useUploadController();

  return (
    <div className={styles.div_container}>
      <label
        className={`${styles.label_file} ${controller.isIn ? styles.in : ""} ${controller.isLoading ? styles.pending : ""}`}
        onClick={controller.onClickPrevent}
        onDragOver={controller.onDragEnter}
        onDragLeave={controller.onDragLeave}
        onDrop={controller.onDropFiles}>
        <LabelComponent.Loading when={controller.isLoading}>
          <Loading centerFloat={false} />
        </LabelComponent.Loading>
        <LabelComponent.Indicator when={controller.percent !== 0}>
          <div>uploading - {controller.percent}%</div>
        </LabelComponent.Indicator>
        <LabelComponent.Text
          when={!controller.isLoading && controller.percent === 0}>
          <div className={styles.div_upload_btn}>
            Click here to upload video file
            <img
              className={styles.img_upload}
              width={30}
              height={30}
              src="/assets/images/upload.svg"
              onClick={controller.onOpenExplorer}
            />
          </div>
          <p>Or</p>
          <div>Video file in box</div>
          {controller.errMsg && (
            <p className={styles.p_error}>{controller.errMsg}</p>
          )}
        </LabelComponent.Text>
      </label>
      <input
        ref={controller.ref}
        className="hidden"
        type="file"
        onChange={controller.onChangeFile}
      />
    </div>
  );
};

hooks/useUploadController.ts

const useUploadController = () => {
  const ref = useRef<HTMLInputElement>(null);

  const [isIn, setIsIn] = useState<boolean>(false);
  const [errMsg, setErrMsg] = useState<string | null>(null);
  const [percent, setPercent] = useState<number>(0);

  const mutation = useMutation({
    mutationFn: uploadVideo,
    onSuccess(result) {
      toast.success(result);
    },
    onError(error) {
      toast.error(error.message);
      setPercent(0);
      ref.current!.value = "";
    },
  });

  const onDropFiles = (e: DragEvent<HTMLLabelElement>) => {
    e.preventDefault();

    const fileList = e.dataTransfer.files;
    const file = _validateFile(fileList);

    if (file) {
      onUploadFile(file);
    }

    onDragLeave();
  };

  const onChangeFile = (e: ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;

    const file = _validateFile(files);

    console.log({ file });

    if (file) {
      onUploadFile(file);
    }
  };

  const onUploadFile = (file: File) => {
    try {
      mutation.mutate({ file, onUploadProgress });
    } catch (e) {
      ref.current!.value = "";
      setErrMsg(`${e}`);
    }
  };

  const checkFileSize = (file: File) => {
    if (file.size > MAX_FILE_SIZE) {
      const max = Math.round(MAX_FILE_SIZE / 1024 / 1024);
      const uploaded = Math.round(file.size / 1024 / 1024);
      return `File size is too big. Maximum size is ${max}Mb, uploaded file size is ${uploaded}Mb`;
    }

    return null;
  };

  const onUploadProgress = (e: AxiosProgressEvent) => {
    const uploadPercent = Math.round((e.loaded * 100) / (e.total ?? 1));

    if (uploadPercent < 100) {
      setPercent(uploadPercent);
    } else {
      setTimeout(() => {
        ref.current!.value = "";
        setPercent(0);
      }, 3000);
    }
  };

  const _validateFile = (list: FileList | null) => {
    if (list === null) {
      setErrMsg("File doesn't exist");
      return;
    }

    if (list.length > 1) {
      setErrMsg("Please drop only one zip file");
      return;
    }

    const file = list[0];

    if (!file.type.startsWith("video/")) {
      setErrMsg("Only video files are allowed.");
      ref.current!.value = "";

      return;
    } else {
      const msg = checkFileSize(file);

      setErrMsg(msg);
    }

    return file;
  };

  const onOpenExplorer = () => {
    ref.current?.click();
  };

  const onClickPrevent = (e: MouseEvent) => {
    e.preventDefault();
  };

  const onDragEnter = (e: MouseEvent) => {
    onClickPrevent(e);
    if (!isIn) {
      setIsIn(true);
    }
  };

  const onDragLeave = () => {
    if (isIn) {
      setIsIn(false);
    }
  };

  return {
    ref,
    onDropFiles,
    onChangeFile,
    onOpenExplorer,
    onClickPrevent,
    onDragEnter,
    onDragLeave,
    isIn,
    errMsg,
    percent,
    isLoading: mutation.isPending
  };
};

~~(css를 생략해도 view 코드가 참 많은거 같습니다..)~~

간단하게 input 제어하는부분이랑 서버에 업로드 하는 부분만 구현해놨고

서브 컴포넌트를 통해, 어떤 상태일 떄 보여지는지 구분을 해봤는데 조금 더 가독성이 나은거 같습니다

추가로 업로드 완료시 toast호출로 표시되는부분도 만들어봤습니다

업로드 시간 표시는 용량 작은거로 테스트할때는 거의 %가 안보이고

서버 response pending상태로 들어가게 됩니다

작은 동영상 파일도 FFmpeg로 변환시 생각보다 오래 걸립니다

route/viewer/index.tsx

const ViewerPage = () => {
  const controller = useVideoController();

  return (
    <div>
      {controller.videoError !== undefined ? (
        <p className={styles.p_error}>{controller.videoError}</p>
      ) : (
        <div
          ref={controller.container}
          className={
            controller.isFullScreen
              ? `${styles.div_container} ${styles.full_screen}`
              : styles.div_container
          }>
          {controller.loading && <Loading />}
          <video ref={controller.videoRef} onClick={controller.togglePlay} />
          <Overlay
            isPlaying={controller.isPlaying}
            saveMode={controller.saveMode.start}
            startFlag={controller.startFlag.current}
          />
          <Control
            {...controller}
            saveMode={controller.saveMode.start}
            onChangeTime={controller.seek}
          />
          <VideoList
            {...controller}
            onChangeTime={controller.seek}
            onChangeAutoPlay={controller.setAutoPlay}
            onClickVideo={controller.setVideoIdx}
          />
        </div>
      )}
    </div>
  );
};

container ref부분은 전체화면 처리 용도로 사용하고 있고

Overlay는 좌우 이동, 타임라인 저장시 화면에 표시 등을 위해 만들어봤고

Control은 재생/정지 토글버튼, 음량, 비디오 앞으로/뒤로, 타임라인 저장, 전체화면, 화질 조정 등이 있습니다

VideoList는 영상들, 저장된 타임라인을 보여주는 부분으로 구성해봤습니다

outro에서 github 링크부분에서 확인해주시면 될거 같습니다

~~(전부다 넣기에는 너무 많아서...)~~

hooks/useVideoController.ts

const useVideoController = () => {
  const { data } = useQuery({
    queryKey: ["video_list"],
    queryFn: getVideoList,
  });

  const videoList = data ?? [];

  const videoRef = useRef<HTMLVideoElement>(null);

  /** - video, control element */
  const container = useRef<HTMLDivElement>(null);

  /** - hls */
  const hlsRef = useRef<Hls>(null);

  /** - throttle */
  const isCalled = useRef<boolean>(false);

  /** - to prevent auto play */
  const startFlag = useRef<boolean>(false);

  /** - video quality levels */
  const [levelList, setLevelList] = useState<Level[]>([]);

  /** - video total and current duration */
  const [duration, setDuration] = useState<DurationModel>({
    current: 0,
    total: 0,
  });

  /** - loading for video */
  const [loading, setLoading] = useState<boolean>(false);

  /** - selected video idx */
  const [videoIdx, setVideoIdx] = useState<number>(0);

  /** - quality level idx */
  const [levelIdx, setLevelIdx] = useState<number>(0);

  /** - to toggle button */
  const [isPlaying, setIsPlaying] = useState<boolean>(false);

  /** - check screen mode */
  const [isFullScreen, setIsFullScreen] = useState<boolean>(false);

  /** - video error msg */
  const [videoError, setVideoError] = useState<string>();

  /** - play next video automatically */
  const [autoPlay, setAutoPlay] = useState<boolean>(true);

  /** - saved time line */
  const [savedTimes, setSavedTimes] = useState<TimelineModel[]>([]);

  /** - save mode on/off */
  const [saveMode, setSaveMode] = useState<SaveTimeModel>({
    start: false,
    startTime: 0,
    endTime: 0,
  });

  // init media and listener
  useEffect(() => {
    if (videoList.length > 0) {
      _setVideoListener();
      _initMedia();
    }

    return () => {
      _setVideoListener(true);
      _reset();
    };
  }, [videoList, videoIdx]);

  // screen mode change
  useEffect(() => {
    document.onfullscreenchange = () => {
      setIsFullScreen(!isFullScreen);
    };

    return () => {
      document.onfullscreenchange = null;
    };
  }, [isFullScreen]);

  // save timeline
  useEffect(() => {
    if (saveMode.startTime < saveMode.endTime) {
      const { startTime, endTime, img } = saveMode;

      setSavedTimes([...savedTimes, { startTime, endTime, img }]);
    }
  }, [saveMode]);

  // space : play/pause toggle, left/right arrow : move video time
  useEffect(() => {
    document.addEventListener("keydown", _onKeyDown);

    return () => {
      document.removeEventListener("keydown", _onKeyDown);
    };
  }, [isPlaying, duration.current]);

  /** - set video url */
  const _initMedia = async () => {
    setLoading(true);

    const url = `/api/video/${videoList[videoIdx]}/master.m3u8`;

    console.log({ url, videoList });

    if (Hls.isSupported()) {
      hlsRef.current = new Hls();
      hlsRef.current.loadSource(url);
      hlsRef.current.attachMedia(videoRef.current!);

      hlsRef.current.on(Events.MANIFEST_PARSED, (_, data) => {
        console.log({ data });
        setLevelIdx(data.firstLevel);
        setLevelList(data.levels);
      });
    } else {
      toast.error("This browser doesn't support HLS");
      videoRef.current!.src = url;
    }
  };

  /** - set video listeners */
  const _setVideoListener = (reset = false) => {
    if (reset) {
      if(videoRef.current){
        videoRef.current.onloadedmetadata = null;
        videoRef.current.oncanplay = null;
        videoRef.current.ontimeupdate = null;
        videoRef.current.onended = null;
        videoRef.current.onplay = null;
        videoRef.current.onpause = null;
        videoRef.current.onerror = null;
      }
    } else {
      videoRef.current!.onloadedmetadata = _onLoadMetaData;
      videoRef.current!.oncanplay = _canPlayVideo;
      videoRef.current!.ontimeupdate = _onPlayingTimeUpdate;
      videoRef.current!.onended = onNextVideo;
      videoRef.current!.onplay = () => {
        setIsPlaying(true);
      };
      videoRef.current!.onpause = () => {
        setIsPlaying(false);
      };
      videoRef.current!.onerror = (e) => {
        setVideoError(`[Error] ${JSON.stringify(e)}`);
      };
    }
  };

  /** - setting duration */
  const _onLoadMetaData = (e: Event) => {
    const target = e.target as HTMLVideoElement;

    setDuration((state) => {
      return { ...state, total: target.duration };
    });

    if (startFlag.current && autoPlay) {
      _play();
    }
  };

  /** - check if video is playable */
  const _canPlayVideo = () => {
    if (videoRef.current!.readyState === 4) {
      setLoading(false);
    } else {
      setLoading(true);
    }
  };

  /** - move to the next video */
  const onNextVideo = () => {
    const nextIdx = videoIdx + 1;

    if (nextIdx < videoList.length) {
      setVideoIdx(nextIdx);
    } else {
      setVideoIdx(0);
    }
  };

  /** - move to previous video */
  const onPreviousVideo = () => {
    const previousIdx = videoIdx - 1;

    if (previousIdx >= 0) {
      setVideoIdx(previousIdx);
    } else {
      setVideoIdx(videoList.length - 1);
    }
  };

  /** - update playing time */
  const _onPlayingTimeUpdate = (e: Event) => {
    // when level is changed, stop updating
    if (videoRef.current?.paused) {
      return;
    }

    const target = e.target as HTMLVideoElement;

    setDuration((state) => {
      return { ...state, current: target.currentTime };
    });
  };

  /** - reset video data and remove listener, saved times */
  const _reset = () => {
    hlsRef.current?.destroy();

    setLevelList([]);
    setSavedTimes([]);
    setSaveMode({ start: false, startTime: 0, endTime: 0 });
    setDuration({ current: 0, total: 0 });
  };

  /** - keyboard event */
  const _onKeyDown = (e: KeyboardEvent) => {
    switch (e.code) {
      case KEY_CODE.space:
        togglePlay();
        break;
      case KEY_CODE.arrowRight:
        seek(duration.current + 1);
        break;
      case KEY_CODE.arrowLeft:
        seek(duration.current - 1);
        break;
    }
  };

  /** - play video */
  const _play = async () => {
    if (videoRef.current!.paused) {
      await videoRef.current?.play();
    }
  };

  /** - pause video */
  const _pause = () => {
    if (!videoRef.current!.paused) {
      videoRef.current?.pause();
    }
  };

  /** - move to position */
  const seek = (time: number) => {
    if (isCalled.current) {
      return;
    } else {
      isCalled.current = true;

      commonUtil.delay(100).then(() => {
        isCalled.current = false;
      });
    }

    videoRef.current!.currentTime = time;

    setLoading(true);

    setDuration((state) => {
      return { ...state, current: time };
    });
  };

  /** - change volume */
  const onChangeVolume = (value: number) => {
    videoRef.current!.volume = value;
  };

  /** - toggle save time mode */
  const toggleSaveMode = async () => {
    let img: string | undefined;
    if (!saveMode.start) {
      img = await _getThumbnail();
      console.log({ img });
    }

    setSaveMode((state) => {
      if (state.start) {
        return { ...state, start: !state.start, endTime: duration.current };
      } else {
        return {
          ...state,
          start: !state.start,
          startTime: duration.current,
          img,
        };
      }
    });
  };

  /** - toggle play/pause */
  const togglePlay = () => {
    if (isPlaying) {
      _pause();
    } else {
      if (!startFlag.current) {
        startFlag.current = true;
      }
      _play();
    }
  };

  /** - toggle save time mode */
  const toggleSaveMode = async () => {
    let img: string | undefined;
    if (!saveMode.start) {
      img = await _getThumbnail();
      console.log({ img });
    }

    setSaveMode((state) => {
      if (state.start) {
        state.endTime = duration.current;
      } else {
        state.startTime = duration.current;
        state.img = img;
      }

      return { ...state, start: !state.start };
    });
  };

  /** - get thumbnail from video */
  const _getThumbnail = async () => {
    const canvas = await html2canvas(videoRef.current!, { scale: 0.1 });
    const imageFile = canvas.toDataURL("image/jpg", 0.1);

    return imageFile;
  };

  /** - change quality level */
  const onChangeLevel = (i: number) => {
    setLevelIdx(i);

    hlsRef.current!.currentLevel = i;

    if (startFlag.current) {
      hlsRef.current!.detachMedia();

      hlsRef.current!.attachMedia(videoRef.current!);

      setLoading(true);
      _pause();
    }
  };

  return {
    container,
    videoRef,
    levelList,
    levelIdx,
    videoList,
    videoIdx,
    setVideoIdx,
    duration,
    isFullScreen,
    toggleScreenMode,
    togglePlay,
    toggleSaveMode,
    saveMode,
    savedTimes,
    seek,
    loading,
    onChangeVolume,
    isPlaying,
    onNextVideo,
    onPreviousVideo,
    videoError,
    autoPlay,
    setAutoPlay,
    onChangeLevel,
    startFlag,
  };
};

export default useVideoController;

편의 기능들이 많이 있어서 해당 부분에서는 HLS 사용 부분

그리고 thumbnail생성 부분만 다뤄봐도 될거 같습니다

먼저 setVideoListener부터 보면, HLS관련 이벤트 설정/해제 부분으로

영상 시간 셋팅, play/stop/update 등 영상 시간과 관련된 부분과 실행 가능여부 콜백들을 설정해줍니다

다음 initMedia부분을 보면

HLS에 master.m3u8을 조회하고, level(화질 리스트)를 설정해주면

attachMedia로 설정된 video 태그에 영상이 전달되게 됩니다

네트워크에 따른 화질을 자동으로 셋팅하고 싶으면 다음과 같게 하면 됩니다

const hls = new Hls({
  startLevel: -1, // -1이면 가장 적절한 화질을 자동 선택
});

그리고 영상을 변경할 때는 onChangeLevel쪽을 보면 되는데

먼저 HLS 레벨 설정, detachMedia, attachMedia순으로 콜 해주면 됩니다

다음으로 특정 타임라인 저장하는 부분을 보면

캡쳐하는 duration 저장 및 html2canvs라이브러리를 이용해서 해당 돔을 이미지로 추출합니다

그 후 timeline과 같이 저장해줍니다

나머지는 간단한 키보드 이벤트, duration 계산 기타 등등이니 넘어가도록 하겠습니다

Intro : https://devmemory.tistory.com/130

Node server : https://devmemory.tistory.com/131

Outro : https://devmemory.tistory.com/133

HLS - 2. converting and serving server

대기만성 개발자 — Wed, 19 Mar 2025 17:08:56 +0900

이번에는 일반 영상을 올릴 때, FFmpeg으로 변환하는 과정과

영상 데이터를 클라이언트에 전달하는 부분을 보도록 하겠습니다

index.ts

const app = express();

const options = {
  origin: "http://localhost:3000",
  credentials: true,
  optionsSuccessStatus: 200,
};

app.use(cors(options));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use("/api/video", video);

app.listen(8080, () => {
  console.log(`[server] running on localhost:${8080} `);
});

현재 /api/video만 사용하고 있습니다

route/video

const router = Router();

router.get("/list", videoController.getList);
router.get("/:videoId/master.m3u8", videoController.getMaster)
router.get("/:videoId/:name/index.m3u8", videoController.getVideo);
router.get("/:videoId/:name/:segment", videoController.getSegment);
router.post("/upload", videoController.upload);

export default router;

먼저 사용하는 api는 총 5개로

1. /list: 영상 리스트 조회

2. /:videoId/master.m3u8: master 조회

3. /:videoId/:name/index.m3u8: 화질(name)에 따른 index.m3u8 조회

4. /:videoId/:name/:segment: 화질과 영상 순서에 따른 segment 조회

5. /upload: 영상 업로드

models/ResolutionModel.ts

export interface ResolutionModel {
  name: string;
  width: number;
  height: number;
  bitrate: string;
  audioBitrate: string;
}

영상 화질, 너비/높이, bitrate, audio bitrate를 정의 한 모델로

해당 예제에서는 360p, 720p부분만 해당 모델에 매핑해서 사용했습니다

controllers/videoController.ts

import { spawn } from "child_process";
import { Request, Response } from "express";
import formidable from "formidable";
import { accessSync, mkdirSync, readdir, statSync, writeFileSync } from "fs";
import { cpus } from "os";
import path from "path";
import { STATUS_CODE } from "../constants/code";
import {
  fileConst,
  hlsDir,
  MASTER_FORMAT,
  resolutions,
} from "../constants/file";
import { ResolutionModel } from "../models/ResolutionModel";

class VideoController {
  private cores = cpus().length;

  public getList(_: Request, res: Response) {
    readdir(hlsDir, (err, files) => {
      if (err) {
        res
          .status(STATUS_CODE.serverError)
          .json({ msg: "Error reading video folders" });
        return;
      }

      const list = files.filter((file) =>
        statSync(path.join(hlsDir, file)).isDirectory()
      );
      console.log("[video] get list", { list });
      res.status(STATUS_CODE.ok).json(list);
    });
  }

  public async getMaster(req: Request, res: Response) {
    const videoId = req.params.videoId;
    const masterPath = path.join(hlsDir, videoId, "master.m3u8");

    console.log("[video] get master", { masterPath });

    try {
      accessSync(masterPath);
      res.header("Content-Type", "application/vnd.apple.mpegurl");
      res.sendFile(masterPath);
    } catch (err) {
      res.status(STATUS_CODE.clientError).send({ msg: "File doesn't exist" });
    }
  }

  public async getVideo(req: Request, res: Response) {
    const videoId = req.params.videoId;
    const name = req.params.name;
    const m3u8Path = path.join(hlsDir, videoId, name, "index.m3u8");

    console.log("[video] get m3u8", { m3u8Path });

    try {
      accessSync(m3u8Path);
      res.header("Content-Type", "application/vnd.apple.mpegurl");
      res.sendFile(m3u8Path);

      console.log("[video] m3u8");
    } catch (err) {
      res.status(STATUS_CODE.clientError).send({ msg: "File doesn't exist" });
    }
  }

  public async getSegment(req: Request, res: Response) {
    const videoId = req.params.videoId;
    const name = req.params.name;
    const segment = req.params.segment;
    const segmentPath = path.join(hlsDir, videoId, name, segment);

    console.log("[video] get segment", { segmentPath });

    try {
      accessSync(segmentPath);
      res.header("Content-Type", "video/mp2t");
      res.sendFile(segmentPath);
      console.log("[video] segment");
    } catch (err) {
      res.status(STATUS_CODE.clientError).send({ msg: "Segment not found." });
    }
  }

  public upload = async (req: Request, res: Response) => {
    console.log("[upload] video");

    const form = formidable({
      keepExtensions: true,
      multiples: false,
      maxFileSize: fileConst.fileSize,
      filename(_, __, part) {
        const ext = part.originalFilename?.split(".").pop();

        return `${Date.now()}.${ext}`;
      },
    });

    try {
      const [, files] = await form.parse(req);

      if (!files.file) {
        res
          .status(STATUS_CODE.clientError)
          .json({ msg: "Invalid file format." });
        return;
      }

      const file = files.file[0];
      const filePath = file.filepath;
      const outputFolder = path.join(hlsDir, path.parse(filePath).name);

      await this._convertToHLS(filePath, outputFolder);

      res.status(STATUS_CODE.ok).json({ msg: "Upload & conversion complete" });
    } catch (err) {
      console.error("[upload] Conversion error:", err);
      res.status(STATUS_CODE.serverError).json({ msg: `${err}` });
    }
  };

  private _convertToHLS = async (
    inputFilePath: string,
    outputFolder: string
  ) => {
    mkdirSync(outputFolder, { recursive: true });

    const conversionPromises = resolutions.map((resolution) =>
      this._convertSingleBitrate({ ...resolution, inputFilePath, outputFolder })
    );

    try {
      await Promise.all(conversionPromises);

      writeFileSync(path.join(outputFolder, "master.m3u8"), MASTER_FORMAT);
      console.log("[convert] Master M3U8 file created!");
    } catch (error) {
      console.error("[convert] Error in FFmpeg conversion:", error);
    }
  };

  private _convertSingleBitrate = ({
    name,
    width,
    height,
    bitrate,
    audioBitrate,
    inputFilePath,
    outputFolder,
  }: ResolutionModel & { outputFolder: string; inputFilePath: string }) => {
    return new Promise<void>((res, rej) => {
      const resFolder = path.join(outputFolder, name);
      mkdirSync(resFolder, { recursive: true });

      const ffmpegProcess = spawn("ffmpeg", [
        "-i",
        inputFilePath,
        "-preset",
        "ultrafast",
        "-g",
        "100",
        "-sc_threshold",
        "0",
        "-hls_time",
        "10",
        "-hls_list_size",
        "0",
        "-hls_segment_filename",
        path.join(resFolder, "segment_%03d.ts"),
        "-f",
        "hls",
        "-threads",
        `${this.cores}`,
        "-c:v",
        "libx264",
        "-b:v",
        bitrate,
        "-s",
        `${width}x${height}`,
        "-c:a",
        "aac",
        "-b:a",
        audioBitrate,
        path.join(resFolder, "index.m3u8"),
      ]);

      ffmpegProcess.stdout.on("data", (data) =>
        console.log(`[FFmpeg ${name} stdout]: ${data}`)
      );
      ffmpegProcess.stderr.on("data", (data) =>
        console.error(`[FFmpeg ${name} stderr]: ${data}`)
      );

      ffmpegProcess.on("close", (code) => {
        if (code === 0) {
          const m3u8Path = `/static/hls/${path.basename(resFolder)}/index.m3u8`;
          console.log("[convert] Success! HLS file:", m3u8Path);
          res();
        } else {
          console.log("[convert] FFmpeg exited with error code:", code);
          rej(new Error(`FFmpeg failed with code ${code}`));
        }
      });
    });
  };
}

export default new VideoController();

1. getList는 영상이 저장된 폴더를 조회해서 클라이언트에 전달합니다

2. getMaster, getVideo, getSegment는 생성된 텍스트, 영상 파일을 클라이언트에 전달합니다

3. upload는 클라이언트에서 업로드한 비디오를 FFmpeg을 이용해서 HLS를 사용할 수 있는 포맷으로 변환하고, 클라이언트에 메시지를 전달합니다

FFmpeg부분도 간단하게 정리해봤습니다~~(GPT님 감사합니다)~~

"-i", inputFilePath // 원본 동영상
"-preset", "ultrafast" // 인코딩 속도 (빠를수록 파일 크기 작음)
"-g", "100" // 키 프레임으로 100프레임마다 키프레임을 생성 30fps 기준 3.3초마다 키프레임 생성, 숫자가 클수록 압축률이 높고 탐색이 어려움
"-sc_threshold", "0" // 자동 키프레임 삽입 비활성
"-hls_time", "10" // 세그먼트 길이(세그먼트 분할 초)
"-hls_list_size", "0" // 모든 세그먼트를 리스트에 유지
"-hls_segment_filename", path.join(resFolder, "segment_%03d.ts") // 세그먼트 파일네임 지정
"-f", "hls" // 출력 형식을 HLS로 설정
"-threads", `${this.cores} // 성능최적화로 n개의 코어 사용
"-c:v", "libx264" // 비디오 코덱 설정 (H.264)
"-b:v", bitrate // 비디오 비트레이트 설정
"-s", `${width}x${height}` // 출력 해상도 설정
"-c:a", "aac" // 오디오 코덱 aac로 설정
"-b:a", audioBitrate // 오디오 비트레이트 설정
path.join(resFolder, "index.m3u8") // 출력위치 설정

// 해당 예제에 미적용한 별도 옵션
"-crf", "23" // 일정한 품질 유지 (낮을수록 고화질)
"-maxrate", bitrate // 최대 비트레이트 제한
"-bufsize", "2M" // 비트레이트 변동 부드럽게 처리
"-tune", "zerolatency" // 저지연으로 실시간 스트리밍할 때 사용

constants/file.ts

import path from "path";
import { ResolutionModel } from "../models/ResolutionModel";

export const fileConst = {
  fileSize: 500 * 1024 * 1024,
} as const;

export const resolutions: ResolutionModel[] = [
  {
    name: "360p",
    width: 640,
    height: 360,
    bitrate: "800k",
    audioBitrate: "64k",
  },
  {
    name: "720p",
    width: 1280,
    height: 720,
    bitrate: "2500k",
    audioBitrate: "128k",
  },
] as const;

export const MASTER_FORMAT = `#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=640x360,NAME="360"
360p/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2500000,RESOLUTION=1280x720,NAME="720"
720p/index.m3u8
`;

export const hlsDir = path.join(__dirname, "../../static/hls");

해당 부분은 file max size, bitrate설정 부분, master.m3u8 text 정의, 저장 위치를 정의해주는 부분입니다

이전 intro에서 언급했던 부분은데, index.m3u8은 FFmpeg에서 생성되지만

master.m3u8은 별도로 생성 해줍니다

서버는 이정도로 정리해보면 될거같고, 다음에는 클라이언트 부분입니다

Intro : https://devmemory.tistory.com/130

React client : https://devmemory.tistory.com/132

Outro : https://devmemory.tistory.com/133

HLS - 1. Intro

대기만성 개발자 — Wed, 19 Mar 2025 16:03:16 +0900

유튜브, 숲 등 영상 스트리밍 서비스를 하는 곳에서 주로 HLS를 사용하는데

왜 사용하는지 어떤 특징을 가지고 있는지 간단하게 알아보겠습니다

먼저 HLS는 HTTP Live Streaming으로 적응형 비디오 스트리밍 프로토콜입니다

WebRTC와 달리 네트워크 환경에 따라 비트레이트를 조정해

느린 인터넷 환경에서는 저화질, 빠른 인터넷 환경에서는 고화질로 품질을 전환합니다

다만 WebRTC는 실시간성이 좋지만 HLS는 지연시간이 상대적으로 깁니다

Low Latency HLS라는것도 있는데, 영상통화나 회의, 게임등을 할때는 WebRTC를 선택해야됩니다

그리고 HTTP 기반이다 보니 별도의 미디어 서버가 필요하지 않고

CDN과 쉽게 통합이 가능해서 글로벌 서비스에 조금 더 적합합니다

그외에도 라이브 스트리밍 지원, 다양한 플랫폼 지원, 보안 등 있지만 이 부분은 생략하겠습니다

HLS를 위해 영상을 FFmpeg을 이용해서 변환하게 되는데

기본적으로 한개의 m3u8, sgement_n.ts가 생성이 됩니다

이걸 화질별로 여러개 변환하게 되면 다음과 같이 파일이 생성되는데

< 변환된 파일 >

하나씩 알아보도록 하겠습니다

먼저 m3u8은 HLS스트리밍에서 재생목록을 관리하는 텍스트파일으로

텍스트 내용은 다음과 같습니다

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.000000,
segment_000.ts
#EXTINF:10.000000,
segment_001.ts
#EXTINF:2.093000,
segment_002.ts
#EXT-X-ENDLIST

10초 단위로 어떤 segment를 바라봐야되는지 정의되어있습니다

여기서 segment는 확장자가 ts라 TypeScript인가 하고 오해할 수 있지만

영상정보 바이너리 파일입니다 그래서 열어볼수는 없지만 네트워크 탭으로 보면

~~(의미 없는짓 해보자면..)~~

< segment file binary >

이런 형태로 나오게 됩니다

다음으로는 master.m3u8부분을 볼텐데

해당 파일은 FFmpeg으로 변환된 파일이 아닌 index.m3u8을 바라보게 직접 생성해주는 해주는 마스터 파일 입니다

#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=640x360,NAME="360"
360p/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2500000,RESOLUTION=1280x720,NAME="720"
720p/index.m3u8

내용을 보면 대역폭, 화질, 이름, 경로 부분을 설정해주게 되는데

여기서 NAME을 별도로 설정해주지 않으면

HLS.js(클라이언트 라이브러리)에서 name 추출이 안되는 부분이 있어서 꼭 적어주셔야됩니다

< 영상 실행시 전달받는 파일 >

1. master.m3u8을 조회해서 화질 정보를 클라이언트에서 파싱

2. 클라이언트에서 화질 선택(자동/수동)

3. 해당되는 화질의 index.m3u8을 조회해서 현재 플레이에 필요한 segement 조회

4. 해당 segment재생

5. 특정 시간에 도달할 때, 다음 segment조회

이 순서대로 진행됩니다

라이브 스트리밍은 어떤식으로 진행되는지 스터디 해봤는데,

영상 녹화 -> RTMP로 변환 -> HLS로 변환 하는 과정을 거치는 형태인거 같습니다

그러면 의문이 드는게 왜 바로 HLS로 변환 안하지 였는데

고민을 좀 해보니 HLS로 보내면 여러 파일을 실시간으로 서버에 업로드 해야되고

더 큰 대역폭 소모가 있을거 같습니다

360p 480p 720p 1080p 만 보내도 이미 4 * n개의 파일을 실시간으로 보내야되는 겁니다

고로 실시간에는 RTMP를 사용하는것이다 라고 정리하면 될거 같습니다

인트로는 이정도로 마무리 다음은 서버 구현, 클라이언트 구현 순으로 진행하도록 하겠습니다

Node server : https://devmemory.tistory.com/131

React client : https://devmemory.tistory.com/132

Outro : https://devmemory.tistory.com/133

CCTV with NVR and DVR(Feat. RTSP)

대기만성 개발자 — Sat, 15 Mar 2025 17:56:56 +0900

회사에서 진행한 프로젝트 중 CCTV와 연결하는 프로젝트가 있었습니다

맡은 역할은 프론트엔드쪽 WebRTC 연결부분이었지만

전반적인 부분을 이해하고자 간단하게 스터디 한 부분을 남겨볼까 합니다

먼저 NVR과 DVR에 대해 알아보도록 하겠습니다

NVR(Network Video Recorder) : 카메라에서 디지털 신호로 변환된 영상을 네트워크를 통해 전송 후 저장
DVR(Digital Video Recorder) : 카메라에서 전송하는 아날로그 영상을 디지털로 변환하여 저장

< LAN 연결 NVR / 동축 케이블 연결 DVR >

먼저 공동점은 다음과 같습니다

CCTV 카메라에서 수집한 영상 저장 및 관리
실시간 녹화, 일정 시간 후 자동삭제 지원
인터넷 연결을 통한 원격 모니터링
사용자 인증, 암호 설정 등 보안 기능

차이점은 다음과 같습니다

카메라
NVR : LAN 케이블을 이용한 IP 카메라 사용
DVR : BNC 케이블을 이용한 아날로그 카메라 사용
화질 및 성능
NVR : 고해상도 영상 지원(데이터 압축 효율이 높음)
DVR : 아날로그 신호의 한계로 FHD이하
인터넷 및 원격 접근
NVR : 네트워크 기반이라 원격 접속이 쉽고, 클라우드 연동이 원할
DVR : 원격 접속이 필요한 경우, 별도의 네트워크 장비 필요

~~(장비 부분은 개발자가 쓸 때 NVR을 사용하는게 압도적으로 유리할거 같습니다)~~

다음으로 개발자가 궁극적으로 필요한 부분은

어떻게 CCTV영상을 실시간으로 보여줄 수 있을지 일텐데

일반적으로 제공하는 방식은 2가지입니다

1. MJPEG : Motion JPEG
  - 각 영상 프레임을 JPEG 이미지로 압축하여 전송하는 방식
  - 단순 카메라 스트리밍이나 저대역폭 환경에서 사용
  - 오디오 지원 안함

- 단방향 통신
- 사용 프로토콜 : HTTP(TCP/IP)
- 사용 방식 : http://<IP_ADDRESS>/mjpeg

2. RTSP : Real-Time Streaming Protocol
  - 실시간 스트리밍을 위한 프로토콜 사용
  - H.264, H.265와 같은 압축 코덱을 사용해 조금 더 나은 품질과 낮은 대역폭 유지 가능
  - 오디오 지원함(AAC: Advanced Audio Coding)

- 양방향 통신 지원
- 사용 방식 : rtsp://<IP_ADDRESS>:<PORT>/path

각각 대역폭을 비교해보면 720p, 30fps 기준
- MJPEG : 2~5 Mbps
- RTSP : H264 – 1.5~3 Mbps / H265 – 1~1.5 Mbps / AAC – 64kbps ~ 128 kbps

MJPEG을 사용할때는 별도의 변환 없이 image 태그의 src를 사용하면 됩니다

<img src="http://<IP_ADDRESS>/mjpeg" />

다만 상대적으로 고대역을 필요로 하고, 단방향, 오디오 미지원같은 문제가 있습니다

따라서 음성이 필요하거나, 양방향 통신(영상 + 음성 통화)가 필요한 경우 RTSP를 사용해야됩니다

그런데 HTML에서는 기본적으로 rtsp를 지원하지 않습니다

그래서 변환서버를 사용해야되는데

서버 로드랑, 대역폭 관리, 오디오 사용 가능여부등에 따라 구현방식이 조금 달라집니다

기본적으로 2가지를 권장하는데 FFmpeg을 이용해 RTP 혹은 M3U8로 변환 합니다

RTP는 WebRTC의 프로토콜 부분, M3U8은 HLS를 사용할 때 사용하는 파일 포맷입니다

여기서 저지연이 필요하면 WebRTC, 고지연 저~고화질 지원을 한다면 HLS를 선택하면 되겠습니다

각각 FFmpeg을 이용한 변환 하는 방법은 다음과 같습니다

< RTP로 변환 할 때 >

< M3U8로 변환 할 때 >

필자의 프로젝트에서는 관리자와 유저가 CCTV를 이용해서 통화하는 부분이 있어서

WebRTC를 이용해서 진행했습니다

여기서 peer가 bowser나 app이 아닌 영상 변환 서버가 조금 다른 부분이지만

연결방식은 web, app이랑 다르지 않습니다

Three.js - Gerber 3D viewer

대기만성 개발자 — Sun, 29 Dec 2024 00:12:27 +0900

Three.js를 찍먹만 해보다가 회사에서 우연히 3D circuit viewer를 개발할 기회가 생겼었습니다

근데 어디서 이상한(?) 오픈소스 긁어온거 유지보수 하다보니

문제가 많아서 이렇게 해보면 어떨까 하고 만들어 봤습니다

링크: https://devmemory.github.io/gerber-3d-viewer/

< 3D circuit viewer >

먼저 Gerber 파일은 PCB 제조할 때 필수적인 파일로

copper layers, solder mask, SilkScreen, Dril files등 pcb의 납땜되는 부분, 홀, 텍스트 등을 표현한 파일입니다

예제 데이터를 하나 보면

G04 Layer: BottomPasteMaskLayer*
G04 EasyEDA v6.5.44, 2024-08-30 12:30:28*
G04 77815516a58b4829bcb509a324bd7d2e,788fc08b779143ca9705167730dd7b56,00*
G04 Gerber Generator version 0.2*
G04 Scale: 100 percent, Rotated: No, Reflected: No *
G04 Dimensions in millimeters *
G04 leading zeros omitted , absolute positions ,4 integer and 5 decimal *
%FSLAX45Y45*%
%MOMM*%

%AMMACRO1*4,1,4,0.742,-0.0349,0.0349,-0.742,-0.742,0.0349,-0.035,0.742,0.742,-0.0349,0*%
%AMMACRO2*4,1,4,0.742,-0.035,0.0349,-0.742,-0.742,0.0349,-0.0349,0.742,0.742,-0.035,0*%
%AMMACRO3*4,1,4,-0.0353,-0.7424,-0.7424,-0.0353,0.0353,0.7424,0.7424,0.0353,-0.0353,-0.7424,0*%
%AMMACRO4*4,1,4,0.0353,0.7424,0.7424,0.0353,-0.0353,-0.7424,-0.7424,-0.0353,0.0353,0.7424,0*%
%AMMACRO5*4,1,4,0.742,-0.0349,0.0349,-0.742,-0.742,0.035,-0.0349,0.742,0.742,-0.0349,0*%
%AMMACRO6*4,1,4,0.742,-0.0349,0.035,-0.742,-0.742,0.0349,-0.0349,0.742,0.742,-0.0349,0*%
%AMMACRO7*4,1,4,-0.7424,0.0353,-0.0353,0.7424,0.7424,-0.0353,0.0353,-0.7424,-0.7424,0.0353,0*%
%AMMACRO8*4,1,4,-0.5005,-0.6999,0.5005,-0.6999,0.5005,0.6999,-0.5005,0.6999,-0.5005,-0.6999,0*%
%AMMACRO9*4,1,4,-0.5,-0.7,0.5,-0.7,0.5,0.7,-0.5,0.7,-0.5,-0.7,0*%
%AMMACRO10*4,1,4,-0.7417,0.0346,-0.0346,0.7417,0.7417,-0.0346,0.0346,-0.7417,-0.7417,0.0346,0*%
%ADD10MACRO1*%
%ADD11MACRO2*%
%ADD12MACRO3*%
%ADD13MACRO4*%
%ADD14MACRO5*%
%ADD15MACRO6*%
%ADD16MACRO7*%
%ADD17MACRO8*%
%ADD18MACRO9*%
%ADD20MACRO10*%

%LPD*%
D10*
G01*
X8649223Y-1402848D03*
D11*
G01*
X8529012Y-1523057D03*
D12*
G01*
X8649329Y-8635191D03*
G01*
X8529120Y-8514981D03*
D13*
G01*
X8275120Y-8260981D03*
G01*
X8395329Y-8381191D03*
D12*
G01*
X1791258Y-1777094D03*
G01*
X1671048Y-1656883D03*
D14*
G01*
X1791294Y-8260946D03*
D15*
G01*
X1671083Y-8381155D03*
D16*
G01*
X8275048Y-1777094D03*
G01*
X8395258Y-1656883D03*
D13*
G01*
X1416977Y-1402812D03*
G01*
X1537186Y-1523022D03*
D17*
G01*
X1050150Y-1135189D03*
D18*
G01*
X1145222Y-915187D03*
G01*
X955103Y-915187D03*
D20*
G01*
X1417048Y-8635118D03*
G01*
X1537258Y-8514910D03*
M02*

어떤 의미인지 잘 모르겠는 데이터로 이뤄져있습니다

해당 부분을 해결하기 위해

2가지 방법을 생각해봤습니다

1. gerber file을 json으로 만들어서 line, circle등 직접 다 그리기

https://www.npmjs.com/package/gerber-parser

2. gerber file을 이미지로 만들어서 판 생성 후 덮기

https://www.npmjs.com/package/pcb-stackup

시간이 정말 많았다면 1번을 해보겠지만 2번을 선택할만한 이유가 많았습니다

~~(시간은 결국 돈이다 보니 어쩔 수 없는 선택을..)~~

2번으로 작업할 때, 해당 프로세스는 이렇게 됩니다

1. zip파일 해제(jszip링크 참고: https://devmemory.tistory.com/127)

2. 파일 확장자명으로 validation

3. 거버 파일 to svg

4. svg to png

5. 보드 생성

6. 배경, 조명, 인터렉션 등 설정

여기서 svg를 왜 굳이 png로 만드냐면 ~~해보면 압니다~~

보통 3D에 텍스쳐를 입힐 때, 3d image 혹은 vector graphic등을 rasterizing하는 작업이 이뤄지는데

간단하게 이미지를 픽셀화 한다고 생각하시면 될거 같습니다

rasterizing이란 기술에 대해 조금 이해해볼 필요가 있을거 같아서 링크도 붙입니다

(https://ko.wikipedia.org/wiki/%EB%9E%98%EC%8A%A4%ED%84%B0%ED%99%94)

svg를 loader로 불러와서 직접 매핑하면 비트맵을 생성해서 붙이게 되는데

뿌옇게 보이는 이슈가 발생합니다

stackoverflow, chatGPT등 여기저기를 참고해봤을 때

png로 만드는게 더 합리적이겠다라는 생각이 들어서 png로 변환을 해서 붙이는 쪽으로 작업을 해봤습니다