TypeError: MediaStreamTrack.replaceTrack is not a function

Question

The video link is up and running. You can disable / enable video / audio for yourself, and through the socket this state is updated for other participants in the video meeting. But I can’t share the host’s screen, the host itself shows that the screen is being broadcast, but the other participants continue to broadcast the webcam.

when evaluating, screen sharing is allowed for all participants in the video chat, I get an error:

TypeError: videoStream.replaceTrack is not a function

const screenShare = () => {
    console.log('use!')
    if (!screenShareStatus) {
        // @ts-ignore
        navigator.mediaDevices.getDisplayMedia({cursor: true})
            .then((currentStream) => {
                const screenTrack = currentStream.getTracks()[0];
                // const screenTrack = currentStream.getVideoTracks()[0];
                const videoStream = localMediaStream.current.getTracks().find((track) => track.kind === 'video'); // camera
                console.log('videoStream: ', videoStream);
                videoStream.replaceTrack(screenTrack);
                setScreenShareStatus(true);
            }).catch((error) => {
                console.log('error: ', error)
            });
    } else {
        // @ts-ignore
        screenTrackRef.current.onended();
    }
};

And I don't actually find this method on the MediaStreamTrack object, how do I change the video source then? In all examples, people have no problem with this

"In all examples," which examples? Could you provide some links? — Kaiido, Sep 05 '22 at 07:12
https://stackoverflow.com/questions/68548662/rtcpeerconnection-replacetrack-only-changing-stream-for-the-remote-peer - well, for example here, a person does the same, he just has a problem with the fact that he does not broadcast at the host, remote users receive the stream — Roman Nozhenko, Sep 05 '22 at 07:15

score 1 · Answer 1 · answered Sep 05 '22 at 07:19

There is indeed no MediaStream#replaceTrack() method; you can removeTrack() + addTrack() instead:

const stream = generateStream("red");
document.querySelector("video").srcObject = stream;

document.querySelector("button").onclick = (evt) => {
  evt.target.remove();
  const prevTrack = stream.getVideoTracks()[0];
  const newTrack = generateStream("green").getVideoTracks()[0];
  stream.removeTrack(prevTrack);
  stream.addTrack(newTrack);
};

function generateStream(color) {
  let x = 0;
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = color;
  const anim = () => {
    x = (x + 1) % canvas.width;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, 50, 50, 50);
    requestAnimationFrame(anim);
  };
  anim();
  return canvas.captureStream();
}

<video autoplay controls muted></video>
<button>change track</button>

However beware that if you do record this MediaStream sing a MediaRecorder, the MediaRecorder will stop when the track gets changed.

Thank you, it's hard for me to figure this out, I'll try. Could you give me a couple more minutes, it's just that I basically have an integration of this option, with nuances, but that's the core. https://github.com/maks1mp/video-chat-webrtc/blob/master/src/hooks/useWebRTC.js — Roman Nozhenko, Sep 05 '22 at 07:23

TypeError: MediaStreamTrack.replaceTrack is not a function

1 Answers1