Skip to main content

Media Preview

This section focuses on pre-call functionality, providing developers with the tools needed to prepare the media environment before joining the meeting. If you are using our UI Kits, this will be handled by dyte-setup-screen or could be built with dyte-participant-tile, dyte-settings components.

Properties​

  • audioEnabled: A boolean value indicating if the audio is currently enabled.

  • videoEnabled: A boolean value indicating if the video is currently enabled.

  • audioTrack: The audio track for the local user.

  • videoTrack: The video track for the local user.

Methods​

Toggling Media​

The same methods used by post joining meeting are also used to control media-pre meeting.

1. Mute/Unmute microphone

// Mute Audio
await meeting.self.disableAudio();

// Unmute Audio
await meeting.self.enableAudio();

Anytime there is an update in audio state you will get a audioUpdate event

const audioEnabled = useDyteSelector((m) => m.self.audioEnabled);
const audioTrack = useDyteSelector((m) => m.self.audioTrack);

or if you want a traditional JS event you can use the audioUpdate event

// Alternatively
useEffect(() => {
  if (!meeting) return;

  const onAudioUpdate = ({ audioEnabled, audioTrack }) => {
    // if enabled show a visual(izer) preview of the audio to the user
  };

  meeting.self.on('audioUpdate', onAudioUpdate);
  return () => {
    meeting.self.removeListener('audioUpdate', onAudioUpdate);
  };
}, [meeting]);

2. Enable/Disable camera

// Disable Video
await meeting.self.disableVideo();

// Enable Video
await meeting.self.enableVideo();

Anytime there is an update in audio state you will get a videoUpdate event

const videoEnabled = useDyteSelector((m) => m.self.videoEnabled);
const videoTrack = useDyteSelector((m) => m.self.videoTrack);

or if you want a traditional JS event you can use the videoUpdate event

// Alternatively
useEffect(() => {
  if (!meeting) return;

  const onVideoUpdate = ({ videoEnabled, videoTrack }) => {
    // if videoEnabled play video here to a <video> element
  };

  meeting.self.on('videoUpdate', onVideoUpdate);
  return () => {
    meeting.self.removeListener('videoUpdate', onVideoUpdate);
  };
}, [meeting]);

Changing Media Device​

To get the list of media devices that are currently being used, you can use the following methods:

// Fetch current media devices being used
const currentDevices = meeting.self.getCurrentDevices();
// Get all media devices
const devices = await meeting.self.getAllDevices();

// Get all audio devices
const audioDevices = await meeting.self.getAudioDevices();

// Get all video devices
const videoDevices = await meeting.self.getVideoDevices();

// Get all speakers
const speakerDevices = await meeting.self.getSpeakerDevices();

These methods should be called when you want the user to be shown these preferences. When the user selects a device, use the below method to select the device.

Set device

meeting.self.setDevice(device);
// eg. device = videoDevices[0];