WebRTC (SFU) - boostcampwm-2022/web36-Japari GitHub Wiki

• 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();
  });
};