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 RtkParticipantTileView, RtkInputField for building a preview tile and RtkMicToggleButton, RtkCameraToggleButton for media controls

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

  <com.cloudflare.realtimekit.ui.view.participanttile.RtkParticipantTileView
    android:id="@+id/rtkparticipanttileview_setup_screen"
    android:layout_width="0dp"
    android:layout_height="0dp"
  />

  <com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMicToggleButton
    android:id="@+id/rtkmictoggle_setup_screen"
    android:layout_width="48dp"
    android:layout_height="48dp"
  />

  <com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkCameraToggleButton
    android:id="@+id/rtkcameratoggle_setup_screen"
    android:layout_width="48dp"
    android:layout_height="48dp"
  />

  <com.cloudflare.realtimekit.ui.view.RtkLabel
    android:id="@+id/rtkLabelView"
    android:layout_width="300dp"
    android:layout_height="25dp"
    android:text="Join in as %s"
    android:textColor="#fff"
    android:textSize="16sp"
  />

  <com.cloudflare.realtimekit.ui.view.RtkInputField
    android:id="@+id/textInputEditText"
    android:layout_width="300dp"
    android:layout_height="48dp"
    android:hint="Your name"
  />

  <com.cloudflare.realtimekit.ui.view.RtkJoinButton
    android:id="@+id/rtkjoinbutton_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: RtkParticipantTileView
private lateinit var cameraToggleButton: RtkCameraToggleButton
private lateinit var micToggleButton: RtkMicToggleButton

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  selfParticipantTileView = view.findViewById(R.id.rtkparticipanttileview_setup_screen)
  cameraToggleButton = view.findViewById(R.id.rtkcameratoggle_setup_screen)
  micToggleButton = view.findViewById(R.id.rtkmictoggle_setup_screen)

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