Handle video track stopped and restarted in multi streams example

[vincentfretin]

Address the known issues of the multi streams example

networked-aframe/examples/basic-multi-streams.html

Lines 121 to 124 in a386198

	Known issues with this demo, some cases are not handled:
	- If participant A shares their screen, the partipant B sees the other participant's screen.
	When participant A stops their screen share, the other participant will see a frozen screen, the last image received.
	- If participant A starts screen share, stops, and restarts the screen share, the other participant won't see it.

see also comment #269 (comment)

[hthetiot]

Example implementation using Typescript that i use in production:

export function listenToMediaStreamEnd(mediaStream: MediaStream, callback: (mediaStream?: MediaStream) => void) {
    let ended = false;

    const video = document.createElement('video');
    video.srcObject = mediaStream;

    const handleMediaEnd = () => {
        if (!ended) {
            ended = true;

            video.removeEventListener('ended', handleMediaEnd);
            video.srcObject = null;

            mediaStream.removeEventListener('inactive', handleMediaEnd);
            mediaStream.removeEventListener('ended', handleMediaEnd);

            if (typeof callback === 'function') {
                callback(mediaStream);
            }
        }
    }

    video.addEventListener('ended', handleMediaEnd);

    // eneded, onremovetrack, onaddtrack
    mediaStream.addEventListener('inactive', handleMediaEnd);
    mediaStream.addEventListener('ended', handleMediaEnd);

    const tracks = mediaStream.getTracks();
    const handleTrackEnd = (track: MediaStreamTrack) => {
        const trackIndex = tracks.indexOf(track);
        if (trackIndex !== -1) {
            tracks.splice(trackIndex, 1);
            track.removeEventListener('ended', handleTrackEnds[track.id], false);
            track.removeEventListener('inactive', handleTrackEnds[track.id], false);
            delete handleTrackEnds[track.id];
        }
        if (tracks.length === 0 && !ended) {
            handleMediaEnd()
        }
    };

    const handleTrackEnds : any = {};

    mediaStream.addEventListener('addtrack', (event: any) => {
        const track = event.track;
        tracks.push(track);
        handleTrackEnds[track.id] = handleTrackEnd.bind(null, track);
        track.addEventListener('ended', handleTrackEnds[track.id], false);
        track.addEventListener('inactive', handleTrackEnds[track.id], false);
    });

    mediaStream.addEventListener('removetrack', (event: any) => {
        handleTrackEnd(event.track);
    });

    tracks.forEach((track: MediaStreamTrack) => {
        handleTrackEnds[track.id] = handleTrackEnd.bind(null, track);
        track.addEventListener('ended', handleTrackEnds[track.id], false);
        track.addEventListener('inactive', handleTrackEnds[track.id], false);
    });
}

[Ys-sudo]

Would love to see this fixed! @hthetiot Could you please explain how to use your solution ? Is it possible to implement it in JS? Thanks in advance!

[vincentfretin]

See also #320 (comment)

[vincentfretin]

Changes in #421 fix the issues.

[vincentfretin]

This work was sponsored by a private sponsor. Thank you! c-frame/sponsorship#4

[vincentfretin]

See issues that need sponsors at https://github.com/c-frame/sponsorship