MediaStreamTrack: enabled property

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⁩.

Theenabled property of theMediaStreamTrack interface is a Boolean value which istrue if the track is allowed to render the source stream orfalse if it is not. This can be used to intentionally mute atrack.

When enabled, a track's data is output from the source to thedestination; otherwise, empty frames are output.

In the case of audio, a disabled track generates frames of silence (that is, frames inwhich every sample's value is 0). For video tracks, every frame is filled entirely withblack pixels.

The value ofenabled, in essence, represents what a typical user wouldconsider the muting state for a track, whereas themutedproperty indicates a state in which the track is temporarily unable to outputdata, such as a scenario in which frames have been lost in transit.

Note:If the track has been disconnected, the value of this propertycan be changed, but has no effect.

Value

Whentrue,enabled indicates that the track is permitted torender its actual media to the output. Whenenabled is set tofalse, the track only generates empty frames.

Empty audio frames have every sample's value set to 0. Empty video frames have everypixel set to black.

Note:When implementing a mute/unmute feature, you should use theenabled property.

Usage notes

If theMediaStreamTrack represents the video input from a camera,disabling the track by settingenabled tofalse also updatesdevice activity indicators to show that the camera is not currently recording orstreaming. For example, the green "in use" light next to the camera in iMac and MacBookcomputers turns off while the track is muted in this way.

Example

This example demonstrates aclick event handler for a pause button.

pauseButton.onclick = (evt) => {  const newState = !myAudioTrack.enabled;  pauseButton.innerHTML = newState ? "&#x25B6;&#xFE0F;" : "&#x23F8;&#xFE0F;";  myAudioTrack.enabled = newState;};

This creates a variable,newState, which is the opposite of the currentvalue ofenabled, then uses that to select either the Emoji character forthe "play" icon or the character for the "pause" icon as the newinnerHTML of the pause button's element.

Finally, the new value ofenabled is saved, making the change take effect.