WebRTC - how to differentiate between two MediaStreamTracks sent over the same connection?

In WebRTC, distinguishing between different MediaStreamTrack objects sent through the same RTCPeerConnection can be achieved using several key properties and methods. In this article, I will detail how to identify these tracks and provide specific scenarios along with code examples.

1. Using Track ID

Each MediaStreamTrack has a unique identifier called id. This ID remains consistent throughout the track's lifecycle and can be used to differentiate between different tracks.

Example

Suppose you are sending two video tracks through the same RTCPeerConnection:

javascript
const track1 = stream1.getVideoTracks()[0];
const track2 = stream2.getVideoTracks()[0];

console.log(track1.id); // Might output 'track1-id'
console.log(track2.id); // Might output 'track2-id'

2. Using Track Label

In addition to the ID, each track has a label property, typically used to describe the content or source of the track. The label is set when the track is created and can be customized to aid in identifying the track.

Example

If you are sending a camera video track and a screen sharing video track:

javascript
const cameraTrack = cameraStream.getVideoTracks()[0];
const screenShareTrack = screenStream.getVideoTracks()[0];

console.log(cameraTrack.label); // Might output 'camera'
console.log(screenShareTrack.label); // Might output 'screen share'

3. Distinguishing via Event Listening

In practical applications, when new tracks are added to the connection, you can identify and handle different tracks by listening for the track event.

Example

Suppose the remote party adds a new track to the connection; you can distinguish it as follows:

javascript
peerConnection.ontrack = event => {
    const track = event.track;
    console.log(track.id); // Outputs the track's ID
    console.log(track.label); // Outputs the track's label

    if (track.kind === 'video') {
        if (track.label.includes('camera')) {
            // Handle camera video track
        } else if (track.label.includes('screen')) {
            // Handle screen sharing video track
        }
    }
};

Summary

By leveraging the id, label properties, and listening for the track event, you can effectively identify and distinguish different MediaStreamTrack objects sent over the same WebRTC connection. These approaches not only facilitate track management but also enable specific logic processing based on track type or source.