Screen Sharing: the stream does not update on the receiver side

90 Views Asked by At

I have implemented a screen sharing option. When I quit the screen sharing and change the track, the stream only updates on the sender site. How can i update the stream on the reciever site

Here is my addStream function

this.videoHeight = 200
        if(this.$store.rtcmConnection.streamEvents[this.screenId]){
            const test = await navigator.mediaDevices.getDisplayMedia();
            const track = this.$store.rtcmConnection.streamEvents[this.screenId].stream.getTracks()[0]
            this.userIds.forEach(e => {
                Object.keys(this.$store.rtcmConnection.streamEvents).forEach((streamid) => {
                    const event = this.$store.rtcmConnection.streamEvents[streamid];
                    if(typeof event !== 'function'){
                    if (event.userid == e){
                        if(event.stream.isVideo)
                        {
                           
                            event.stream.removeTrack(track)
                            event.stream.addTrack(test.getTracks()[0])
                        }
                        }
                    }
                });
            })
        }else{
        this.$store.rtcmConnection.addStream({
            screen: true,
            oneway: true,
            }) 
        }

when i use replaceTrack it seems to work, but he throws an typeerror that the tracks are off different kinds

if (this.$store.rtcmConnection.streamEvents[this.screenId]) {
            const test = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
            const streamTrack = test.getVideoTracks()[0]
            const track = this.$store.rtcmConnection.streamEvents[this.screenId].stream.getVideoTracks()[0]
            const event = this.$store.rtcmConnection.streamEvents[this.screenId];
            if (event.stream.isVideo) {
                this.userIds.forEach(async e => {
                    const peerContainer = this.$store.rtcmConnection.peers[e]
                    if (typeof peerContainer != 'undefined') {
                        const connection = peerContainer.peer
                        connection.getSenders().forEach(sender => {
                            sender.replaceTrack(streamTrack, event.stream)
                        })

                    }

                })

                event.stream.removeTrack(track)
                event.stream.addTrack(streamTrack)
            }

        } else {
            this.$store.rtcmConnection.addStream({
                screen: true,
                oneway: true,
            })
        }
1

There are 1 best solutions below

2
On

I forgot to check the sender

if(sender.track.kind == 'video')