[React+ Typescript] Video에 MediaStream 연동하기

글을 쓰게된 동기

최근 WEB RTC 관련된 토이 프로젝트를 리액트로 제작하고 있는데, 현재 나와있는 비디오 라이브러리들의 대다수가 타입스크립트를 지원하지 않았다.
또 타입스크립트를 지원하면 next를 지원하지 않아 (내가 설정하는 방법을 모르는 거겠지) 직접 html5와 같이 Video View를 만들었다.

실제로 srcObject를 연동시키는데 어려움을 겪는 나와같은 친구가 있을까봐 글을 적는다.
소스코드는 실제로 간단하니 설명은 적지 않겠다.

• Componet/RTCVideo.tsx

import { useRef, useEffect } from "react";

interface RTCVideoProps {
  mediaStream: MediaStream | undefined;
}

const RTCVideo = ({ mediaStream }: RTCVideoProps) => {
  const viewRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (!viewRef.current)
        return;
    viewRef.current.srcObject = mediaStream ? mediaStream : null;
  }, [mediaStream]);

  return <video ref={viewRef} autoPlay controls></video>;
};

export default RTCVideo;

• page/rtc.tsx

import { useState, useEffect} from "react";
import RTCVideo from '../component/RTCVideo';


const rtc = () => {
  const [localStream, setLocalStream] = useState<MediaStream>();
  
  useEffect(()=>{
    navigator.mediaDevices.getUserMedia({video: true})
    .then(stream=>{
      setLocalStream(stream);
    })
  },[]);

  return (
    <div>
      <RTCVideo
        mediaStream = {localStream}
      />
    </div>
  );
};

느낀점

어떻게 보면 타입스크립트에 대한 공부라고 할 수 있는데, 아무래도 타입스크립트가 Null check에 굉장히 민감한 언어라는 것을 느꼈다.
Null Checking이 Kotlin과 처리하는 방식이 또 달라서, 처음에는 조금 혼란스러웠다. (kotlin의 let같은 기능을 넣어주면 좋을 것 같다) 차차 타입스크립트 작성을 하는데도 조금 익숙해지고 있는 것 같아 다행이라고 생각된다.

얼른 프론트엔드 끝내고 서버작업해야즤