RTCTrackEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

WebRTC API の RTCTrackEvent インターフェイスは、 track イベントを表します。これは新しい MediaStreamTrack が RTCRtpReceiver に RTCPeerConnection の一部として追加されたときに送られます。

対象は、トラックが追加される RTCPeerConnection オブジェクトです。

このイベントは WebRTC レイヤーからウェブサイトまたはアプリケーションに送信されるため、通常、RTCTrackEvent を自分でインスタンス化する必要はありません。

コンストラクター

RTCTrackEvent(): 新しい RTCTrackEvent オブジェクトを作成して返します。新しいトラックイベントは通常、 WebRTC インフラストラクチャによって作成され、接続の ontrack イベントハンドラーに送信されるため、自分で作成する必要はほとんどありません。

インスタンスプロパティ

RTCTrackEvent は Event から派生しているため、そちらのプロパティも使用できます。

receiver 読取専用: RTCPeerConnection に追加されたトラックで使用される RTCRtpReceiver です。
streams 読取専用省略可: MediaStream オブジェクトの配列で、各オブジェクトは、追加する track が属するメディアストリームの 1 つを表します。既定では、配列は空で、ストリームのないトラックを示します。
track 読取専用: この接続に追加された MediaStreamTrack です。
transceiver 読取専用: 新しいトラックで使用される RTCRtpTransceiver です。

track イベントは、新しいトラックが接続に追加されたときに RTCPeerConnection に送信されます。 track イベントが RTCPeerConnection の ontrack ハンドラーに配信される時点で、新しいメディアは特定の RTCRtpReceiver （イベントの receiver プロパティで指定）に対するネゴシエーションを完了しています。

さらに、受信者の track で指定された MediaStreamTrack は、イベントの track で指定されたものと同じであり、そのトラックは、関連付けられたすべてのリモート MediaStream オブジェクトに追加されています。

新しいトラックが利用可能になったときに通知を受ける track イベントリスナーを追加することができます。これにより、例えば、 RTCPeerConnection.addEventListener() または ontrack イベントハンドラープロパティを使用して、そのメディアを <video> 要素に添付することができます。

メモ: 新しい着信トラックが接続に追加されたときに track イベントを受け取り、 addTrack() を呼び出して接続の遠端にトラックを追加すると、リモートピアーで track イベントが起動されることを覚えておくとよいでしょう。

例

この単純な例では、 track イベントのイベントリスナーを作成し、ID が video-box である <video> 要素の srcObject を、イベントの streams 配列に渡されたリスト内の最初のストリームに設定します。

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