WebRTC

WebRTC

• 브라우저에서 별도의 소프트웨어 없이 실시간으로 통신을 가능하게 해주는 웹을 위한 오픈 프레임워크이다.
• 비디오와 음성 채팅 어플리케이션에서 사용되는 오디오와 비디오와 같이 높은 퀄리티의 의사소통을 위한 기본적인 것들을 포함한다. -> 줌 화상통화
• 보통 브라우저에서 실행할때 JavaScript API를 통해 실행할 수 있어 개발자들로 하여금 쉽게 RTC web app을 실행하는 것이 가능하다.

 

WebRTC API

 

 

 

RTC는 비디오,오디오 데이터를 주고받을때 서버가 필요하지않지만 offer를 주고받기 위해서 서버가 필요  
RTC 양쪽 브라우저 연결(각각은 따로 설정한담에 서버에서 socket.io사용해서 연결)

 

-첫번쨰단계 : 입장시 미디어 데이터를 불러옴[getUserMedia]
-두번쨰단계 : peerconnection 생성후 카메라,오디오 데이터를 peerconnection에 집어넣음[addStream]
-세번째단계 : A-B 연결시도시 A가 먼저 연결을 요청한 주체라고 볼수있음(예를들어 방에 먼저 들어온경우, 다른브라우저에게 초대장을보냄)[createOffer][setLocalDescription]
-네번째단계 : offer생성후 연결구성 그리고 offer를  peer B로 전송(socket.io이용)

-다섯번째단계: B는 offer를 받고 setRemoteDescription을 설정하고 answer생성 [setRemoteDescription][createAnswer]
-여섯번째단계: answer를 setLocalDescription을해서 A에게 전송 [setLocalDescription]
-일곱번째단계: answer를 받은 A는 RemoteDescription을 가지게됨 그래서 RemoteDescription ,LocalDescription 둘다가지게됨

 

 

 

// 1단계[getUserMedia]

 welcomeForm.addEventListener("submit" ,async event=>{
    event.preventDefault()
    const input = welcomeForm.querySelector("input")
    await showMedia()
    socket.emit("enter_room" , input.value)
    roomName = input.value
    input.value =""
} )





//2단계  각각에서 데이터를 peerconnection에 집어넣음[addStream]
function makeConnection(){ 
    const myPeerConnection = new RTCPeerConnection()
    myStream.getTracks().forEach(track => myPeerConnection.addTrack(track,myStream)) //track 에는 오디오,비디오가있음 

}





//3단계  [createOffer][setLocalDescription] ,

//4단계 offer를 peer B에 전송(socket.io이용)
socket.on("welcome" ,async () => {
    console.log("someone join")
    const offer = await myPeerConnection.createOffer() //createOffer생성후 연결구성
    myPeerConnection.setLocalDescription(offer)
    socket.emit("offer" , offer ,roomName) //roomName한테 offer전송
})



//다섯번째단계: B는 offer를 받고 setRemoteDescription을 설정하고 answer생성 [setRemoteDescription][createAnswer]

//여섯번째단계: answer를 setLocalDescription을해서 A에게 전송 [setLocalDescription]
socket.on("offer" , offer  => {
    myPeerConnection.setRemoteDescription(offer)
    const answer =  await myPeerConnection.createAnswer()
    myPeerConnection.setLocalDescription(answer) 
    socket.emit("answer" , answer,roomName) 
})





//일곱번째단계: answer를 받은 A는 RemoteDescription을 가지게됨 그래서 RemoteDescription ,LocalDescription 둘다가지게됨

socket.on("answer" ,(answer) => {
    myPeerConnection.setRemoteDescription(answer)
})

 

 

 

client

 

 

 

 

 

 

const server = http.createServer(app);//http 서버생성(nodejs에 내장되어있는 http package )
const io = new Server(server)

io.on("connection" , (socket)=>{
    socket.on("enter_room", (roomName)=>{//나포함 방에들어오는 브라우저마다 실행
        socket.join(roomName) //해당방에 조인
        socket.to(roomName).emit("welcome"); //welcome이벤트 실행
    })
    socket.on("offer" , (offer,roomName) =>{ //offer이벤트를 받음
        socket.to(roomName).emit("offer" , offer)
    })
    socket.on("answer" , (answer,roomName) =>{ //offer이벤트를 받음
        socket.to(roomName).emit("answer" , answer)
    })
    
})

 

server

 

 

 

 

🔍 Data Channel

WebRTC에서 Audio, Video만이 대상이 아니다. 모든 유형의 데이터도 보낼 수 있게 해주는 API

그림으로 보면 아래와 같다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고:WebRTC API - Web API | MDN (mozilla.org)

WebRTC API - Web API | MDN