React에서 WebRTC 사용하기

 

WebRTC(Web Real-Time Communication)는 브라우저와 모바일 애플리케이션 간의 실시간 통신을 가능하게 해주는 기술입니다. 이를 통해 P2P(peer-to-peer) 데이터 교환 및 미디어 스트리밍이 가능합니다. React 애플리케이션에서 WebRTC를 구현하면 화상 통화, 음성 채팅, 실시간 파일 공유 등 다양한 기능을 제공할 수 있습니다. 이번 글에서는 React와 WebRTC를 통합하여 실시간 통신 기능을 구축하는 방법을 단계별로 살펴보겠습니다.

---

1. WebRTC란 무엇인가?

WebRTC는 웹 애플리케이션이나 사이트에서 플러그인 없이 오디오, 비디오, 데이터 스트리밍을 가능하게 하는 오픈 소스 프로젝트입니다. 주요 특징은 다음과 같습니다:

• P2P 연결: 서버를 거치지 않고 클라이언트 간 직접 연결이 가능합니다.
• 실시간 미디어 스트리밍: 오디오와 비디오 데이터 전송을 지원합니다.
• 데이터 채널: 텍스트, 파일, 바이너리 데이터를 효율적으로 전송할 수 있습니다.

대표적인 WebRTC 사용 사례는 화상 회의, 온라인 게임, 파일 공유입니다.

---

2. WebRTC의 주요 구성 요소

WebRTC를 이해하려면 다음 세 가지 주요 구성 요소를 알아야 합니다:

2.1 MediaStream API

• 사용자의 카메라와 마이크에 액세스하여 오디오 및 비디오 스트림을 가져옵니다.

2.2 RTCPeerConnection

• 두 클라이언트 간 P2P 연결을 설정합니다.
• 오디오, 비디오 및 데이터 채널을 관리합니다.

2.3 RTCDataChannel

• 텍스트, 파일 및 기타 데이터를 전송할 수 있는 채널을 제공합니다.

---

3. React에서 WebRTC 구현하기

3.1 프로젝트 설정

React 프로젝트를 생성합니다:

npx create-react-app react-webrtc
cd react-webrtc

필요한 라이브러리를 설치합니다:

npm install simple-peer

simple-peer는 WebRTC를 쉽게 사용할 수 있도록 도와주는 라이브러리입니다.

3.2 MediaStream으로 사용자 미디어 가져오기

사용자의 카메라와 마이크에 액세스하려면 navigator.mediaDevices.getUserMedia를 사용합니다:

// App.js
import React, { useEffect, useRef } from 'react';

function App() {
  const videoRef = useRef(null);

  useEffect(() => {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then((stream) => {
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      })
      .catch((error) => {
        console.error('Error accessing media devices.', error);
      });
  }, []);

  return (
    <div>
      <h1>WebRTC Demo</h1>
      <video ref={videoRef} autoPlay playsInline />
    </div>
  );
}

export default App;

이 코드는 사용자의 비디오 스트림을 가져와 화면에 표시합니다.

3.3 P2P 연결 설정

simple-peer를 사용하여 두 클라이언트 간 연결을 설정합니다:

// App.js
import React, { useEffect, useState, useRef } from 'react';
import Peer from 'simple-peer';

function App() {
  const [peer, setPeer] = useState(null);
  const videoRef = useRef(null);

  useEffect(() => {
    const newPeer = new Peer({ initiator: window.location.hash === '#1', trickle: false });

    newPeer.on('signal', (data) => {
      console.log('Signal data:', data);
    });

    newPeer.on('stream', (stream) => {
      if (videoRef.current) {
        videoRef.current.srcObject = stream;
      }
    });

    setPeer(newPeer);

    return () => newPeer.destroy();
  }, []);

  const connectToPeer = (signalData) => {
    if (peer) {
      peer.signal(signalData);
    }
  };

  return (
    <div>
      <h1>WebRTC P2P 연결</h1>
      <video ref={videoRef} autoPlay playsInline />
      <button onClick={() => connectToPeer(prompt('상대방의 신호 데이터를 입력하세요:'))}>
        연결하기
      </button>
    </div>
  );
}

export default App;

이 코드는 P2P 연결을 설정하고 상대방의 스트림을 화면에 표시합니다. signal 이벤트를 사용하여 연결 데이터를 교환합니다.

---

4. RTCDataChannel로 데이터 전송

P2P 연결에서 데이터 채널을 설정하여 메시지나 파일을 전송할 수도 있습니다:

// App.js
import React, { useEffect, useState } from 'react';
import Peer from 'simple-peer';

function App() {
  const [peer, setPeer] = useState(null);
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    const newPeer = new Peer({ initiator: window.location.hash === '#1', trickle: false });

    newPeer.on('signal', (data) => {
      console.log('Signal data:', data);
    });

    newPeer.on('data', (data) => {
      setMessages((prev) => [...prev, data.toString()]);
    });

    setPeer(newPeer);

    return () => newPeer.destroy();
  }, []);

  const sendMessage = () => {
    if (peer && input) {
      peer.send(input);
      setMessages((prev) => [...prev, `You: ${input}`]);
      setInput('');
    }
  };

  return (
    <div>
      <h1>WebRTC 채팅</h1>
      <div>
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="메시지를 입력하세요"
      />
      <button onClick={sendMessage}>전송</button>
    </div>
  );
}

export default App;

이 코드는 메시지를 전송하고 수신된 메시지를 표시하는 간단한 채팅 애플리케이션입니다.

---

5. 결론

React에서 WebRTC를 사용하면 실시간 통신 애플리케이션을 손쉽게 구축할 수 있습니다. 이번 글에서는 MediaStream으로 미디어를 가져오는 방법, RTCPeerConnection을 활용한 P2P 연결, 그리고 데이터 채널을 이용한 메시지 전송을 살펴보았습니다. 이 예제를 바탕으로 화상 통화, 파일 공유 등 다양한 기능을 추가하여 더욱 풍부한 애플리케이션을 개발해보세요.