WebRTC(웹 실시간 통신)는 HTML5에서 지원하는 기술로, 웹 브라우저 간에 음성, 비디오 및 데이터를 실시간으로 전송할 수 있게 해주는 오픈 소스 프로젝트입니다. WebRTC는 주로 JavaScript API로 사용되며, 여기에는 미디어 스트리밍, 데이터 교환 및 네트워크 정보 수집을 위한 다양한 API가 포함되어 있습니다. 아래는 WebRTC를 사용한 간단한 예제입니다.

미디어 스트리밍(음성 및 비디오)

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebRTC Example</title>
</head>
<body>
  <h1>WebRTC Media Streaming Example</h1>
  <video id="localVideo" autoplay muted></video>
  <video id="remoteVideo" autoplay></video>

  <script>
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then((stream) => {
        const localVideo = document.getElementById('localVideo');
        localVideo.srcObject = stream;

        // Send the stream to a peer (not shown in this example)
      })
      .catch((error) => {
        console.error('Error accessing media devices:', error);
      });
  </script>
</body>
</html>

피어 간 데이터 교환

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebRTC Data Channel Example</title>
</head>
<body>
  <h1>WebRTC Data Channel Example</h1>
  
  <textarea id="localDataChannel"></textarea>
  <textarea id="remoteDataChannel"></textarea>

  <script>
    const localDataChannel = document.getElementById('localDataChannel');
    const remoteDataChannel = document.getElementById('remoteDataChannel');

    const peerConnection = new RTCPeerConnection();

    // Create a data channel
    const dataChannel = peerConnection.createDataChannel('myDataChannel');

    // Set up event handlers
    dataChannel.onopen = () => {
      console.log('Data channel opened');
    };

    dataChannel.onmessage = (event) => {
      remoteDataChannel.value += event.data + '\n';
    };

    // Offer/answer code (not shown in this example)

    // Set up the local data channel
    localDataChannel.addEventListener('input', () => {
      const message = localDataChannel.value;
      dataChannel.send(message);
    });
  </script>
</body>
</html>

이러한 예제는 WebRTC의 기본 개념을 보여주기 위한 간단한 것이며, 더 복잡한 시나리오에서는 SDP(Offer/Answer), ICE(Interactive Connectivity Establishment) 등이 더 많이 사용될 수 있습니다. 완전한 WebRTC 애플리케이션은 더 많은 코드와 서버 측 로직이 필요할 수 있습니다.