React기반 Client에서 Webcam으로 실시간 비디오 스트리밍!

React기반 Client에서 Webcam으로 실시간 비디오 스트리밍!

 

 

<button />을 누르면 local에 연결된 webcam으로 영상정보를 받고 <video />를 통해 스트리밍 하는 간단한 프로젝트입니다.

 

create-react-app으로 project를 만들어줍니다.

 

그 후 App.tsx를 정리하고 <video /> 태그와 <button /> 태그를 만들어줍니다.

import React from "react";
import "./App.css";

function App() {
  return (
    <div className="App">
      <video autoPlay />
      <button>start</button>
    </div>
  );
}

export default App;

---

webcam에서 영상정보를 받아올 기능을 만들어 보겠습니다.

import React from "react";
import "./App.css";

function App() {

  const startVideo = async () => {
    const stream = await navigator.mediaDevices.getUserMedia();
  };

  return (
    <div className="App">
      <video autoPlay />
      <button>start</button>
    </div>
  );
}

export default App;

navigator에 내장된 mediaDivices를 통해 연결된 미디어 장치에 접근할 수 있습니다.

 

mediaDivice에 내장된 getUserMedia() 메서드로 MediaStream을 가져올 수 있습니다. 

---

MediaStream을 받아올 때 어떤 상태로 받아올지 정할 수 있습니다.

import React, { useRef } from "react";
import "./App.css";

const CONSTRAINTS = { video: true };

function App() {

  const startVideo = async () => {
    const stream = await navigator.mediaDevices.getUserMedia(CONSTRAINTS);
  };

  return (
    <div className="App">
      <video autoPlay />
      <button>start</button>
    </div>
  );
}

export default App;

CONSTRAINTS라는 변수를 주고 video만 가져오도록 true값을 주었습니다.

---

<video />에 걸어줄 useRef Hook을 만들어 줍니다.

import React, { useRef } from "react";
import "./App.css";

const CONSTRAINTS = { video: true };

function App() {
  const videoRef = useRef<HTMLVideoElement>(null);

  const startVideo = async () => {
    const stream = await navigator.mediaDevices.getUserMedia(CONSTRAINTS);
  };

  return (
    <div className="App">
      <video autoPlay />
      <button>start</button>
    </div>
  );
}

export default App;

---

videoRef로 stream을 <video/>에 연결하는 방법은 다음과 같습니다.

import React, { useRef } from "react";
import "./App.css";

const CONSTRAINTS = { video: true };

function App() {
  const videoRef = useRef<HTMLVideoElement>(null);

  const startVideo = async () => {
    const stream = await navigator.mediaDevices.getUserMedia(CONSTRAINTS);
    if (videoRef && videoRef.current && !videoRef.current.srcObject) {
      videoRef.current.srcObject = stream;
    }
  };

  return (
    <div className="App">
      <video autoPlay ref={videoRef} />
      <button>start</button>
    </div>
  );
}

export default App;

<video/>의 ref속성에 videoRef를 걸어줍니다.

그 후 videoRef.current(현재 참조중인 엘리먼트)의 srcObject에 stream을 줍니다.

(이때 &&연산자를 통해 videoRef가 준비 된 후 stream을 넣어줄 수 있도록 합니다.)

 

---

<button />의 onClick속성에 스트리밍 받아오는 함수를 걸어줍니다.

import React, { useRef } from "react";
import "./App.css";

const CONSTRAINTS = { video: true };

function App() {
  const videoRef = useRef<HTMLVideoElement>(null);

  const startVideo = async () => {
    const stream = await navigator.mediaDevices.getUserMedia(CONSTRAINTS);
    if (videoRef && videoRef.current && !videoRef.current.srcObject) {
      videoRef.current.srcObject = stream;
    }
  };

  return (
    <div className="App">
      <video autoPlay ref={videoRef} />
      <button onClick={startVideo}>start</button>
    </div>
  );
}

export default App;

코드를 실행해 보세요.

---