Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (76 sloc) 3.33 KB
<!DOCTYPE html>
<script src="//" async></script>
<script type="module" src="../circuit-call-button.js" defer></script>
<script type="module" src="../circuit-call-stage.js" defer></script>
/* 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;
<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>
target="">Call HR</circuit-call-button>
<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>
<a id="toggle" hidden href="">Toggle Sending Video</a>
<a target="_blank" href="">source</a> |
<a target="_blank" href="">documentation</a> |
<a target="_blank" href="">github</a> |
<a target="_blank" href="">npm</a>
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 => { = 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 =>
document.querySelector('#toggle').addEventListener('click', e => {
e.preventDefault(); ? btnEl.removeAttribute('video') : btnEl.setAttribute('video', '')