Audio/video - Preview

For building audio/video preview

Permissions

• For AUDIO - The value of meeting.self.permissions.canProduceAudio needs to be ALLOWED
• For VIDEO - The value of meeting.self.permissions.canProduceVideo needs to be ALLOWED

In the preset editor, toggle these settings under Media.

Media Preview and Controls

We'll be using DyteParticipantTileView, DyteInputField for building a preview tile and DyteMicToggleButton, DyteCameraToggleButton for media controls

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
  ....
  >

  <dyte.io.uikit.view.participanttile.DyteParticipantTileView
    android:id="@+id/dyteparticipanttileview_setup_screen"
    android:layout_width="0dp"
    android:layout_height="0dp"
  />

  <dyte.io.uikit.view.controlbarbuttons.DyteMicToggleButton
    android:id="@+id/dytemictoggle_setup_screen"
    android:layout_width="48dp"
    android:layout_height="48dp"
  />

  <dyte.io.uikit.view.controlbarbuttons.DyteCameraToggleButton
    android:id="@+id/dytecameratoggle_setup_screen"
    android:layout_width="48dp"
    android:layout_height="48dp"
  />

  <dyte.io.uikit.view.DyteLabel
    android:id="@+id/dyteLabelView"
    android:layout_width="300dp"
    android:layout_height="25dp"
    android:text="Join in as %s"
    android:textColor="#fff"
    android:textSize="16sp"
  />

  <dyte.io.uikit.view.DyteInputField
    android:id="@+id/textInputEditText"
    android:layout_width="300dp"
    android:layout_height="48dp"
    android:hint="Your name"
  />

  <dyte.io.uikit.view.DyteJoinButton
    android:id="@+id/dytejoinbutton_setup_screen"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
  />

And on the kolin side we bind the newly added element like follows:

private lateinit var selfParticipantTileView: DyteParticipantTileView
private lateinit var cameraToggleButton: DyteCameraToggleButton
private lateinit var micToggleButton: DyteMicToggleButton

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  selfParticipantTileView = view.findViewById(R.id.dyteparticipanttileview_setup_screen)
  cameraToggleButton = view.findViewById(R.id.dytecameratoggle_setup_screen)
  micToggleButton = view.findViewById(R.id.dytemictoggle_setup_screen)

  selfParticipantTileView.activateForSelfPreview(meeting.localUser)
  micToggleButton.activate(meeting)
  cameraToggleButton.activate(meeting)
}