RTCPeerConnection.ontrack

RTCPeerConnection 속성인 ontrack은 RTCPeerConnection에 트랙이 등록됨을 알려주는 track가 발생하면 호출되는 함수를 지정하는 EventHandler입니다.

이 함수는 RTCTrackEvent 타입의 이벤트 객체를 입력 인자로 받습니다. 해당 이벤트는 신규로 받아지는 MediaStreamTrack가 생성되고 연결의 리시버 세트에 추가된 RTCRtpReceiver객체와 연관되면 전송됩니다.

Syntax

RTCPeerConnection.ontrack = eventHandler;

ontrack을 함수로 지정해서 신규 트랙에 대해 설명하고 어떻게 사용 될지를 알려주는 RTCTrackEvent 객체를 입력 인자로 받도록 하십시오. 이 정보에는 신규 트랙을 나타내는 MediaStreamTrack 객체, RTCRtpReceiverRTCRtpTransceiver, 그리고 트랙이 어느 스트림에 해당하는지를 알려주는 MediaStream의 리스트 객체를 포함합니다. 

예시

아래의 예시는 Signaling and video calling 문서에 나온 코드의 일부입니다. 이 코드는 들어오는 트랙을 <video>에 연결해서 해당 비디오를 보여줄 수 있도록 합니다.

pc.ontrack = function(event) {
  document.getElementById("received_video").srcObject = event.streams[0];
  document.getElementById("hangup-button").disabled = false;
};

첫 줄에 나온 ontrack 이벤트 핸들러는 들어오는 트랙의 첫 스트림을 가져다가 srcobject 속성에 지정합니다. 이렇게 함으로써 비디오의 스트림을 해당 요소에 연결하고, 유저에게 보여 줄 수 있게됩니다. 두 번째줄에서는 "통화 종료" 버튼을 활성화하여 유저가 통화를 종료 할 수 있도록 해줍니다.

사양서

사양서 상태 코멘트
WebRTC 1.0: Real-time Communication Between Browsers
The definition of 'RTCPeerConnection.ontrack' in that specification.
Candidate Recommendation Initial specification.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ontrackChrome Full support 64Edge Full support YesFirefox Full support 22IE No support NoOpera Full support 43
Notes
Full support 43
Notes
Notes Promise-based version.
No support 37 — 43
Safari Full support 11WebView Android Full support 64Chrome Android Full support 64Firefox Android Full support 44Opera Android Full support 43
Notes
Full support 43
Notes
Notes Promise-based version.
No support 37 — 43
Safari iOS Full support YesSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

참조