Skip to main content

🎬 Media

Publish-Subscribe Model​

In Twilio all the media operations are done using a publish subscribe model. Eg to show your video to a remote peer you

  1. Acquire your camera track
  2. Publish the track
  3. Listen for new track published events on remote peer
  4. Subscribe to the track on the remote peer if required
  5. Render the track

While this level of manual control is available on Dyte, but the default behaviour is much simpler

meeting.self.enableVideo();

It will internally acquire, publish, make the remote peer subscribe to the track

Video​

While Twilio requires additional configuration to set the quality of the video, Dyte handles the video quality automatically based on network conditions and device capabilities. In low bandwidth environments Dyte prioritizes audio and FPS over video resolution.

Twilio


<div class="twilio-self-view" width="1920" height="1080"></div>
<style>
#twilio-self-view video {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}
</div>

On the JS side

let localVideoTrack = await twilioVideo.createLocalVideoTrack({
  height: { ideal: 720, min: 480, max: 1080 },
  width: { ideal: 1280, min: 640, max: 1920 },
  aspectRatio: 16 / 9,
});

twilioRoom.localParticipant.publishTrack(localVideoTrack);

const localMediaContainer = document.getElementById('twilio-self-view');

localMediaContainer!.appendChild(localVideoTrack.attach());

Dyte

To acquire and publish

meeting.self.enableVideo();

To render the video, use our web component library

<dyte-participant-tile participant={meeting.self} />

Turn the camera off​

Twilio

Twilio Video is track based, so you must loop through each video track to unpublish the video, stop the video camera, and remove the video element from the DOM

twilioRoom.localParticipant.videoTracks.forEach((publication) => {
  publication.unpublish();
  publication.track.stop();
  var selfTwilioVideo = document.getElementById('twilio-self-view-div');
  selfTwilioVideo?.querySelector('video')?.remove();
});

Dyte

meeting.self.disableVideo();

Render a remote user video​

Twilio

Twilio emits  participantConnected and trackSubscribed events, Dyte emits a similarvideoUpdate (but you don't need to listen for this event)

twilioRoom.on('participantConnected', (participant) => {
  participant.on('trackSubscribed', (track) => {
    // a user turned on their video, render it
    document.getElementById('twilio-user-view-div').appendChild(track.attach());
  });

  participant.on('trackUnsubscribed', (track) => {
    // a user turned off their video, stop rendering it
    var selfTwilioVideo = document.getElementById('twilio-user-view-div');
    selfTwilioVideo.querySelector('video').remove();
  });
});

Dyte

meeting.participants.active.on('videoUpdate', (participant) => {
  // Some update in participant video
  // participant.videoEnabled: boolean
});

But you don't need this event to render remote participants, the dyte-participant-tile component sets up this listener on its own and will render the video on its own

<dyte-participant-tile participant={remoteParticipant} />

It is even easier in React, here is how to render every participant

const participants = useDyteSelector((m) => m.participants.active);

return (<div>
      {
          participants
             .map((p) => (<DyteParticipantTile participant={p} />)
      }
   </div>);

Audio​

Enabling audio

Twilio

let localAudioTrack = await twilioVideo.createLocalAudioTrack();

twilioRoom.localParticipant.publishTrack(localAudioTrack);
const audioElement = localAudioTrack.attach();
document.body.appendChild(audioElement);

Dyte

meeting.self.enableAudio();

Disabling audio

Twilio

twilioRoom.localParticipant.audioTracks.forEach((publication) => {
  publication.track.disable();
});

Dyte

meeting.self.disableAudio();