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 browser's javascript console open.
1. Super Simple Demo
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.
Open simple demo | View source code.
Screen shot of our super-simple demo
2. Standard/Custom UI 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
3. Complete Custom Demo App Using React
A basic but complete video chat web app built using React. It uses the lower-level Daily.co Call Object API, which lets you access call primitives such as audio and video streams to fully customize the call experience.
4. Custom Mobile 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.
5. Remote Monitoring Use Case Demo
Remote monitoring use case. One-way video, and managing bandwidth use dynamically.
Open demo | View Device code | View Human code
6. Custom CSS Grid UI 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
For developers
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 dev
More detailed development information can be found in the repo's README.
Unless there is a port conflict, the demo web server will start on port 3000 — http://localhost:3000/
Webflow demos
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.
Open demo or view the read-only Webflow page
Screen shot our our Webflow, Mentor App demo
Updated 5 days ago