Los slots son espacios que contienen elementos por defecto, pero que podrás reemplazar con tus propios elementos. Por ejemplo, para reemplazar los botones de nuestro WebRTC
deberás añadir:
{% code lineNumbers="true" %}
<videsk-webrtc>
<div slot="slot-name">cuxtom content</div>
</videsk-webrtc>
{% endcode %}
Los slots
disponibles son:
El listado de botones accionables como compartir pantalla, micrófono, cámara, colgar, pantalla completa, rotar cámara y chat se puede personalizar o incluso eliminar.
button-screen
: botón de compartir pantallabutton-mic
: botón de micrófonobutton-cam
: botón de cámarabutton-hangup
: botón de colgarbutton-toggle-camera
: botón de rotar cámarabutton-chat
: botón de chatbutton-fullscreen
: botón de pantalla completa
Botones disponibles por defecto
{% hint style="info" %} Los botones de cambio de cámara y compartir pantalla automáticamente se mostrarán si la función está disponible en el navegador, de lo contrario no se mostrará. {% endhint %}
{% code lineNumbers="true" %}
<videsk-webrtc>
<button slot="button-screen">Compartir pantalla</button>
<button slot="button-mic">Micrófono</button>
<button slot="button-cam">Cámara</button>
<button slot="button-hangup">Colgar</button>
<button slot="button-toggle-camera">Rotar cámara</button>
<button slot="button-chat">Chat</button>
<button slot="button-fullscreen">Pantalla completa</button>
</videsk-webrtc>
{% endcode %}
Puedes utilizar cualquier elemento HTML dentro de la etiqueta videsk-webrtc
incluso elementos complejos como:
{% code lineNumbers="true" %}
<videsk-webrtc>
<div slot="button-hangup">
<i class="phone" />
<span class="tooltip">Colgar</span>
</div>
</videsk-webrtc>
{% endcode %}
Puedes personalizar los íconos:
participants-toggle-icons
<videsk-webrtc>
<div slot="participants-toggle-icons">
<!-- Custom icons -->
</div>
</videsk-webrtc>