javascriptwebrtcmetadatartcpeerconnectionontrack

How do you differentiate whose track is whose on the frontend when ontrack happens?


I would like to be able to have a group call session with more than 1 person, however I am not sure how to figure out how to figure out whose track I am receiving How can I add metadata to a track I am receiving from a peer, and map it to the correct video element? (Users are connected via websocket and shown on screen before they can connect to RTC, hence a video element in their component already exists and displays as hidden until they send a changeSettings to cameraIsOn=true message to the server)

I tried setting the individual track ids, mediastreamid, etc. but these are all read-only I tried setting the media stream id on the backend, but it doesn't end up being the same as on the frontend I tried setting the ssrc, but it doesn't show on the track

I am developing an SFU backend, where the frontend creates an rtcpeerconnection and sends offers/answers to a server which also creates a peerconnection. It then has a list of peerconnections, and whenever any ontrack, adds the track to the other peerconnections currently in the call. Edit: Essentially when people join the call, I want their tracks to have some sort of metadata(maybe their username or session id) so I can set the appropriate video element's srcObject of someone to the new track/stream


Solution

  • Put all of the tracks of one participant into a MediaStream. The stream ids (but not the track ids!) are replicated across the connection:

    The id attribute specified in MediaStream returns an id that is unique to this stream, so that streams can be recognized at the remote end of the RTCPeerConnection API.

    You cannot add metadata to the stream or track itself, but you can send the stream id on your websocket channel (or a RTCDataChannel) to relate it to your users. You could try messing with the track label or stream id on your backend, but I would not recommend it.