RTCPeerConnection: icegatheringstatechange event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

icegatheringstatechange 이벤트는 ICE candidate 수집 과정이 변경되면, RTCPeerConnection의 이벤트 핸들러인 onicegatheringstatechange로 전달됩니다. 이는 연결의 iceGatheringState 속성이 변경되었다는 것을 뜻합니다.

ICE가 처음 연결 candidate들을 수집하게되면 값이 new에서 gathering으로 바뀌게 되고, 이는 연결에 대한 candidate 설정들을 수집하는 과정 중에 있다는 뜻입니다. 값이 complete가 되면, RTCPeerConnection을 구성하는 모든 트랜스포트들이 ICE candidate 수집을 완료한 상태입니다.

Bubbles No
취소가능여부 No
인터페이스 Event
이벤트 핸들러 onicegatheringstatechange

참고 : ICE candidate 수집 과정이 완료되었는지는 icegatheringstatechange이벤트와 iceGatheringState의 값이 complete로 바뀌는 것을 확인하면 알 수 있습니다. 하지만, 더 쉬운 방법으로는 icecandidate 이벤트에 대한 핸들러가 candidate 속성의 값이 null로 변하는 시점을 체크하도록 할 수 있습니다. 이 속성이 null 값으로 바뀌었다는 것은 즉 모든 candidate 수집이 완료되었다는 뜻입니다.

예시

아래 예제는 icegatheringstatechange 이벤트에대한 핸들러를 생성합니다.

js
pc.onicegatheringstatechange = (ev) => {
  let connection = ev.target;

  switch (connection.iceGatheringState) {
    case "gathering":
      /* candidate 수집 과정 시작 */
      break;
    case "complete":
      /* candidate 수집 완료 */
      break;
  }
};

아래처럼 addEventListener()을 사용해서 icegatheringstatechange 이벤트에 대한 변경을 감지하는 리스너를 추가 할 수 있습니다.

js
pc.addEventListener(
  "icegatheringstatechange",
  (ev) => {
    let connection = ev.target;

    switch (connection.iceGatheringState) {
      case "gathering":
        /* candidate 수집 과정 시작 */
        break;
      case "complete":
        /* candidate 수집 완료 */
        break;
    }
  },
  false,
);

명세

Specification
WebRTC: Real-Time Communication in Browsers
# dom-rtcpeerconnection-onicegatheringstatechange

브라우저 호환성

BCD tables only load in the browser

참조