관심사

받은 소스를 영상으로 보여준다.

목표

비디오의 실행만을 담당하는 비디오 컴포넌트를 만든다.

1. 순수하게 영상을 보여주는 컴포넌트
2. Media Stream의 객체형, url 형태의 주소형 소스에 모두 대응 ??
3. 크기, controls, muted, autoplay 여부 지정 가능
4. 상위 컴포넌트가 ref를 보내서 참조 가능

형태

Video 태그의 기본 형태를 따름

필요 파라미터

구현

import React, { forwardRef, useEffect, useRef } from 'react';

export interface VideoPropType {
	src: string | MediaStream;
	stream: MediaStream;
	width?: number;
	height?: number;
	autoplay?: boolean;
	controls?: boolean;
	muted?: boolean;
}

const Video = ({ src, width, height, autoplay, controls, muted }: VideoPropType, ref) => {
	const videoRef = ref ? ref : useRef<HTMLVideoElement>(null);

	useEffect(() => {
		if (!videoRef.current) return;

		videoRef.current.autoplay = autoplay;
		videoRef.current.controls = controls;
		videoRef.current.muted = muted;

		if (typeof src === 'string') return;

		videoRef.current.srcObject = src;
	}, [src]);

	return typeof src === 'string' ? (
		<video src={src} width={width} height={height} ref={videoRef} />
	) : (
		<video width={width} height={height} ref={videoRef} />
	);
};

export default forwardRef(Video);

스토리