Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
317 lines (291 sloc) 7.73 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>
<script src="create-demo-room.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;
}
#create-a-room>div {
margin-top: 0.25em;
}
#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()">
<script>
function showEvent(e) { console.log('callFrame event', e) }
function setup() {
//
// just a little ui setup
//
buttonDisable('join-meeting', 'leave-meeting',
'start-recording', 'stop-recording',
'bandwidth-buttons');
// setup bandwidth radio button action
document.getElementsByName('kbs').forEach((r) => {
r.addEventListener('click', (e) => {
let kbs = parseInt(e.target.value);
console.log('setting bandwidth to', kbs);
callFrame.sendAppMessage({ setVideoBandwidthCap: kbs });
});
});
}
async function createRoom() {
//
// create a short-lived demo room and a meeting token that gives
// owner privileges and allows recording. if you just want to
// hard-code a meeting link for testing you could do something like
// this:
//
// room = { url: 'https://your-domain.daily.co/hello' }
// ownerLink = room.url;
//
room = await createMtgRoom();
ownerLink = await createMtgLinkWithToken(
room, {
is_owner: true,
enable_recording: 'local',
start_audio_off: true,
start_video_off: true,
});
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
// single remote video full-width and full-height
cssText: `
.daily-video-div {
visibility: visible;
width: 100%;
height: 100%;
}
.daily-video-div.local {
display: none;
}
`
}
);
callFrame.on('loading', (e) => {
showEvent(e);
buttonDisable('join-meeting');
});
callFrame.on('loaded', showEvent)
.on('joining-meeting', showEvent)
.on('recording-stats', showEvent)
.on('recording-error', showEvent)
.on('app-message', 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('recording-started', (e) => {
showEvent(e);
buttonDisable('start-recording');
buttonEnable('stop-recording');
});
callFrame.on('recording-stopped', (e) => {
showEvent(e);
buttonEnable('start-recording');
buttonDisable('stop-recording');
});
callFrame.on('participant-joined', () => {
// reset video radio buttons
let buttons = document.getElementsByName('kbs');
highest = buttons[buttons.length-1];
highest.checked = true;
});
}
async function createFrameAndRoom() {
document.getElementById('create-a-room').style.display = 'none';
await createRoom();
await createFrame();
buttonEnable('join-meeting');
}
function updateRoomInfoDisplay() {
let roomLink = document.location.href.replace('-human', '-device') +
'?url=' + encodeURIComponent(room.url);
let roomInfo = document.getElementById('meeting-room-info');
roomInfo.innerHTML = `
<div><b>room info</b></div>
<div>
<div><a href="${roomLink}" target="_blank">
device page link
</a></div>
<div id='expires-countdown'></div>
<div> displaying one device camera below
(after device joins) </div>
</div>
`;
// update room expiration time every second
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);
}
}
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="create-a-room">
<button onclick="createFrameAndRoom()">create a room</button>
</div>
<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="join-meeting" onclick="callFrame.join({ url: ownerLink })">
join meeting (as owner)
</button>
<button id="leave-meeting" onclick="callFrame.leave()">
leave meeting
</button>
</div>
<div>
<button id="start-recording"
onclick="buttonDisable('start-recording');
callFrame.startRecording()">
start recording
</button>
<button id="stop-recording" onclick="callFrame.stopRecording()">
stop recording
</button>
</div>
<div id="bandwidth-buttons">
bandwidth: <br />
<input type="radio" name="kbs" value="32">32 kb/s</input>
<input type="radio" name="kbs" value="128">128 kb/s</input>
<input type="radio" name="kbs" value="384">384 kb/s</input>
<input type="radio" name="kbs" value="384">512 kb/s</input>
<input type="radio" name="kbs" value="800" checked>800 kb/s</input>
</div>
</div>
<div id="call-frame-container">
</div>
</div>
</body>
</html>
You can’t perform that action at this time.