DotConnect

Posted on May 8

Quick Launch Video Call with ZEGOCLOUD, Next.js&Daisy UI

Introduction

In today’s interconnected world, effective communication is paramount. Whether it’s for business meetings, virtual events, or personal connections, having a reliable video call system is essential. ZEGOCLOUD steps up to the plate, offering a robust and user-friendly platform for all your video communication needs.

I'm going to show how we build video call web app on top of Next.js step by step but super quick by using ZEGOCLOUD SDK :)

Before you begin

Please make sure you have account of ZEGOCLOUD. if you don't have it then please register with following link.

Create ZEGOCLOUD account and get 10000 free mins with ZEGOCLOUD UIKits

Part 1 Project Setup

Create Next.js project

Let's start from beginning to create nextjs project setup. first of all run the create-next-app.

# npx create-next-app videoApp

And following option I choose.

# npx create-next-app videocall
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /var/home/web/zegocloud/videocall.

Using npm.

Install packages

Let's install two packages for daisyui and zegocloud uikit. theme-change and next-themes will use when we want let user to select theme.

yarn add -D daisyui@latest
yarn add @zegocloud/zego-uikit-prebuilt
yarn add theme-change
yarn add next-themes

Configure Daisy UI

Setup tailwind.config.ts for add plugins of daisyui into following line.

import type { Config } from "tailwindcss";

const config: Config = {
//...
  daisyui: {
    themes: ["light", "dark", "luxury"],
  },
  plugins: [
    require('daisyui'),
  ],
};
export default config;

Remove default css

Remove default style which in app/global.css except apply tailwind. Because I will use Daisy UI style but once we remain this style sheet it will overwrite.

@tailwind base;
@tailwind components;
@tailwind utilities;

Part 2 Create Dark Mode

Create theme provider

This is example code for theme provider wrapper which affect entire your project.
I will create components directory and put following theme-provider.tsx

"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

Apply theme-provider in layout

And then you need to wrap your entire contents with theme-provider. The ThemeProvider need under body tag and wrap children. This is example for app/layout.tsx

import { ThemeProvider } from "@/components/theme-provider"
//...
      <body className={inter.className}>
        <ThemeProvider
              defaultTheme="system"
        >
          {children}
        </ThemeProvider>
      </body>

Create Theme Selector component

Now, Lets create theme selector module which I implement with select tag. theme-change is the one Daisy UI suggested for theme switch and remain what your selected before by store information into local storage automatically.

"use client"
import React, { useEffect } from 'react'
import { themeChange } from "theme-change"

export const ThemeSelector = () => {
    useEffect(() => {
        themeChange(false)
    }, [])
  return (
    <div>
        <select defaultValue="theme" className="select select-bordered select-sm w-24 max-w-xs" data-choose-theme>
            <option value="theme" disabled>Theme</option>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="luxury">Luxyry</option>
        </select>
    </div>
  )
}

Part 3 Build Video Call App

Create Video Call component

I'm going to create component for the actual video conference by using ZEGOCLOUD SDK Kit.
This code is almost same as Example code which official documentation provided.
Please make sure you have app id and server secret from your ZEGOCLOUD project.

"use client"
import * as React from 'react';
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';


function randomID(len: number) {
  let result = '';
  if (result) return result;
  var chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP',
    maxPos = chars.length,
    i;
  len = len || 5;
  for (i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return result;
}

export function getUrlParams(
  url = window.location.href
) {
  let urlStr = url.split('?')[1];
  return new URLSearchParams(urlStr);
}

export default function VideoCall() {
      const roomID = getUrlParams().get('roomID') || randomID(5);
      let myMeeting = async (element: HTMLElement) => {
     // generate Kit Token
      const appID = Number(process.env.NEXT_PUBLIC_APP_ID);
      const serverSecret = String(process.env.NEXT_PUBLIC_SERVER_SECRET);
      const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));


     // Create instance object from Kit Token.
      const zp = ZegoUIKitPrebuilt.create(kitToken);
      // start the call
      zp.joinRoom({
        container: element,
        sharedLinks: [
          {
            name: 'Personal link',
            url:
             window.location.protocol + '//' + 
             window.location.host + window.location.pathname +
              '?roomID=' +
              roomID,
          },
        ],
        scenario: {
          mode: ZegoUIKitPrebuilt.GroupCall, // To implement 1-on-1 calls, modify the parameter here to [ZegoUIKitPrebuilt.OneONoneCall].
        },
      });


  };

  return (
    <div
      className="myCallContainer"
      ref={myMeeting as unknown as React.LegacyRef<HTMLDivElement>}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
}

Compile it

Finally, I will compile it in single page for both of theme selector and video call component.
So I will modify app/page.tsx as below.

//...
export default function Home() {
  return (
    <div className="flex flex-col justify-center items-center">
      <ThemeSelector />
      <VideoCall />
    </div>
  );

Wrap Up!

In this post, I instructed step by step for following contents for web application with Next.js framework.

Dark/Light and more Theme Selector
ZEGOCLOUD video call web

Layout and style may improve more when it comes to production but for the testing purpose this is good enough with using ZEGOCLOUD also has a 100% customized video call SDK. And this is only took just 10-30min development which is amazing time saving for you.

DEV Community