Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.
Sign up
Fetching contributors…
Cannot retrieve contributors at this time
| <!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> |