🦺 이벤트 흐름도

https://excalidraw.com/#room=b1539017e58ba9e9a170,euAtvFzfmxnB-uHCAVwF7g

• 완전한 시그널링 생성 후 스트림을 추가하려면 Peer 연결이 스트림과 재협상 해야 합니다.

  https://stackoverflow.com/questions/16015022/webrtc-how-to-add-stream-after-offer-and-answer

• 비디오/오디오를 활성화/비활성화 할때 offer/answer를 새로 보내지 않아도 될 거 같습니다.

  • J290 : 이 부분을 track으로 관리하는 것 같단 생각도 드네요..?

• 초기 입장시만 offer/answer를 주고받는 방식으로 구현

  publishButton.onclick = async () => {
    if (!localStream) {
      localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
      pubVideo.srcObject = localStream;
    }
  
    // 비디오 끄기 또는 켜기 전환
    const videoTrack = localStream.getVideoTracks()[0];
    videoTrack.enabled = !videoTrack.enabled;
  
    if (videoTrack.enabled) {
      pubVideo.srcObject = localStream; // 비디오 송출 활성화
    } else {
      pubVideo.srcObject = null; // 비디오 송출 중지
    }
  
    // 서버에 퍼블리셔 등록 요청
    socket.emit('publish');
  };
  
  //
  peerConnection = new RTCPeerConnection();
  
  peerConnection.ontrack = event => {
    const [remoteStream] = event.streams;
    subVideo.srcObject = remoteStream;
  
    // 비디오 트랙을 가져오기
    const videoTrack = remoteStream.getVideoTracks()[0];
  
    // 상대방의 비디오가 꺼질 때(mute)와 켜질 때(unmute) 이벤트 감지
    videoTrack.onmute = () => {
      console.log('상대방 비디오가 꺼졌습니다.');
      // 여기서 비디오가 꺼진 상태를 UI에 반영할 수 있음
    };
  
    videoTrack.onunmute = () => {
      console.log('상대방 비디오가 다시 켜졌습니다.');
      // 비디오가 다시 켜졌을 때 UI를 업데이트
    };
  };

이벤트 이름

• connection → offerRequest → sendOffer → answerRequest → sendAnswer

room = [참가자 소켓 아이디 …];
newAttendee = 소켓 아이디;
server.on('sendOffer', () ⇒ {})
//
server.on('connection', (socket) ⇒ {
  socket.on('sendOffer', () ⇒ {});
});

• sendOffer(서버) (신규 참가자의 소켓, 기존 참가자의 소켓, offer) ⇒ void

  • 유저의 offer를 기존 참가자에게 전달 (socket.to(기존 참가자의 소켓).emit answerRequest(신규 참가자의 소켓, offer))

• sendIcecandidate(서버) (상대 참가자의 소켓, iceCandidate) ⇒ void

  • 유저의 icecandidate를 상대 참가자에게 전달(socket.to(상대 참가자의 소켓).emit setIcecandidate(자신의 소켓, iceCandidate))

• connection(서버) (socket 신규 참가자의 소켓) ⇒ void

  • 서버에서 해야 하는 이벤트 핸들러 등록
  • 클라이언트 소켓 정보 저장: [socket.id](http://socket.id)
  • 기존 참가자들의 socket.id를 클라이언트에 전송([socket.to](http://socket.to/)([socket.id](http://socket.id/) 신규 참가자의 소켓).emit offerRequest(기존 참가자의 소켓))
  • sendAnswer(서버) (answer) ⇒ void
    • 유저의 answer를 신규 참가자에게 전달 (socket.to(신규 참가자 소켓).emit completeConnection(기존 참가자의 socket, answer))

• ✅ offerRequest(클라이언트) (socketId 기존 참가자의 소켓) ⇒ void

  • 자신의 offer로 setLocalDescription 등록

  • 기존 참가자들에게 offer (socket.emit sendOffer(기존 참가자의 소켓, offer))

  • Offer와 Answer는 setLocalDescription을 하는 순간부터 ICE Candidate 교환을 진행하므로, 생성 직후 설정해주는 것이 좋다.

  • 클라이언트에서는 socket.to 를 사용할 수 없음..!

    // 클라이언트
    socket.emit('sendMessage', {
      to: targetSocketId,    // 수신자 socket.id
      message: 'hello'       // 실제 데이터
    });
    
    // 서버
    socket.on('sendMessage', (data) => {
      // 여기서 socket.to를 사용해 특정 클라이언트에게 전달
      socket.to(data.to).emit('receiveMessage', {
        from: socket.id,
        message: data.message
      });
    });

• ✅ answerRequest(클라이언트) (socketId 신규 참가자의 소켓, offer) ⇒ void

  • 받은 offer로 setRemoteDescription 등록
  • 자신의 offer로 setLocalDescription 등록
  • Offer와 Answer는 setLocalDescription을 하는 순간부터 ICE Candidate 교환을 진행하므로, 생성 직후 설정해주는 것이 좋다.
  • 신규 참가자의 offer에 대한 answer (socket.emit sendAnswer(answer))

• ✅ completeConnection(클라이언트) (socketId 기존 참가자의 소켓, answer) ⇒ void

  • 받은 answer로 setRemoteDescription 등록

• ✅ peerConnection.onicecandidate(클라이언트) = (event) ⇒ { emit sendIceCandidate(iceCandidate)};

• ✅ setIceCandidate(클라이언트) (전송자의 socketId, iceCandidate) ⇒ void

  • 받은 iceCandidate를 추가

sequenceDiagram
    participant User1 as 사용자 1
    participant Server as 서버
    participant User2 as 사용자 2
    participant User3 as 사용자 3

    Note over User1: 사용자1 입장
    User1->>Server: 웹소켓 연결
    Server-->>User1: 현재 방 유저

    Note over User2: 사용자2 입장
    User2->>Server: 웹소켓 연결
    Server-->>User1: 현재 방 유저
    Server-->>User2: 현재 방 유저

    User2->>User1: offer
    User1->>User2: answer

    Note over User2: 사용자2 송출 시작

    Note over User3: 사용자3 입장
    User3->>Server: 웹소켓 연결
    Server-->>User1: 현재 방 유저
    Server-->>User2: 현재 방 유저
    Server-->>User3: 현재 방 유저

    User3->>User2: offer
    User2->>User3: answer

    User3->>User1: offer
    User1->>User3: answer

Loading

sequenceDiagram
    participant Client1 as 사용자 1
    participant Server as 시그널링 서버
    participant Client2 as 사용자 2

    Note over Client1,Client2: 시그널링 서버 연결 단계
    Client1->>Server: 웹소켓 연결
    Client2->>Server: 웹소켓 연결
    
    Note over Client1,Client2: ICE 과정 시작
    Client1->>Client1: RTCPeerConnection 생성
    Client1->>Client1: getUserMedia() 호출<br/>(카메라/마이크 권한 요청)
    
    Client1->>Server: 방 생성/입장 요청
    Server->>Client2: 새로운 참가자 알림
    
    Note over Client1,Client2: Offer/Answer 교환
    Client1->>Client1: createOffer() 호출
    Client1->>Client1: setLocalDescription(offer)
    Client1->>Server: Offer SDP 전송
    Server->>Client2: Offer SDP 전달
    
    Client2->>Client2: RTCPeerConnection 생성
    Client2->>Client2: setRemoteDescription(offer)
    Client2->>Client2: createAnswer() 호출
    Client2->>Client2: setLocalDescription(answer)
    Client2->>Server: Answer SDP 전송
    Server->>Client1: Answer SDP 전달
    
    Client1->>Client1: setRemoteDescription(answer)
    
    Note over Client1,Client2: ICE Candidate 교환
    Client1->>Server: ICE candidate 전송
    Server->>Client2: ICE candidate 전달
    Client2->>Server: ICE candidate 전송
    Server->>Client1: ICE candidate 전달
    
    Note over Client1,Client2: P2P 연결 완료
    Client1-->>Client2: 미디어 스트림 전송
    Client2-->>Client1: 미디어 스트림 전송

Loading

sequenceDiagram
    participant 신규 참가자
    participant 서버
    participant 기존 참가자

    신규 참가자 ->> 서버: connection (신규 참가자 접속)
    서버 ->> 기존 참가자: offerRequest (신규 참가자 socketId 전달)
    
    loop 각 기존 참가자에 대해
        신규 참가자 ->> 서버: sendOffer (신규 참가자의 offer와 대상 socketId)
        서버 ->> 기존 참가자: answerRequest (신규 참가자의 offer 전달)
        
        기존 참가자 ->> 기존 참가자: setRemoteDescription (신규 참가자의 offer 등록)
        기존 참가자 ->> 기존 참가자: createAnswer (answer 생성)
        기존 참가자 ->> 서버: sendAnswer (신규 참가자에게 answer 전송)
        서버 ->> 신규 참가자: completeConnection (기존 참가자의 answer 전달)
        
        신규 참가자 ->> 신규 참가자: setRemoteDescription (기존 참가자의 answer 등록)
    end

    Note right of 신규 참가자: Offer와 Answer 교환 이후 ICE 후보 생성 및 교환 시작

    par ICE 후보 교환
        신규 참가자 ->> 서버: sendIceCandidate (신규 참가자의 ICE 후보와 대상 socketId)
        서버 ->> 기존 참가자: setIceCandidate (신규 참가자의 ICE 후보 전달)
        
        기존 참가자 ->> 서버: sendIceCandidate (기존 참가자의 ICE 후보와 대상 socketId)
        서버 ->> 신규 참가자: setIceCandidate (기존 참가자의 ICE 후보 전달)
    end

Loading