Básicos

1. Ejemplo simple sobre HTML y Javascript

Este ejemplo muestra como iniciar una video llamada en una sala de la forma más simple.

<!-- Video container -->
<div id="divVideo"></div>
<script src="https://video.bambus.tech/js/bundle.js" />
<script>
VideoSDK.init('divVideo');
VideoSDK.joinRoom('<token>');
</script>

Ver ejemplo

2. HTML y Javascript con controles externos

Este ejemplo muestra como agregar botones propios externos, y controlar la video llamada.

<!-- Video container -->
<div class="vidCntr">
<div id="divVideo"></div>
</div>
<!-- Joing Room -->
<div class="joinCntr">
<span>Numero de sala:</span>
<input type="text" id="roomId" value="LeVMpQyjj">
<span style="margin-left: 10px;">Nombre:</span>
<input type="text" id="nickname" value="">
<input type="button" value="Unirse" id="btnJoin" style="margin-left: 10px;">
<br>
Cambiar Nick:
<input type="text" id="newNickname" value="Juan">
<input type="button" value="Aplicar" id="btnApplyNick" style="margin-left: 10px;">
</div>
<pre id="debug" style="word-wrap: break-word; white-space: pre-wrap"></pre>
<!-- Bundle inclution -->
<script src="https://video.bambus.tech/js/bundle.js"></script>
<script>
VideoSDK.init('divVideo', options);
//
// Joing room button
//
document.getElementById('btnJoin').addEventListener('click', function(ev){
var roomId = document.getElementById('roomId').value;
var nickname = document.getElementById('nickname').value;
VideoSDK.joinRoom(roomId, nickname);
});
// Change nickname
document.getElementById('btnApplyNick').addEventListener('click', function(ev){
var nickname = document.getElementById('newNickname').value;
VideoSDK.setNickname(nickname);
});
// Capture roomJoined Event
VideoSDK.events.on("roomJoined", (data) => {
console.log("roomJoined event captured =>", data);
});
// Capture roomLeft Event
VideoSDK.events.on("roomLeft", (data) => {
console.log("roomLeft event captured =>", data);
});
</script>

Ver ejemplo

3. Dentro de tag iFrame

Este ejemplo muestra como agregar la llamada dentro de un tag iframe.

Ver ejemplo

4. Embebido dentro de una página existente

Este ejemplo muestra como agregar el componente de llamada dentro de una página existente y customizarlo.

<!-- Video container -->
<div id="divVideo"></div>
<script src="https://video.bambus.tech/js/bundle.js" />
<script>
VideoSDK.init('divVideo', {
layout: '101',
showLayoutToggle: false,
showCallInfoPanel: false,
showParticipantsPanel: false,
autoHideControlsBar: false,
transparentFooter: false
});
VideoSDK.joinRoom('<token>');
</script>

Ver ejemplo