This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The RTCRtpSender method replaceTrack() replaces the track currently being used as the sender's source with a new MediaStreamTrack.
The new track must be of the same media kind (audio, video, etc.) and switching the track should not require negotiation.
Among the use cases for replaceTrack() is the common need to switch between the rear- and front-facing cameras on a phone. With replaceTrack(), you can have a track object for each camera and switch between the two as needed. See the example switching video cameras below.
replaceTrack(newTrack)
newTrack OptionalA MediaStreamTrack specifying the track with which to replace the RTCRtpSender's current source track. The new track's kind must be the same as the current track's, or the replace track request will fail.
A Promise which is fulfilled once the track has been successfully replaced. The promise is rejected if the track cannot be replaced for any reason; this is commonly because the change would require renegotiation of the codec, which is not allowed (see Things that require negotiation).
If newTrack was omitted or was null, replaceTrack() stops the sender. No negotiation is required in this case.
When the promise is fulfilled, the fulfillment handler receives a value of undefined.
If the returned promise is rejected, one of the following exceptions is provided to the rejection handler:
InvalidModificationError DOMException
Returned if replacing the RTCRtpSender's current track with the new one would require negotiation.
InvalidStateError DOMException
Returned if the track on which this method was called is stopped rather than running.
TypeErrorReturned if the new track's kind doesn't match the original track.
Most track replacements can be done without renegotiation. In fact, even changes that seem huge can be done without requiring negotiation. However, some changes may require negotiation and thus fail replaceTrack():
const localConnection = new RTCPeerConnection();
const remoteConnection = new RTCPeerConnection();
// Configuring these to use the WebRTC API can be explored at
// https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample
const connections = [localConnection, remoteConnection];
function setCamera(selectedCamera) {
navigator.mediaDevices
.getUserMedia({
video: {
deviceId: {
exact: selectedCamera,
},
},
})
.then((stream) => {
const [videoTrack] = stream.getVideoTracks();
connections.forEach((pc) => {
const sender = pc
.getSenders()
.find((s) => s.track.kind === videoTrack.kind);
console.log("Found sender:", sender);
sender.replaceTrack(videoTrack);
});
})
.catch((err) => {
console.error(`Error happened: ${err}`);
});
}
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
replaceTrack |
65 | 79 | 34 | 52 | 11 | 65 | 34 | 47 | 11 | 9.0 | 65 | 11 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/RTCRtpSender/replaceTrack