Next-Express 동영상 저장 구현-1

Frontend

동영상 저장 방식 분석

    // onStop시 blob을 통해 videoStreamChunksRef 저장
    mediaStreamInstance.onstop = async () => {
      const blob = new Blob(videoStreamChunksRef.current);

      setRecordedVideoBlobArr((prev) => {
        const newArr = [...prev, blob];
        return newArr;
      });
      videoStreamChunksRef.current = [];

      // setRecordedVideoBlobArr에 저장한 이후에 서버로 전송하는 작업 수행
      console.log(blob);
    };

현재 리액트 앱은 blob을 통해 videoStreamChunksRef를 setRecordedVideoBlobArr에 저장하는 로직을 사용

이후 replay 페이지에서 setRecordedVideoBlobArr을 하나씩 불러와 스트림으로 처리

⇒ setRecordedVideoBlobArr저장 이후 백엔드로 videoStream을 파일로 변환해 전송하여 처리

⇒ 기존에 구현되어있던 로직 그대로 활용이 가능할 것으로 예상

단일 요청의 크기가 증가하여 서버에 부하를 줄 수 있으므로 실 서비스시에는 동영상 저장을 위한 별도의 서버, 혹은 데이터 스트림 전송 방법에 대한 고민이 필요할 것으로 판단됨

Backend

VIDEO MODEL TTL 구현

const videoSchema = new mongoose.Schema({
    filename: String,   // 동영상 이름
    contentType: String,
    workout: String,    // 운동 종류
    set: Number,        // 해당 세트
    userToken: {
        type: String,
        // required: true
    },
    createdAt: {
        type: Date,
    },
    expiredAt: {
        type: Date,
        expires: 0,
    }
});

위와 같이 video model schema를 변경하고

const dtNow = new Date();
const dtExp = new Date(Date.now() + 10);

uploadStream.on('finish', async (uploadedFile) => {
	const video = new VideoModel({
	filename: uploadedFile.filename,
	contentType: uploadedFile.contentType,
	workout: req.body.workout,
	set: req.body.set,
	userToken: req.body.userToken,
	createdAt: dtNow,
	expiredAt: dtExp,
});
...

위 코드와 같이 dtNow, DtExp를 각각 별도로 삽입해 매 비디오 필드 생성시 함께 삽입하면 TTL 구현이 완료되는 것을 볼 수 있음

위 필드는 10초 이후 콜렉션에서 제거됨