RTCPeerConnection:track 事件

Baseline 已廣泛支援

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

當新的 track 已新增到連線的 RTCRtpReceiver 時,會向 RTCPeerConnection 上的 ontrack 事件處理程式傳送 track 事件。 在此事件送達時,新的 track 已完全新增到 peer connection。 更多詳情請參閱 Track 事件型別

在傳送此事件時,新的 track 已完全新增到 peer connection。 更多詳情請參閱 Track 事件型別

此事件不可取消,也不會冒泡。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。

js
addEventListener("track", (event) => { })

ontrack = (event) => { }

事件型別

一個 RTCTrackEvent。 繼承自 Event

Event RTCTrackEvent

事件屬性

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

receiver 只讀

新增到 RTCPeerConnection 的 track 所使用的 RTCRtpReceiver

streams 只讀 可選

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

track 只讀

已新增到連線的 MediaStreamTrack

transceiver 只讀

新 track 正在使用的 RTCRtpTransceiver

示例

此示例程式碼展示瞭如何建立一個新的 RTCPeerConnection,然後新增一個 track 事件處理程式。

js
pc = new RTCPeerConnection({
  iceServers: [
    {
      urls: "turn:fake.turn-server.url",
      username: "some username",
      credential: "some-password",
    },
  ],
});

pc.addEventListener("track", (e) => {
  videoElement.srcObject = e.streams[0];
  hangupButton.disabled = false;
});

事件處理程式將新 track 的第一個流分配給一個現有的 <video> 元素,該元素使用變數 videoElement 標識。

您也可以將事件處理函式分配給 ontrack 屬性,而不是使用 addEventListener()

js
pc.ontrack = (e) => {
  videoElement.srcObject = e.streams[0];
  hangupButton.disabled = false;
  return false;
};

規範

規範
WebRTC:瀏覽器中的即時通訊
# event-track

瀏覽器相容性