Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (76 sloc) 3.33 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 {
margin-top: 20px;
width: 400px;
height: 300px;
display: block;
}
circuit-call-stage:not([streaming]) {
display: none;
}
</style>
</head>
<body>
<h2>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. OAuth popup asking for Circuit authentication and permissions is shown for the first call.</p>
<circuit-call-button
video
domain="circuitsandbox.net"
clientId="f06c51a30f0d4eb6acc05829c3e86266"
target="circuitsdk01@gmail.com">Call HR</circuit-call-button>
<circuit-call-stage></circuit-call-stage>
<p id="overlay">
<div>Set overlay attribute:</div>
<input type="radio" name="overlay" value="bottom-right" checked="checked"> bottom-right<br>
<input type="radio" name="overlay" value="top-right"> top-right<br>
<input type="radio" name="overlay" value="top-left"> top-left<br>
<input type="radio" name="overlay" value="bottom-left"> bottom-left<br>
<input type="radio" name="overlay" value="hide"> hide<br>
</p>
<p>
<a id="toggle" hidden href="">Toggle Sending Video</a>
</p>
<p>
<a target="_blank" href="https://github.com/circuit/circuit-web-components/blob/master/examples/videoCall.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>
</p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const btnEl = document.querySelector('circuit-call-button');
const stageEl = document.querySelector('circuit-call-stage');
const btnToggle = document.querySelector('#toggle');
btnEl.addEventListener('callchange', e => {
stageEl.call = e.detail;
e.detail && e.detail.isEstablished ? btnToggle.removeAttribute('hidden') : btnToggle.setAttribute('hidden', '');
});
for (let radio of document.querySelectorAll('input[name="overlay"]')) {
radio.addEventListener('change', e =>
stageEl.setAttribute('overlay', e.target.value)
);
}
document.querySelector('#toggle').addEventListener('click', e => {
e.preventDefault();
btnEl.call.localMediaType.video ? btnEl.removeAttribute('video') : btnEl.setAttribute('video', '')
});
});
</script>
</body>
</html>