replace current video with screen sharing

[jazuly]

hi, im trying to share screen. but the problem is, screen sharing create new video element instead replace my current video and when i stop screen sharing the video is stuck instead of removed..

navigator.mediaDevices.getDisplayMedia().then(stream => {
    this.myScreen = stream
    const keys = Object.keys(this.$store.state.users)
    keys.forEach((value) => {
      this.$peer.call(value, this.myScreen)
    });
})

full code https://github.com/jazuly/stackoverflow/blob/master/screeshare.js

[ChandanRabha]

Hey, even I have the same issue. I cannot switch from my webcam stream to video stream in the same video element. And writing WebRTC vanilla code is cumbersome and doesn't usually work with more than 2 parties

[valehelle]

Hey, even I have the same issue. I cannot switch from my webcam stream to video stream in the same video element. And writing WebRTC vanilla code is cumbersome and doesn't usually work with more than 2 parties

What I did was to use the replaceTrack function.

call.peerConnection.getSenders()[1].replaceTrack(videoStreamTrack)

You need to use replaceTrack on all the call.

[ChandanRabha]

Hey, even I have the same issue. I cannot switch from my webcam stream to video stream in the same video element. And writing WebRTC vanilla code is cumbersome and doesn't usually work with more than 2 parties

What I did was to use the replaceTrack function.

call.peerConnection.getSenders()[1].replaceTrack(videoStreamTrack)

You need to use replaceTrack on all the call.

hey thanks i found a way myself using peersjs to change video stream : //the function screensharing is called when i click on a button async function screenSharing() { await navigator.mediaDevices.getDisplayMedia().then(stream => { for (let [key, value] of myPeer._connections.entries()) { myPeer._connections.get(key)[0].peerConnection.getSenders()[1].replaceTrack(stream.getTracks()[0])

}

}) }