Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
264 lines (240 sloc) 6.07 KB
<html>
<head>
<title>call methods and events demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/@daily-co/daily-js"></script>
<style>
/*
css for this demo page (not for the internal video call layout
inside the iframe
*/
button {
display: block;
}
#page-blocks {
height: 100%;
display: flex;
flex-direction: column;
}
#page-blocks>div { margin-top: 1em; }
#create-a-room {
flex: none;
}
#meeting-info-row {
flex: none;
display: flex;
}
#meeting-info-row>div {
flex: auto;
}
#buttons-row {
flex: none;
display: flex;
}
#buttons-row>div {
flex: auto;
}
#call-frame-container {
flex-grow: 1;
/* set position and height so this is the "css container" for the iframe */
position: relative;
height: 100%;
min-height: 300px;
border: 1px dashed black;
}
.info>div {
margin: 0.25em;
}
.info>div:nth-of-type(2) {
font-size: 80%;
}
.info>div>div {
margin: 0.25em;
}
.flex-bins {
display: flex;
flex-basis: auto;
}
.flex-bin {
flex-basis: auto;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}
</style>
</head>
<body onload="setup(); createFrameAndRoom();">
<script>
function showEvent(e) { console.log('callFrame event', e) }
function setup() {
}
async function getRoom() {
let params = (new URL(document.location)).searchParams;
room = { url: decodeURIComponent(params.get('url')) };
kbs = 800;
trackConstraints = null;
updateRoomInfoDisplay();
setInterval(updateNetworkInfoDisplay, 5000);
}
async function createFrame() {
//
// ask the daily-js library to create an iframe inside the
// 'call-frame-container' div
//
callFrame = window.DailyIframe.createFrame(
document.getElementById('call-frame-container'), {
customLayout: true,
// css for the video call layout. super-simple -- just display
// local video (as a sanity check).
cssText: `
.daily-video-div.local {
visibility: visible;
width: 100%;
height: 100%;
}
.daily-video-element {
padding: 1em;
}
`
}
);
callFrame.on('loading', (e) => {
showEvent(e);
buttonDisable('join-meeting');
});
callFrame.on('loaded', showEvent)
.on('started-camera', showEvent)
.on('camera-error', showEvent)
.on('joining-meeting', showEvent)
.on('input-event', showEvent)
.on('error', showEvent);
callFrame.on('joined-meeting', (e) => {
showEvent(e);
buttonEnable('leave-meeting', 'start-recording', 'bandwidth-buttons');
});
callFrame.on('left-meeting', (e) => {
showEvent(e);
buttonDisable('leave-meeting', 'start-recording', 'stop-recording',
'bandwidth-buttons');
buttonEnable('join-meeting');
});
callFrame.on('app-message', (e) => {
showEvent(e);
kbs = e.data.setVideoBandwidthCap || 800;
trackConstraints = null;
if (kbs <= 32) {
trackConstraints = { width: 160, height: 90 }
} else if (kbs <= 128) {
trackConstraints = { width: 320, height: 180 }
} else if (kbs <= 384) {
trackConstraints = { width: 640, height: 360 }
}
console.log('setting send bandwidth to', kbs,
'kbs and applying camera track constraints',
trackConstraints);
callFrame.setBandwidth({ kbs, trackConstraints });
updateRoomInfoDisplay();
});
callFrame.on('participant-joined', updateParticipantInfoDisplay)
.on('participant-updated', updateParticipantInfoDisplay)
.on('participant-left', updateParticipantInfoDisplay);
}
async function createFrameAndRoom() {
await getRoom();
await createFrame();
callFrame.join({ url: room.url });
}
function updateRoomInfoDisplay() {
let roomInfo = document.getElementById('meeting-room-info');
roomInfo.innerHTML = `
<div><b>room info</b></div>
<div>
<div>device joined: ${ room.url }</div>
<div>displaying local camera below</div>
<div>outgoing bandwidth soft cap: ${kbs} kb/s</div>
<div>camera resolution constraints:
${trackConstraints ?
trackConstraints.width + 'x' + trackConstraints.height :
'1280x720'}
</div>
`;
if (!window.expiresUpdate) {
window.expiresUpdate = setInterval(() => {
let exp = (room && room.config && room.config.exp);
if (exp) {
document.getElementById('expires-countdown').innerHTML = `
room expires in
${Math.floor((new Date(exp*1000) - Date.now())/1000)}
seconds
`;
}
}, 1000);
}
}
function updateParticipantInfoDisplay(e) {
showEvent(e);
// todo
}
async function updateNetworkInfoDisplay() {
let infoEl = document.getElementById('network-info'),
statsInfo = await callFrame.getNetworkStats();
infoEl.innerHTML = `
<div><b>network stats</b></div>
<div>
<div>
video send:
${Math.floor(statsInfo.stats.latest.videoSendBitsPerSecond/1000)} kb/s
</div>
<div>
video recv:
${Math.floor(statsInfo.stats.latest.videoRecvBitsPerSecond/1000)} kb/s
<div>
worst send packet loss:
${Math.floor(statsInfo.stats.worstVideoSendPacketLoss*100)}%</div>
<div>worst recv packet loss:
${Math.floor(statsInfo.stats.worstVideoRecvPacketLoss*100)}%</div>
</div>
`;
}
//
// UI utility functions
//
function buttonEnable(...args) {
args.forEach((id) => {
let el = document.getElementById(id);
if (el) {
el.classList.remove('disabled');
}
});
}
function buttonDisable(...args) {
args.forEach((id) => {
let el = document.getElementById(id);
if (el) {
el.classList.add('disabled');
}
});
}
</script>
<div id="page-blocks">
<div id="meeting-info-row">
<div id="meeting-room-info" class="info">
room info
</div>
<div id="network-info" class="info">
network stats
</div>
</div>
<div id="buttons-row">
<div>
<button id="leave-meeting" onclick="callFrame.leave()">
leave meeting
</button>
</div>
</div>
<div id="call-frame-container">
</div>
</div>
</body>
</html>
You can’t perform that action at this time.