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 DyteSetupScreen or could be built with DyteParticipantTile and other components.

Properties​

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

  • videoEnabled: A boolean value indicating if the video 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();

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();

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

Changing Media Device​

Media devices represents the hardware for the camera, microphone and speaker devices. 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 = meeting.self.getAllDevices();

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

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

// Get all speakers
const speakerDevices = 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];