WebRTC (SocketIO / Offer / Answer )__002

Room Create

방에 들어갈수 있는 적당한 양식의 Element를 짜주고 SocketIO와 함께 사용하여 서버와 연결해준다.

async function handleRoomCreate(event) {
  event.preventDefault();
  roomName = roomNameInput.value;
  await getMedia();
  socket.emit("room_create", roomName);
  roomNameInput.value = "";
}

socket.on("join_room", () => {
 console.log('join')
});

방의 입장과 동시에 장치들을 불러와준다.

 

서버에서는 방을 만들고 방에 입장할수 있게 코드를 짜준다.

//server.js
const httpServer = http.createServer(app);
const wsServer = SocketIO(httpServer);

wsServer.on("connection", (socket) => {
  socket.on("room_create", (roomName) => {
    socket.join(roomName);
    socket.to(roomName).emit("join_room");
  });
});

WebRTC

방의 입장과 동시 여기 이미지대로 따라하기만 하면된다. WebRTC의 동작원리이다.

첫번째는 양 브라우저의 peerConnection을 만드는 것이다.

async function makePeerConnection() {
  myPeerConnection = new RTCPeerConnection();
}

후에 방을 만들면서 peerConnection을 활성화 하기 위해 function을 배치한다.

async function handleRoomCreate(event) {
  event.preventDefault();
  roomName = roomNameInput.value;
  await getMedia();
  makePeerConnection();
  socket.emit("room_create", roomName);
  roomNameInput.value = "";
}

connection이 연결을 하기 위한 준비가되었으면 우리는 각각 브라우저에게 전달해줄 영상과 오디오를 넣어줘야한다.

async function makePeerConnection() {
  myPeerConnection = new RTCPeerConnection();
  stream
    .getTracks()
    .forEach((track) => myPeerConnection.addTrack(track, stream));

}

두번째는 CreateOffer를 만들어야한다.

도식표에 보면 Peer A 가 Peer B에게 offer를 건내 주는 게 그려져있다. 

이를 위해 SocketIO를 통해 Offer를 날려주자.

Offer는 쉽게 말해 다른 브라우저가 참가할 수 있도록 초대장을 만드는것이다.

Offer를 만들고 연결을 구성하기위해 setLocalDescription을 사용한다.

초대장을 타인에게 날려주기위해 SocketIO로 날려준다.

socket.on("join_room", async () => {
  const offer = await myPeerConnection.createOffer();
  await myPeerConnection.setLocalDescription(offer);
  socket.emit("send_offer", roomName, offer);
});

//server.js
wsServer.on("connection", (socket) => {
  socket.on("room_create", (roomName) => {
    socket.join(roomName);
    socket.to(roomName).emit("join_room");
  });
  socket.on("send_offer", (roomname, offer) => {
    socket.to(roomname).emit("receive_offer", offer);
  });
});

보내준 Offer를 받는 것은 Peer B의 setRemoteDescription이다.

**방을 만들때 장치를 불러오고 peerConnection을 socket으로 동작하게 되면 너무 빨리 데이터가 통신되는 바람에 offer가 안가니 socket으로 보내주지 않도록 하자

받은 offer를 통해 answer를 해줘야한다. 이를 위해 createAnswer를 사용해주고 offer에대한 연결을 해주기위해 setLocalDescription을 해준다. 

후에 타 브라우저가 방에 도착함을 answer를 SocketIO를 통해 보내준다.

socket.on("receive_offer", async (offer) => {
  myPeerConnection.setRemoteDescription(offer);
  const receivedDone = await myPeerConnection.createAnswer();
  myPeerConnection.setLocalDescription(receivedDone);
  socket.emit("received_doneSig", receivedDone, roomName);
});

이렇게 초대장을 보내고 그에 따른 답장을 받고 초대되어 온 친구를 환영하기 위해 

setRemoteDescription을Answer로 담아주면 된다.

//server.js

wsServer.on("connection", (socket) => {
  socket.on("room_create", (roomName) => {
    socket.join(roomName);
    socket.to(roomName).emit("join_room");
  });
  socket.on("send_offer", (roomname, offer) => {
    socket.to(roomname).emit("receive_offer", offer);
  });
  socket.on("received_doneSig", (doneSign, roomname) => {
    socket.to(roomname).emit("answer_offer", doneSign);
  });
});

//client.js

socket.on("answer_offer", (doneSign) => {
  myPeerConnection.setRemoteDescription(doneSign);
});