Create custom video calling layouts with the Daily.co API. See our demo examples.

Star Watch

View project on GitHub

daily-js video call demos

Demos and sample code. Links below to both the code for each demo and to a live version you can run without checking out this repo locally.

When running the live demos, it’s useful to have your js console open.

Jump to a demo:

  1. Super-simple Demo: a simple iframe demo
  2. Standard/Custom UI Demo: toggle between our default UI and custom UI
  3. Custom CSS Grid Demo: a customized, colorful demo that uses CSS grid
  4. Remote monitoring use case: One-way video, and managing bandwidth use dynamically

1. Super-simple Demo

Simple Demo Image

This demo showcases is very simple. A video call is created in an iframe and rendered in our default UI. All embedded API video calls come with our default interface and UX controls.

2. Standard/Custom UI Demo

Simple Demo Image

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.

3. Custom CSS Grid Demo

Simple Demo Image

A fully customized UI that uses CSS grid to layout the video call. 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.

4. Remote monitoring use case

Remote monitoring use case. One-way video, and managing bandwidth use dynamically.


For developers

To modify these demos and develop locally, you can execute these commands from the top-level directory in this 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.

http://localhost:3000/demo/