CARVIEW |
Select Language
HTTP/2 200
x-guploader-uploadid: AAwnv3J9fXXB19uAwxmTgaCw6McB1aDbk50Co1dOaSDwfbgsoih2RfKjj3WP1-90X_DGL4OWsmADV4U
x-goog-generation: 1760058333045087
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 137539
x-goog-meta-goog-reserved-file-mtime: 1760056845
x-goog-hash: crc32c=Fs127w==, md5=FHxCLQozfGCKoLXJdUdIZQ==
x-goog-storage-class: STANDARD
accept-ranges: none
expires: Mon, 13 Oct 2025 11:32:13 GMT
cache-control: public, max-age=3600
last-modified: Fri, 10 Oct 2025 01:05:33 GMT
etag: W/"147c422d0a337c608aa0b5c975474865"
content-type: text/html
age: 0
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 895bf926238adcd7440227af82a61dd0
date: Mon, 13 Oct 2025 10:32:13 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
MediaStream: removeTrack() method - Web APIs | MDN
Toggle sidebar
>
MediaStream: removeTrack() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.
The removeTrack()
method of the MediaStream
interface removes a
MediaStreamTrack
from a stream.
Syntax
js
removeTrack(track)
Parameters
track
-
A
MediaStreamTrack
that will be removed from the stream.
Return value
None (undefined
).
Examples
The following example demonstrates how to remove the audio and video tracks from a MediaStream
.
fetchStreamFunction
is an event handler for fetchStreamButton
. When the button is clicked, audio
and video are captured from the system's devices. removeTracksFunction
is the event handler for removeTracksButton
.
When this button is clicked, the audio and video tracks are removed from the MediaStream
.
js
let initialStream = null;
let newStream = null;
let fetchStreamButton = document.getElementById("fetchStream");
let removeTracksButton = document.getElementById("removeTracks");
async function fetchStreamFunction() {
initialStream = await navigator.mediaDevices.getUserMedia({
video: { width: 620, height: 310 },
audio: true,
});
if (initialStream) {
await attachToDOM(initialStream);
}
}
async function attachToDOM(stream) {
newStream = new MediaStream(stream.getTracks());
document.querySelector("video").srcObject = newStream;
}
async function removeTracksFunction() {
let videoTrack = newStream.getVideoTracks()[0];
let audioTrack = newStream.getAudioTracks()[0];
newStream.removeTrack(videoTrack);
newStream.removeTrack(audioTrack);
// Stream will be empty
console.log(newStream.getTracks());
}
fetchStreamButton.addEventListener("click", fetchStreamFunction);
removeTracksButton.addEventListener("click", removeTracksFunction);
Specifications
Specification |
---|
Media Capture and Streams> # dom-mediastream-removetrack> |
Browser compatibility
Loading…