Quick Launch Video Call with ZEGOCLOUD, Next.js&Daisy UI
Published: 2024-05-08 10:11:23

## 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](https://www.zegocloud.com/) 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](https://www.zegocloud.com/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.
```shell
# npx create-next-app videoApp
```
And following option I choose.
```shell
# 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.
```shell
yarn add -D daisyui@latest
yarn add @zegocloud/zego-uikit-prebuilt
yarn add theme-change
yarn add next-themes
```

### Configure Daisy UI
Setup _<u>tailwind.config.ts</u>_ for add plugins of daisyui into following line.
```ts
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 _<u>app/global.css</u>_ except apply tailwind. Because I will use Daisy UI style but once we remain this style sheet it will overwrite. 
```css
@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 _<u>components</u>_ directory and put following _<u>theme-provider.tsx</u>_
```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 _<u>app/layout.tsx</u>_
```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](https://daisyui.com/docs/themes/) for theme switch and remain what your selected before by store information into local storage automatically.

```tsx
"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](https://docs.zegocloud.com/article/14959) code which official documentation provided.
Please make sure you have app id and server secret from your ZEGOCLOUD project. 
```tsx
"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 _<u>app/page.tsx</u>_ as below.
```ts
//...
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](https://www.zegocloud.com/product/video-call). And this is only took just 10-30min development which is amazing time saving for you.