webrtc 튜토리얼
webrtc 시작하기

비고

WebRTC 기반 통신 시스템 설정

WebRTC 기반 통신 시스템을 설정하려면 세 가지 주요 구성 요소가 필요합니다.

1. WebRTC 신호 서버

   WebRTC 연결을 설정하려면 피어가 신호 서버에 연결해야합니다. 그러면 피어가 피어 - 투 - 피어 연결을 설정하는 데 필요한 주소 정보를 제공합니다. 신호 서버는 다음과 같습니다.

   • signalmaster : 경량의 JavaScript 기반 신호 서버
   • NextRTC : 자바 기반 시그널링 서버
   • Kurento : 포괄적 인 WebRTC 프레임 워크
   • Janus : 범용 WebRTC 게이트웨이

2. WebRTC 클라이언트 응용 프로그램

   클라이언트는 JavaScript API를 통해 브라우저의 WebRTC 구현에 액세스하거나 WebRTC 라이브러리 (즉, 데스크톱 또는 모바일 앱의 일부로)를 사용합니다. 피어에 대한 연결을 설정하려면 먼저 클라이언트가 신호 서버에 연결해야합니다. WebRTC 클라이언트의 예는 다음과 같습니다.

   • 여러 가지 프로젝트

   • OpenWebRTC , 모바일 중심의 크로스 플랫폼 클라이언트

   • Peer.js 브라우저 기반 클라이언트 (Peer.js는 경량 서버도 제공함)

   • Janus 데모 예제

3. STUN / TURN 서버

   NAT (Session Traversal Utilities for STUN)를 사용하면 NAT ( Network Adress Translation)를 사용하는 라우터 뒤에서도 주소 정보를 교환 할 수 있습니다. 네트워크 제한으로 인해 피어가 직접 통신하지 못하는 경우 트래픽은 TURN (Traversal Using Relays around NAT) 서버를 통해 라우팅됩니다. STUN 및 TURN에 대한 자세한 설명은 http://www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-connections-ice-stun-and-turn.html 에서 확인할 수 있습니다. WebRTC STUN / TURN 서버의 예는 다음과 같습니다.

   • coturn 은 STUN 및 TURN을 결합하며 일반적으로 완전한 WebRTC 인프라의 일부입니다.
   • Janus WebRTC Gateway 에는 STUN / TURN 서버가 내장되어 있습니다.

WebRTC 소개

WebRTC는 브라우저에서 실시간 커뮤니케이션을 가능하게하는 웹용 개방형 프레임 워크입니다. 음성 및 영상 채팅 응용 프로그램에 사용되는 네트워크, 오디오 및 비디오 구성 요소와 같은 웹상의 고품질 통신을위한 기본 구성 요소가 포함되어 있습니다.

이러한 구성 요소는 브라우저에 구현 될 때 JavaScript API를 통해 액세스 할 수 있으므로 개발자는 자신의 RTC 웹 앱을 쉽게 구현할 수 있습니다.

WebRTC 노력은 W3C 의 API 수준과 IETF 의 프로토콜 수준에서 표준화되고 있습니다.

• 웹의 성공을 좌우하는 핵심 요소는 HTML, HTTP 및 TCP / IP와 같은 핵심 기술이 개방되어 있으며 자유롭게 구현할 수 있다는 것입니다. 현재 브라우저에서 통신 할 수있는 고품질의 완벽한 무료 솔루션은 없습니다. WebRTC는 이것을 가능하게합니다.
• 지난 8 년 이상 수백만 종단점에 배치 된 동급 최강의 음성 및 비디오 엔진과 이미 통합되었습니다. Google은 WebRTC에 대해 사용료를 청구하지 않습니다.
• STUN, ICE, TURN, RTP-over-TCP 및 프록시 지원을 사용하여 주요 NAT 및 방화벽 트래버 설 기술을 포함하고 추상화합니다.
• 웹 브라우저의 강점을 기반으로 구축 : WebRTC는 PeerConnection에 직접 매핑되는 신호 상태 머신을 제공함으로써 신호를 추상화합니다. 따라서 웹 개발자는 사용 시나리오 (예 : SIP, XMPP / Jingle 등)에 따라 선택할 프로토콜을 선택할 수 있습니다.

WebRTC에 대한 자세한 내용은 여기 에서 읽어보십시오.

getUserMedia () API, Hello WebRTC를 사용하여 오디오 및 비디오에 액세스하십시오!

navigator.mediaDevices 는 현재 Chrome 및 FF에서 getUserMedia에 적용된 일반적인 방법입니다.

성공시 로컬 스트림을 반환하는 약속 기반 콜백

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(stream => {
        // attach this stream to window object so you can reuse it later
        window.localStream = stream;
        // Your code to use the stream
    })
    .catch((err) =>{
        console.log(err);
    });

getUserMedia에 오디오 및 비디오 제약 조건 을 전달하여 해상도, 프레임 속도, 장치 기본 설정 등과 같은 캡처 설정을 제어 할 수 있습니다.

동영상 요소에 스트림 연결

// Set the video element to autoplay to ensure the video appears live
videoElement.autoplay = true;
// Mute the local video so the audio output doesn't feedback into the input
videoElement.muted = true;
// attach the stream to the video element

비디오와 오디오 모두 정지

localStream.getTracks().forEach((track) => {
    track.stop();
});

오디오 만 멈춤

localStream.getAudioTracks()[0].stop();

비디오 만 멈춤

localStream.getVideoTracks()[0].stop();

라이브 데모