RTCTrackEvent

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流瀏覽器均已支援。

RTCTrackEvent 介面是 WebRTC API 的一部分,代表 track 事件。當一個新的 MediaStreamTrack 被新增到 RTCPeerConnection 的一個 RTCRtpReceiver 時,會發送此事件。

事件的目標是正在新增軌道的 RTCPeerConnection 物件。

此事件由 WebRTC 層傳送給網站或應用程式,因此通常您不需要自己例項化 RTCTrackEvent

Event RTCTrackEvent

建構函式

RTCTrackEvent()

建立並返回一個新的 RTCTrackEvent 物件。您可能不需要自己建立新的 track 事件,因為它們通常由 WebRTC 基礎設施建立併發送到連線的 ontrack 事件處理程式。

例項屬性

由於 RTCTrackEvent 基於 Event,因此其屬性也可用。

receiver 只讀

新增到 RTCPeerConnection 的軌道的 RTCRtpReceiver

streams 只讀 可選

一個 MediaStream 物件陣列,每個物件代表一個新增到連線的 track 所屬的媒體流。預設情況下,陣列為空,表示一個無流的軌道。

track 只讀

已新增到連線的 MediaStreamTrack

transceiver 只讀

新軌道正在使用的 RTCRtpTransceiver

Track event types

只有一種型別的 track 事件。

track

當新的軌道已新增到連線時,RTCPeerConnection 會收到 track 事件。當 track 事件傳遞到 RTCPeerConnectionontrack 處理程式時,新媒體已經完成了對特定 RTCRtpReceiver 的協商(由事件的 receiver 屬性指定)。

此外,接收器的 track 指定的 MediaStreamTrack 與事件的 track 指定的相同,並且該軌道已新增到任何關聯的遠端 MediaStream 物件中。

您可以新增一個 track 事件監聽器來在新的軌道可用時獲得通知,以便您可以將媒體附加到 <video> 元素,可以使用 RTCPeerConnection.addEventListener()ontrack 事件處理程式屬性。

注意: 收到 track 事件時,表示您的連線已新增新的入站軌道;當您呼叫 addTrack() 將軌道新增到連線的遠端時,這會在遠端對等方上觸發一個 track 事件,這一點可能很有幫助。

示例

這個簡單的例子建立了一個 track 事件的事件監聽器,它將 ID 為 video-box<video> 元素的 srcObject 設定為事件的 streams 陣列中傳遞的第一個流。

js
peerConnection.addEventListener("track", (e) => {
  let videoElement = document.getElementById("video-box");
  videoElement.srcObject = e.streams[0];
});

規範

規範
WebRTC:瀏覽器中的即時通訊
# dom-rtctrackevent

瀏覽器相容性