Demos and sample code. Each demo contains links to both the source code for and a live version that you can run in your browser without checking out the repo locally.
When running the live demos, it’s useful to have your browsers javascript console open.
This demo showcases is very simple video call that is created in an iframe and rendered with our default UI. All embedded API video calls come with our default interface and UX controls.
Screen shot of our super-simple demo
Our Standard/Custom demo highlights the UI elements that you have control over. Try joining the meeting and toggling your camera or starting a screen share using the buttons above the demo. You can add your own custom controls to better integrate the video call into your product.
Screen shot of our standard/custom demo
A fully customized UI that uses CSS Grid Layout. You can style and adjust your API video call to better work for your project. This demo was built using CSS grid and is responsive as well. Try resizing your browser once you open the demo.
Screen shot of our custom CSS grid UI demo
A demo of laying out small call "bubbles" for a mobile device UI. Also shows responding to click/touch events. Load the page, click "Create room" then copy the URL and load the page in another tab or on another device.
Remote monitoring use case. One-way video, and managing bandwidth use dynamically.
To modify these demos and develop locally, you can execute these commands from the top-level directory in this GitHub repo:
npm install
npm run build-dev
npm run demo
Unless there is a port conflict, the demo web server will start on port 3000 — https://localhost:3000/demo/
We are big fans of Webflow, and have used it to build our own marketing website. We've also created a few demos to showcase how easy it is to add video calls to Webflow using our video call API. If you're a Webflow fan, check out our blog post, how to embed video calls on a custom Webflow site., to learn more.
Wireframe app demo (in Webflow)
This mock app shows a call embedded within a UI structure that is all built in Webflow. Open the demo to try it now. You can: invite others to the call, resize your browser to view responsive layouts and toggle full screen mode.
The demo is time limited and utilizes some awesome Webflow interactions.
Screen shot of our video chat embedded in a mock UI
Mentor app demo (in Webflow)
Our Mentor app demo is also built in Webflow. In this demo we showcase how you can use components to create rich user flow. Upon opening the demo, you'll be asked to fill out a simple form in order to request a meeting with our "mentor". Once submitted a Zapier Webhook then sends a Slack notification to our mentor — who is not a real person, of course 😁
Learn more about how we built this demo here; and how we created this Zapier integration, here.
Screen shot our our Webflow, Mentor App demo