Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Kwindla Hultman Kramer remove cross-origin from demos 4ae3095 Nov 1, 2019
0 contributors

Users who have contributed to this file

350 lines (322 sloc) 8.7 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>
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;
}
.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',
'toggle-local-cam', 'toggle-local-mic',
'start-recording', 'stop-recording', 'start-screenshare',
'stop-screenshare');
}
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'
});
updateRoomInfoDisplay();
setInterval(updateNetworkInfoDisplay, 5000);
}
async function createFrame() {
//
// ask the daily-js library to create an iframe inside the
// 'call-frame-container' div
//
let customLayout = !!document
.querySelector('input[name="customLayout"]:checked')
.value,
cssFile = customLayout ? 'basics.css' : null;
callFrame = window.DailyIframe.createFrame(
document.getElementById('call-frame-container'),
{ customLayout, cssFile }
);
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('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', 'toggle-local-cam', 'toggle-local-mic',
'start-recording', 'start-screenshare');
});
callFrame.on('left-meeting', (e) => {
showEvent(e);
buttonDisable('leave-meeting',
'toggle-local-cam', 'toggle-local-mic',
'start-recording', 'stop-recording',
'start-screenshare', 'stop-screenshare');
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', updateParticipantInfoDisplay)
.on('participant-updated', updateParticipantInfoDisplay)
.on('participant-left', updateParticipantInfoDisplay);
}
async function createFrameAndRoom() {
document.getElementById('create-a-room').style.display = 'none';
await createRoom();
await createFrame();
buttonEnable('join-meeting');
}
function updateRoomInfoDisplay() {
let roomInfo = document.getElementById('meeting-room-info');
roomInfo.innerHTML = `
<div><b>room info</b></div>
<div>
send to invite or click to join
<div><a href="${room.url}" target="_blank">
${room.url.replace('.co/', '.co/&#8203;')}
</a></div>
<div id='expires-countdown'></div>
</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);
let infoEl = document.getElementById('meeting-participants-info'),
participants = callFrame.participants(),
infoHTML = '';
// look and make an info block for each participant
for (var id in participants) {
let p = participants[id];
infoHTML += `
<div>
<div>${p.user_name || 'guest'}</div>
<div>cam ${p.video ? 'on' : 'off'}</div>
<div>mic ${p.audio ? 'on' : 'off'}</div>
</div>
`;
}
infoEl.innerHTML = '<div><b>meeting participants</b></div>' +
'<div>' + infoHTML + '</div>';
// update local screenshare button state
if (participants.local) {
if (participants.local.screen) {
buttonDisable('start-screenshare');
buttonEnable('stop-screenshare');
} else {
buttonDisable('stop-screenshare');
buttonEnable('start-screenshare');
}
}
}
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>
`;
}
function toggleCam() {
callFrame.setLocalVideo(!callFrame.participants().local.video);
}
function toggleMic() {
callFrame.setLocalAudio(!callFrame.participants().local.audio);
}
//
// 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>
<input type="radio" name="customLayout" value="" checked>
standard Daily.co UI
</input>
</div>
<div>
<input type="radio" name="customLayout" value="true">
demo custom UI
</input>
</div>
</div>
<div id="meeting-info-row">
<div id="meeting-room-info" class="info">
room info
</div>
<div id="meeting-participants-info" class="info">
meeting participants
</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="toggle-local-cam" onclick="toggleCam()">
toggle local cam
</button>
<button id="toggle-local-mic" onclick="toggleMic()">
toggle local mic
</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>
<button id="start-screenshare" onclick="callFrame.startScreenShare()">
start screenshare
</button>
<button id="stop-screenshare" onclick="callFrame.stopScreenShare()">
stop screenshare
</button>
</div>
</div>
<div id="call-frame-container">
</div>
</div>
</body>
</html>
You can’t perform that action at this time.