Introduction
As the demand for virtual communication has skyrocketed in recent years, simply offering audio-video conferencing and live streaming is no longer enough. Users now expect features that enhance collaboration and interactivity, making applications more versatile and effective. Collaboration lies at the heart of effective communication, whether it’s for remote teams working on a project, educators engaging with students, or friends connecting over shared interests.
Adding a whiteboard and chat system to a video call application fosters collaboration, enabling users to brainstorm ideas, annotate lessons, and share concepts visually in real-time, thus increasing productivity. In this blog, we’ll explore how to integrate a whiteboard and a chat system into a React-based meeting application. If you’re new to building a meeting application, refer to our step-by-step guide on creating a React-based meeting app using VideoSDK.
Use Cases for Whiteboard and Chat in Meeting Applications
- Remote Collaboration: Teams can brainstorm, sketch ideas, and work on visual concepts together in real-time.
- Education: Teachers can annotate lessons, share diagrams, and encourage student participation.
- Creative Discussions: Designers, developers, or writers can map out ideas and get instant feedback.
-
Social Engagement: Users can chat and draw for interactive dis
cussions, games, or creative storytelling.
Prerequisites
Before you get started , ensure you have the following prerequisites :
- VideoSDK Developer Account ( Not having one, follow VideoSDK Dashboard )
- Basic understanding of React & Hooks (useState, useRef, useEffect)
- Have Node and NPM installed on your device.
Step 1 : Setting Up Your React Environment
1. Setting Up the Meeting Application :
You can either build the Meeting application in react by following my I built a video calling app in just 10 mins! blog tutorial or you can simply clone the below repository.
$ git clone https://github.com/riyachudasama23/VideoStream.git
$ cd VideoStream
$ npm install
2. Setting Up the API Key
To create a new meeting , an API call will be required. You can either use temporary auth-token from user dashboard or go for the auth-Token generated by your servers. We would recommend the later. Paste this token in API.js file.
You need to create a VideoSDK Developer account to get access to the API Token
3. Structure of the project
root/
├── node_modules/
├── public/
├── src/
│ ├── API.js
│ ├── App.jsx
│ ├── index.js
│ ├── components/
│ │ ├── Controls.jsx
│ │ ├── JoinScreen.jsx
│ │ ├── MeetingView.jsx
│ │ ├── ParticipantView.jsx
│ │ ├── Whiteboard.jsx
│ │ ├── ChatView.jsx
├── package.json
Step 2 : Adding the WhiteBoard Feature
VideoSDK simplifies adding a whiteboard to your application by providing the useWhiteboard hook. This hook offers methods like startWhiteboard and stopWhiteboard to control the whiteboard, as well as whiteboardUrl to render the whiteboard interface. With these tools, you can quickly integrate a collaborative whiteboard into your application.
import { useWhiteboard } from "@videosdk.live/react-sdk";
export default function Whiteboard() {
const { startWhiteboard, stopWhiteboard, whiteboardUrl } = useWhiteboard();
return (
<div>
{!whiteboardUrl ? (
<button onClick={startWhiteboard}>Start Whiteboard</button>
) : (
<>
<button onClick={stopWhiteboard}>Stop Whiteboard</button>
<iframe src={whiteboardUrl} width="800" height="600"></iframe>
</>
)}
</div>
);
}
Step 3 : Adding Chat Feature
For communication or messaging among participants , VideoSDK provides usePubSub hook, which utilizes the Publish-Subscribe mechanism. This mechanism can be used to develop a wide variety of functionalities. For example, participants could use it to send chat messages to each other, share files or other media, or even trigger actions like muting or unmuting audio or video.
Group Chat :
Initially, a topic is selected to which all the participants will publish and subscribe. In the following code CHAT is used as a topic. Then, obtain publish() method and messages array from usePubSub hook. All the messages entered will be stored in messages array and by mapping through the array we can easily display the message.
import { usePubSub } from "@videosdk.live/react-sdk";
import { useState, useEffect } from "react";
function ChatView() {
// destructure publish method from usePubSub hook
const { publish, messages } = usePubSub("CHAT");
// State to store the user typed message
const [message, setMessage] = useState("");
const handleSendMessage = () => {
// Sending the Message using the publish method
publish(message, { persist: true });
// Clearing the message input
setMessage("");
};
return (
<>
<div>
<p>Messages: </p>
{messages.map((msg, index) => {
return (
<p key={index}>
{msg.senderName} says: {msg.message}
</p>
);
})}
</div>
<input
value={message}
onChange={(e) => {
setMessage(e.target.value);
}}
/>
<button onClick={handleSendMessage}>Send Message</button>
</>
);
}
export default ChatView;
Private Chat :
To convert the group chat into private chat between two participants , you need to set sendOnly property.
function ChatView() {
// destructure publish method from usePubSub hook
const { publish, messages } = usePubSub("CHAT");
// State to store the user typed message
const [message, setMessage] = useState("");
const handleSendMessage = () => {
// Sending the Message using the publish method
// Pass the participantId of the participant to whom you want to send the message.
publish(message, { persist: true , sendOnly: ['XYZ'] });
// Clearing the message input
setMessage("");
};
//...
}
Display Latest Message Notification :
When a new message arrives , you can show it as notification. In the following code onMessageReceived callback is used to display an alert with the sender’s name and message content.
function ChatView() {
// destructure publish method from usePubSub hook
const { publish, messages } = usePubSub("CHAT", {
onMessageReceived: (message)=>{
window.alert(message.senderName + "says" + message.message);
}
});
const [message, setMessage] = useState("");
const handleSendMessage = () => {
...
};
return <>...</>;
}
Download Chat Messages
All the messages from PubSub published with persist : true can be downloaded as an .csv file. This file will be accessible in the VideoSDK dashboard and through the Sessions API.
Conclusion
To wrap up, adding chat functionality to your VideoSDK React meeting app using the usePubSub hook is a simple yet powerful way to enhance communication among participants. With the Publish-Subscribe mechanism, you can effortlessly manage real-time message exchanges, creating a smooth and interactive group chat experience. This approach opens the door for more features, like sharing files or triggering actions, making your app even more dynamic. Whether you’re building for small teams or large groups, this setup provides a solid foundation for collaboration in your meetings.
Feel Free to take this implementation further by adding more features to suit your app’s needs. For example you can add screen sharing , recording , transcription , summary features. Add interactive features like live polling , question and answer sessions or sending virtual gifts.
Happy Hacking 🙂
Source link
lol
