Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
73 lines (66 sloc) 2.75 KB
<!DOCTYPE html>
<html>
<head>
<script src="//unpkg.com/circuit-sdk@latest/circuit.min.js" async></script>
<script type="module" src="../circuit-call-button.js" defer></script>
<script type="module" src="../circuit-call-stage.js" defer></script>
<style>
/* Global page styles which are inherited by element */
body {
font-family: sans-serif;
font-size: 13px;
}
/* Hide until defined to prevent flash rendering */
circuit-call-button:not(:defined), circuit-call-stage:not(:defined) {
opacity: 0;
}
/* Show call stage when stage is active (i.e. video is streaming) */
circuit-call-stage[streaming] {
margin-top: 20px;
width: 400px;
height: 300px;
display: block;
}
circuit-call-stage {
display: none;
}
input {
width: 150px;
margin: 5px 0px 10px 0px;
}
</style>
</head>
<body>
<h2>Guest video call</h2>
<p>Uses web components <code>circuit-call-button</code> and <code>circuit-call-stage</code> to start a video call with a Circuit user specified by the <code>target</code> attribute. Guest user does not need to logon as its using a token provided by the <code>poolUrl</code> endpoint.</p>
<div>
Since there is no actual helpdesk, enter a Circuit email acting as receiving side.<br>
<input value="circuitsdk01@gmail.com">
</div>
<circuit-call-button
video
domain="circuitsandbox.net"
clientId="f06c51a30f0d4eb6acc05829c3e86266"
poolUrl="https://guest-pool-tokens.appspot.com/token"
callingText="Calling Helpdesk..."
hangupText="End call">Call Helpdesk</circuit-call-button>
<circuit-call-stage></circuit-call-stage>
<p>
<a target="_blank" href="https://github.com/circuit/circuit-web-components/blob/master/examples/guestCall.html">source</a> |
<a target="_blank" href="https://github.com/circuit/circuit-web-components/tree/master/docs">documentation</a> |
<a target="_blank" href="https://github.com/circuit/circuit-web-components">github</a> |
<a target="_blank" href="https://www.npmjs.com/package/@unify/circuit-web-components">npm</a> |
<a href="https://github.com/circuit/guest-pool">guest pool app</a>
</p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const inputEl = document.querySelector('input');
const btnEl = document.querySelector('circuit-call-button');
const stageEl = document.querySelector('circuit-call-stage');
btnEl.addEventListener('callchange', e => stageEl.call = e.detail);
btnEl.target = inputEl.value;
inputEl.addEventListener('change', e => btnEl.target = e.target.value);
});
</script>
</body>
</html>