관심사

면접자의 영상을 스트리밍, 재생하는 컴포넌트

목표

1. Video 태그를 import 하여 사용
2. 면접 중에는 면접자의 영상을 실시간 스트리밍
3. 면접 종료 후에는 면접자의 녹화 영상을 받아 play
4. 재생 시간을 받아 영상의 재생 시간을 지정할 수 있음
5. 현재 영상의 재생 시간을 주기적으로 외부에 제공

형태

Video 태그 기본 형태를 따름

필요 파라미터

구현

import React, { useRef, useEffect } from 'react';
import { useRecoilState } from 'recoil';
import Video, { VideoPropType } from '@components/@shared/Video/Video';
import { currentTimeState } from '@store/feedbackStore';

const IntervieweeVideo = (props: VideoPropType) => {
	const [currentTime, setCurrentTime] = useRecoilState(currentTimeState);
	const videoRef = useRef<HTMLVideoElement>(null);

	const sendPeriod = 1000;
	const sendCurrentTime = () => {
		if (!videoRef.current?.currentTime) return;

		const currentTime = videoRef.current.currentTime;
		setCurrentTime(currentTime);
	};

	useEffect(() => {
		if (videoRef) {
			const intervalId = setInterval(sendCurrentTime, sendPeriod);

			return () => clearInterval(intervalId);
		}
	}, []);

	useEffect(() => {
		if (videoRef) {
			videoRef.current.currentTime = currentTime;
			console.log(currentTime);
		}
	}, [currentTime]);

	return <Video {...props} ref={videoRef} />;
};

export default IntervieweeVideo;

스토리

갱신 필요