[나만무] react-webcam

배경

웹기반 실시간 화상 게임(with 모션 인식)을 주제로 화상채팅 기능을 구현했었다. NomadCoder의 줌 클론코딩으로 시작해서 그것을 그대로 프로젝트에 적용했었는데, 알대일 화상 채팅만을 할 때는 문제가 없었다. 그러나 미디어파이프의 모션 인식을 접목시키자 <canvas>에 그려지는 손 골격이 매우 느려지는 것을 확인했다. 검색을 해도 다른 사람들은 손 골격이 실제 손에 잘 붙어있는 반면, 나의 모션인식은 반박자는 느렸다. 단순히 노트북 성능이슈로 생각하고 넘겼는데, 오늘 react-webcam이라는 라이브러리를 사용함으로써 원인을 알 수 있었다.

 

이전 방식

navigator.mediaDevices?.getUserMedia를 사용해서 디바이스의 노트북을 찾고, stream도 꺼낸 다음, <video> 태그를 js로 가져와서 비디오 태그에 집어넣었다. 리액트에서 바닐라JS처럼 구현을 했었다. 화상채팅만 할 때는 속도가 빨랐어서 문제를 못 느꼈었지만, 모션 인식이 들어가니 속도차이가 확연히 드러났다.

 

react-webcam 방식

https://www.npmjs.com/package/react-webcam

react-webcam

 

이 속도 문제를 개선하기 위해서는 react 외부 라이브러리인 react-webcam 라이브러리를 사용하면 된다! 원리는 알 수 없지만 직접 구현한 웹캠보다 월등히 속도가 빠르다. 사용방법도 무척 간단한데, 이전처럼 디바이스에서 카메라 가져오고 할 필요없이, 그냥 <Webcam> 컴포넌트를 집어넣으면 자동으로 웹캠이 켜진다!

    <Webcam
        audio={false}
        width={500}
        height={700}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
        videoConstraints={{ width: 500, height: 500, facingMode: "user" }}
      />

모션인식을 집어넣으면 느려지지않을까 했지만, 캔버스에 그려지는 골격이 내 손인 것처럼 딜레이없이 부드럽게 아주 잘 나온다. 나만무 개발에 들어간지 오래 되지 않아서 다행이다.

 

테스트 영상