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

Users who have contributed to this file

281 lines (267 sloc) 8.88 KB
<html>
<head>
<title>call events demo</title>
<script src="https://unpkg.com/@daily-co/daily-js"></script>
<script src="create-demo-room.js"></script>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: 800;
color: #ffffff;
}
.small {
font-size: 0.75em;
font-weight: normal;
color: #b7b7b7;
}
#call-frame, #ui-container {
width: 100%;
height: 100%;
border: 0;
position: fixed;
top: 0;
left: 0;
}
#ui-container {
display: grid;
grid-template-rows: 1fr 0.5fr 0.5fr;
grid-template-columns: 0.5fr 0.5fr 1fr;
}
#ui-local {
background-color: #e8e8e8;
color: #343434;
grid-area: 1 / 1;
grid-column-end: 3;
display: flex;
justify-content: center;
align-items: center;
}
#ui-alone {
background-color: #cecece;
grid-area: 1 / 3 / 4 / 3;
}
#ui-controller {
background-color: #383838;
grid-area: 2 / 1 / 4 / 2;
padding: 30px;
}
#ui-controller hr, #ui-participant hr {
border: 0.5px solid #4f4f4f;
margin-bottom: 1.25em; /** 20/16px **/
}
.ui-controller-control, .ui-participant-guest {
display: flex;
justify-content: space-between;
margin-bottom: 1.25em; /** 20/16px **/
}
.ui-controller-control p, .ui-participant-guest p {
margin: 0;
}
.ui-controller-control {
cursor: pointer;
}
.ui-controller-control img {
width: 24px;
height: 24px;
}
.ui-controller-control:last-child {
margin-bottom: 0;
}
.ui-controller-control:hover {
opacity: 0.4;
}
#ui-participant {
background-color: #242424;
grid-area: 2 / 2 / 4 / 2;
padding: 30px;
}
@media (max-width: 1000px) {
#ui-controller {
grid-area: 2 / 1 / 2 / 3;
}
#ui-participant {
grid-area: 3 / 1 / 3 / 3;
}
.ui-controller-control, .ui-participant-guest, #ui-controller hr, #ui-participant hr {
margin-bottom: 0.625em;
}
}
@media (max-width: 800px) {
#call-frame {
z-index: 100;
top: 197px;
height: calc(100vh - 197px);
}
#ui-container {
grid-template-columns: 1fr;
grid-template-rows: 197px;
}
#ui-controller {
grid-area: 1 / 1;
}
#ui-participant {
display: none;
}
}
</style>
</head>
<body onload="run()">
<div onclick="callFrame.join({ url }).then((ps)=>console.log('joined and have participants', ps));">
[ join mtg ]
</div>
<div onclick="console.log('PARTICIPANTS', callFrame.participants())">
[ get participants ]
</div>
<!--
<div>&nbsp;</div>
<div onclick="callFrame.startRecording()">
[ start recording ]
</div>
<div onclick="callFrame.stopRecording()">
[ stop recording ]
</div>
-->
<div onclick="callFrame.stopScreenShare()">
[ stop screen share ]
</div>
<div onclick="showNames = !showNames;
callFrame.loadCss({ bodyClass: bodyClasses() });">
[ toggle names ]
</div>
<iframe id="call-frame" allow="camera; microphone; autoplay"></iframe>
<div id="ui-container">
<div id="ui-local">
<p>Loading your video feed…</p>
</div>
<div id="ui-alone">
</div>
<div id="ui-controller">
<div onclick="callFrame.setLocalVideo(!callFrame.localVideo())" class="ui-controller-control">
<p>Toggle camera</p>
<img src="icon-camera.svg" alt="Toggle Camera On/Off">
</div>
<div onclick="callFrame.setLocalAudio(!callFrame.localAudio())" class="ui-controller-control">
<p>Toggle microphone</p>
<img src="icon-microphone.svg" alt="Toggle Microphone On/Off">
</div>
<div onclick="toggleScreenShare()" class="ui-controller-control">
<p id="screenshare-label">Start a screen share</p>
<img src="icon-screenshare.svg" alt="Screen share">
</div>
<hr>
<div id="leave-call-div" class="ui-controller-control">
<p id="leave-call-label" style="color:#ff3b30"></p>
<img src="icon-leave.svg" alt="Leave call">
</div>
</div>
<div id="ui-participant"></div>
</div>
<script>
let url, token, isCurrentlyScreenSharing;
function showEvent(e) {
console.log('video call event -->', e);
}
async function joinedCall(e) {
showEvent(e);
document.getElementById('leave-call-label')
.innerHTML = 'Leave call';
document.getElementById('leave-call-div')
.onclick = () => callFrame.leave();
}
async function leftCall(e) {
showEvent(e);
document.getElementById('leave-call-label')
.innerHTML = 'Join call';
document.getElementById('leave-call-div')
.onclick = () => callFrame.join();
}
async function updateEvent(e) {
showEvent(e);
let ps = callFrame.participants();
if (Object.keys(ps).length < 2) {
document.getElementById('ui-local').style.display = "none";
document.getElementById('ui-alone').style.display = "block";
let wrapper = document.getElementById('ui-participant')
wrapper.innerHTML = ''
} else {
document.getElementById('ui-local').style.display = "none";
document.getElementById('ui-alone').style.display = "none";
let wrapper = document.getElementById('ui-participant')
wrapper.innerHTML = ''
Object.keys(ps).forEach((p) => {
if (p === 'local') {
return;
}
let participant = ps[p];
wrapper.innerHTML += `
<div class="ui-participant-guest">
<p>${participant.user_name||'Guest'}</p>
<img src="icon-eject.svg" alt="Kick user out of meeting"
onclick="callFrame.updateParticipant('${p}',{eject:true})" />
</div>`
})
}
// update controller ui for joining/leaving the meeting and
// for local screenshare start/stop
if (ps.local) {
if (ps.local.screen && !isCurrentlyScreenSharing) {
isCurrentlyScreenSharing = true;
document.getElementById('screenshare-label').
innerHTML = 'Stop sharing your screen';
} else if (!ps.local.screen && isCurrentlyScreenSharing) {
isCurrentlyScreenSharing = false;
document.getElementById('screenshare-label').
innerHTML = 'Start a screen share';
}
}
}
async function run() {
// create a short-lived demo room and a join token with
// is_owner set to true. 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,
});
callFrame = window.DailyIframe.wrap(
document.getElementById('call-frame'),
{ customLayout: true }
);
callFrame.on('joining-meeting', showEvent)
.on('joined-meeting', joinedCall)
.on('left-meeting', leftCall)
.on('participant-joined', updateEvent)
.on('participant-updated', updateEvent)
.on('participant-left', updateEvent)
.on('recording-started', showEvent)
.on('recording-stopped', showEvent)
.on('recording-stats', showEvent)
.on('recording-error', showEvent)
.on('recording-upload-completed', showEvent)
.on('error', showEvent);
await callFrame.join({
url: ownerLink,
cssFile: 'demo-css-grid.css'
});
console.log(' You are connected to', room.url, '\n',
'Join from another tab or machine, or use the', '\n',
'`callFrame.addFakeParticipant()` method to test', '\n',
'this layout.');
}
async function toggleScreenShare() {
if (!isCurrentlyScreenSharing) {
callFrame.startScreenShare();
} else {
callFrame.stopScreenShare();
}
}
</script>
</body>
</html>
You can’t perform that action at this time.