Support sync stream id (#881)

* Handle new format streamId to better sync a/v tracks (#760)

* Handle new format streamId

* changeset

* Add stream to TrackPublishOptions

* Fix track is not ended correctly with new stream id (#843)

* Fix track is not ended correctly with new stream id

* rename

* Supports sync stream id

* Revert version change

* Update src/room/track/options.ts

Co-authored-by: David Zhao <[email protected]>

* remove unused line

* remove changesets

---------

Co-authored-by: David Zhao <[email protected]>

.changeset/blue-starfishes-bathe.md

@@ -0,0 +1,5 @@
+---
+'livekit-client': patch
+---
+
+Handle new format streamId to better sync a/v tracks

src/room/Room.ts

@@ -1018,8 +1018,11 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
     }
     const parts = unpackStreamId(stream.id);
     const participantId = parts[0];
-    let trackId = parts[1];
-    if (!trackId || trackId === '') trackId = mediaTrack.id;
+    let streamId = parts[1];
+    let trackId = mediaTrack.id;
+    // firefox will get streamId (pID|trackId) instead of (pID|streamId) as it doesn't support sync tracks by stream
+    // and generates its own track id instead of infer from sdp track id.
+    if (streamId && streamId.startsWith('TR')) trackId = streamId;
 
     if (participantId === this.localParticipant.sid) {
       log.warn('tried to create RemoteParticipant for local participant');

src/room/participant/LocalParticipant.ts

@@ -649,6 +649,7 @@ export default class LocalParticipant extends Participant {
       encryption: this.encryptionType,
       stereo: isStereo,
       disableRed: this.isE2EEEnabled || !(opts.red ?? true),
+      stream: opts?.stream,
     });
 
     // compute encodings and layers for video

src/room/track/RemoteTrack.ts

@@ -29,14 +29,16 @@ export default abstract class RemoteTrack extends Track {
   /** @internal */
   setMediaStream(stream: MediaStream) {
     // this is needed to determine when the track is finished
-    // we send each track down in its own MediaStream, so we can assume the
-    // current track is the only one that can be removed.
     this.mediaStream = stream;
-    stream.onremovetrack = () => {
-      this.receiver = undefined;
-      this._currentBitrate = 0;
-      this.emit(TrackEvent.Ended, this);
+    const onRemoveTrack = (event: MediaStreamTrackEvent) => {
+      if (event.track === this._mediaStreamTrack) {
+        stream.removeEventListener('removetrack', onRemoveTrack);
+        this.receiver = undefined;
+        this._currentBitrate = 0;
+        this.emit(TrackEvent.Ended, this);
+      }
     };
+    stream.addEventListener('removetrack', onRemoveTrack);
   }
 
   start() {

src/room/track/options.ts

@@ -109,6 +109,13 @@ export interface TrackPublishOptions extends TrackPublishDefaults {
    * Source of track, camera, microphone, or screen
    */
   source?: Track.Source;
+
+  /**
+   * Set stream name for the track. Audio and video tracks with the same stream name
+   * will be placed in the same `MediaStream` and offer better synchronization.
+   * By default, camera and microphone will be placed in a stream; as would screen_share and screen_share_audio
+   */
+  stream?: string;
 }
 
 export interface CreateLocalTracksOptions {

src/version.ts

@@ -1,4 +1,4 @@
 import { version as v } from '../package.json';
 
 export const version = v;
-export const protocolVersion = 9;
+export const protocolVersion = 10;