Creating a virtual classroom with the Zoom Video SDK

Jump to

Zoom Video SDK provides developers with an extensive array of tools to create a customizable video experience for users. When embarking on the journey to construct a virtual classroom using this powerful tool, confidence in its capabilities is paramount. With features such as UI and functionality customization backed by Zoom’s core technology, the Video SDK lays a robust foundation for developing an online learning environment that caters to both educators and students.
This guide will be presented in two parts, detailing the process of building a virtual classroom application. The first part will focus on the server-side setup, while the second part will delve into the client-side integration of the Video SDK within a React application.

Server-Side Development

To initiate the project, a main directory named ‘classroom_example’ was created to contain all necessary files. Within this directory, a sub-folder labeled ‘server’ was established, where the server-side application would be developed. The first step involved running npm init -y to generate the package.json file.The server folder includes two primary files: server.js and router.js. The server.js file contains boilerplate code for global route handling, while router.js directs specific routes based on HTTP methods.

File Structure Overview

Server.js (/server/server.js)

  • Required necessary packages and assigned them to variables.
  • Created an Express application instance and mounted middleware for route handling.
  • Configured the server to run on port 4000.
  • Implemented default error handling.
const express = require('express');
const app = express();
const router = require('./router');

app.use(express.json());
const cors = require("cors");
app.use(cors());
app.use('/', router);

app.use((err, req, res, next) => {
const defaultErr = {
log: err,
status: 500,
message: { err: 'An error occurred' }
};
const errorObj = Object.assign({}, defaultErr, err);
console.log(errorObj.log);
return res.status(errorObj.status).json(errorObj.message);
});

app.listen(4000, () => {
console.log('Listening on port 4000');
});

Router.js (/server/router.js)

  • Required files that house controller functions for data retrieval.
  • Created an Express router instance.
  • Defined routes to facilitate data communication between the backend and frontend.
const express = require('express');
const router = express.Router();

const userControllers = require('./Controllers/userControllers');
const sessionController = require('./Controllers/sessionControllers');

router.post('/generate', userControllers.generateToken, (req, res) => {
res.status(200).json(res.locals.token);
});

router.post('/login', userControllers.verifyUser, (req, res) => {
res.status(200).send(res.locals.loggedIn);
});

router.get('/session', sessionController.getId, sessionController.getUsers, (req, res) => {
res.status(200).send(res.locals.users);
});

router.get('/details', sessionController.getId, sessionController.getDetails, (req, res) => {
res.status(200).send(res.locals.details);
});

In addition to these files, there are also ‘Models’ and ‘Controllers’ folders within the server directory. The Models folder connects to a PostgreSQL database using Node-Postgres to manage database connections efficiently.

User Controllers Overview

The userControllers.js file is responsible for creating JWT signatures and verifying user credentials. Utilizing jsrsasign for cryptography and dotenv for managing environment variables containing SDK credentials is critical here.

The first method defined is userControllers.generateToken, which generates a JWT signature based on incoming request data. The second method, userControllers.verifyUser, checks if a user exists in the database by querying with provided credentials.

Session Controllers Overview

The sessionControllers.js file contains methods for retrieving session details via the Video SDK API. Axios is employed as the HTTP client for making requests.Key methods include:

  • getId: Retrieves the current session ID.
  • getUsers: Lists users participating in a session.
  • getDetails: Fetches detailed information about a session.

Conclusion

This overview encapsulates the server-side setup for creating a virtual classroom application using Zoom Video SDK. The next part will explore client-side development where React will be utilized alongside Ant Design and TailwindCSS for UI enhancements. By following this guide, developers can effectively build an online learning platform that meets modern educational needs.

Read more such articles from our Newsletter here.

Leave a Comment

Your email address will not be published. Required fields are marked *

You may also like

Kubernetes

15 Highest Paying Tech Jobs in 2025

As we approach 2025, the technology landscape is rapidly evolving, fueled by advancements in artificial intelligence, cloud computing, and cybersecurity. These developments are transforming industries and creating high demand for

CSS Snippets

Difference Between Semantic And Non-Semantic Elements

HTML5 provides over 100 elements, each designed for specific use cases. These elements help developers create websites with structure, meaning, and functionality. While developers have the freedom to choose how

Nvidia Osmo

What is ES6 & Its Features You Should Know

JavaScript works as one of the core elements of Web Construction and is among the widely used programming languages at the present day. It allows developers to produce dynamic web

Scroll to Top