아름다운 전진

WebRTC(Web Real-Time Communication)는 브라우저와 모바일 애플리케이션 간의 실시간 통신을 가능하게 하는 강력한 API(Application Programming Interface)입니다. JavaScript를 기반으로 하며 개발자가 비디오 및 음성 채팅, 파일 공유, 화면 공유 등과 같은 피어 투 피어 통신 응용 프로그램을 구축할 수 있습니다.

​

JavaScript WebRTC를 사용하는 단계는 다음과 같습니다.

​

새 WebRTC 프로젝트를 만듭니다.

WebRTC 사용을 시작하려면 새 프로젝트를 생성하고 프로젝트에 WebRTC API를 포함해야 합니다. Visual Studio Code 또는 IntelliJ IDEA와 같은 IDE(통합 개발 환경) 또는 텍스트 편집기를 사용하여 새 프로젝트를 만들 수 있습니다. 프로젝트를 만든 후에는 HTML 파일에 다음 행을 추가하여 WebRTC API를 포함할 수 있습니다.

​

<script src="https://webrtc.github.io/adapter/adapter-latest.js">

​

이 줄은 WebRTC 어댑터 라이브러리를 로드하여 브라우저 간 WebRTC 구현의 차이점을 표준화하는 데 도움을 줍니다.

​

MediaStream 개체를 만듭니다.

​

MediaStream 개체는 오디오 및 비디오와 같은 로컬 미디어 스트림에 액세스하는 데 사용됩니다. 사용자에게 카메라와 마이크에 대한 액세스 권한을 부여하라는 메시지를 표시하는 getUserMedia() 함수를 사용하여 MediaStream 객체를 생성할 수 있습니다. 예를 들면 다음과 같습니다.

​

navigator.mediaDevices.getUserMedia({ video: true, audio: true })

.then(function(stream) {

// handle the stream

})

.catch(function(error) {

// handle the error

});

​

이 예제에서 `getUserMedia()` 함수는 비디오 및 오디오 스트림 모두에 대한 액세스를 요청하는 데 사용됩니다. 사용자가 액세스 권한을 부여하면 스트림 개체가 함수로 반환되어 스트림을 처리할 수 있습니다.

​

피어 연결 만들기:

피어 연결은 WebRTC API의 핵심입니다. 두 피어가 서로 연결하고 통신할 수 있습니다. 피어 연결을 생성하려면 다음과 같이 `RTCPeerConnection()` 생성자를 호출해야 합니다.

​

var pc = new RTCPeerConnection();

​

Ice Candidates 추가:

Ice Candidates는 두 피어 간의 연결을 설정하는 데 사용됩니다. 얼음 후보를 추가하려면 다음과 같이 `addIceCandidate()` 메서드를 사용할 수 있습니다.

​

pc.addIceCandidate(candidate)

.then(function() {

// success

})

.catch(function(error) {

// handle the error

});

​

Offer 만들기:

연결을 설정하려면 한 피어가 로컬 미디어 스트림에 대한 설명인 Offer을 생성해야 합니다. Offer을 생성하려면 다음과 같이 `createOffer()` 메서드를 사용할 수 있습니다.

​

pc.createOffer()

.then(function(offer) {

// set the local description

return pc.setLocalDescription(offer);

})

.then(function() {

// send the offer to the other peer

})

.catch(function(error) {

// handle the error

});

​

Answer 만들기:

다른 피어가 제안을 받으면 로컬 미디어 스트림에 대한 설명인 Answer을 작성해야 합니다. Answer을 만들려면 다음과 같이 `createAnswer()` 메서드를 사용할 수 있습니다.

​

pc.createAnswer()

.then(function(answer) {

// set the local description

return pc.setLocalDescription(answer);

})

.then(function() {

// send the answer to the other peer

})

.catch(function(error) {

// handle the error

});