Welcome to the new Daily Docs. Please let us know what you think.

updateParticipant()

updateParticipant(sessionId, {config})

Compatibility:
Prebuilt
Custom

Modify a participant, either by sending a message to change its state, or by changing the local view.

Returns this.

The first argument is the participant's session_id, or 'local' for the local participant.

The second argument is a set of actions to take.

Actions

  • setAudio: true | false,
  • setVideo: true | false,
  • eject: true
  • (SFU-mode only) setSubscribedTracks: true | false | avatar | custom (⚠️ Not supported in Daily Prebuilt, see below)
  • styles (❗️deprecated, see below)

setAudio, setVideo, and eject

setAudio, setVideo, and eject on remote participants require meeting owner permission. If an action is not possible (or if there is no current meeting) the action will be silently ignored.

Remotely controlling a user's microphone and camera is a potential privacy issue.

This functionality is important for some use cases, but should not be a general feature of video call user interfaces. Think carefully before you enable remote control of cameras and microphones. And be aware that browsers will require that a user explicitly allow mic/camera device access at least once. Chrome will prompt the first time a user joins a call on a specific subdomain. Safari will prompt once each meeting session.

Track subscriptions

Note: track subscriptions only works over an SFU connection.

setSubscribedTracks is not supported in Daily Prebuilt

Daily Prebuilt does not support track subscriptions via the updateParticipant() or updateParticipants() method.

You can pass a setSubscribedTracks argument only if you're building with the Daily call object.

setSubscribedTracks expects to be set to either true, false, 'staged', or to an object that specifies the subscription state for each kind of track that a participant could send. In order to update this property, you must set the DailyIframe subscribeToAllTracksAutomatically property to false. If you try to setSubscribedTracks argument with subscribeToAllTracksAutomatically: true, the updateParticipant() method throws an error.

More about 'staged'

The 'staged' subscription state corresponds to setting up the connections for a track but not transmitting data across that connection. This lets you "stage" tracks that you know you'll need soon, for later rapid transition into the fully "subscribed" state, without using any extra bandwidth.

Under the hood, when subscribing to a track (ie: { setSubscribedTracks: true }), what you are really doing is setting up a consumer connection with the SFU, and starting the process of transmitting the video/audio data across that connection. When you unsubscribe (ie. { setSubscribedTracks: false }), we tear down that connection and remove the consumer. Setting the state to staged sets up the consumer the same as you would when subscribing, but pauses the traffic on the connection so no bytes are transmitting, saving on bandwidth and decodings. Thus, going from a { setSubscribedTracks: 'staged' } to { setSubscribedTracks: true } is quicker, as it bypasses the work of setting up the consumer connection.

Note that there are still limitations on the number of consumers that can be created. When supporting larger calls, it's important to still take advantage of fully unsubscribing from tracks and only staging those that may come into view soon. For example, in the Daily Prebuilt in grid mode, we: subscribe to all video being rendered on the current page, we "stage" all videos on the previous and next pages, and unsubscribe from videos on all other pages. As a user flips through pages, we update those states accordingly.

Track subscriptions setSubscribedTracks() in action

❗️styles

❗️Deprecated. To build a styled, customized video call experience, use the Daily call object.

*The styles action is only supported when using previous prebuilt Daily interface. The format of the styles property is:

The styles.cam.div style css properties are applied to the container div for the participant's camera stream. The style.cam.overlay style css properties are applied to the overlay element for the participant's camera stream. The styles.cam.video css properties are applied to the video element for the participant's camera stream. The styles.screen.div and styles.screen.video are applied to the container and video element for the participant's screen share feed.

For example, to position the local camera feed and make it visible, you only need to set a few css properties of the local participant's styles.cam.div. Here's how you might "shadow" the position and size of a placeholder div you've created:

See also, the loadCss() method, for more information about implementing custom layouts.