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>
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>
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>