WebRTC (SFU)

• 저희 조는 SFU 미디어 서버로 mediasoup를 사용하여 화상대화를 구현하였습니다. 저희의 플랫폼의 경우, 한 방에 최대 8명이 방에 들어가게 되는데, 소규모 N:M 형식의 실시간 스트리밍에 적합한 SFU 방식을 채택했습니다.
  • SFU 방식은 연결된 모든 사용자에게 데이터를 보낼 필요없이 서버에게만 데이터를 보내주기 때문에 P2P 방식보다 클라이언트의 부하가 현저히 줄어들게 됩니다.

• 로직
  1. 유저가 로컬 stream을 설정
  2. 해당 방의 router로부터, 없다면 router를 생성
  3. 코덱 유형, 클럭속도 등이 담긴 정보를 받아 device를 생성
  4. 그리고 transport를 생성하여 다른 사람의 스트림을 consume하거나, 자신의 스트림을 produce

• 처음 데모를 참고하여 구현했을 때, 장치가 있어야만 해당 방의 peer로 등록되어 다른 사람들의 스트림을 받을 수 있었지만, 이후 장치가 없어도 방에 입장하면 peer와 consumer로 등록하여 다른 사람의 스트림을 받을 수 있도록 개선하였습니다.

  const getLocalStream = () => {
  	navigator.mediaDevices.getUserMedia({...})
  		.then(...)
  		.catch(error => {
  		  localUserMedia = false;
  			...
  	  });
  }
  
  const createSendTransport = async () => {
  	// 장치가 없다면 바로 consumer로 등록
    if (!localUserMedia) {
      getProducers();
      return;
    }
  	
  	// 장치가 있다면 스트림을 produce후 consumer로 등록
    socket.emit("media/createWebRtcTransport", { consumer: false }, (transportOptions: TransportOptions) => {
      producerTransport = device.createSendTransport(transportOptions);
      handleCreateProducerTransport();
    });
  };