REAL-TIME WHITEBOARD USING AI

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 13 Issue: 04 | Apr 2026 www.irjet.net p-ISSN: 2395-0072

REAL-TIME WHITEBOARD USING AI

Saloni, Princy Tomar, Shahnuma Khan, Akansha Singh Student, Department of Computer Science & Engineering

Abstract: The virtual whiteboard, in its simplified form, allows users to draw and interact through hand gestures in front of a webcam, providing an intuitive and immersive experience. By harnessing gesture recognition technology, users can replicate the tactile sensation of traditional whiteboard drawing in a digital environment. This innovative application eliminates the need for physical tools and enables spontaneous ideation, brainstorming, and collaboration from anywhere with an internet connection. The integration of hand gestures not only enhances user engagement but also offers a dynamic and accessible platform for creative expression, making the virtual whiteboard an effective tool for remote collaboration, online education, and interactive presentations.

Key Words: Virtual Whiteboard, Gesture Recognition, Hand Gesture, AI Collaboration, Real-Time Drawing, Computer Vision,RemoteEducation,DigitalInteraction highcost of digital whiteboard hardware, dependency on specific devices and operating systems, and limitations during remote brainstorming sessions mouse interaction. Some systems use stylus-based input, which may not be accessible to all users.

1. INTRODUCTION

A whiteboard is an essential tool used in classrooms, meetings, and brainstorming sessions. With the advancement of technology, traditional whiteboards have evolved into digital whiteboards that support remote collaboration. However, mostdigitalwhiteboardsrelyontouchscreensorexternaldeviceslikestyluspens.

1.1 Importance of AI in Collaborative Tools

Artificial Intelligence (AI) has significantly improved the functionality of collaborative tools. AI-based systems can understandgestures,recognizepatterns,andprovidereal-timeinteraction.Thisreducestheneedforphysicalcontactand enhancesuserexperience.

1.2 Overview of Existing Solutions

ExistingtoolssuchasMicrosoftWhiteboard,GoogleJamboard,andZoomWhiteboardprovidedigital drawingcapabilities. However,theydependontouchinputor 1.3 Problem Statement

There is a need for a touch-free, real-time whiteboard system that uses AI to recognize hand gestures and convert them intodrawingactionswithoutrequiringadditionalhardwarelikestylusortouchscreens.

2. PROBLEM FORMULATION

In existing technology, we use big physical digital white boards to write on the screen. This system is not mobile so we cannotmoveitfromoneplacetoanotherplaceeasily.Inourprojectthiscanbeeasilymoveablefromoneplacetoanother. Moreover, for everyone to afford a digital board is not possible, but our project has less cost and no hardware requirement.Someotherproblemsfacedbypeopleinclude:accessibilitychallengesfordifferently-abledusers,

3. LITERATURE REVIEW

The field of real-time collaborative systems has witnessed substantial growth in recent years, driven by the increasing demandforvirtualteamwork,remoteeducation,andcloud-basedproductivitytools.Awidearrayofresearchconducted by prominent organizations such as the IEEE, ACM, and other academic bodies highlights the impact of synchronous collaborationplatformsonuserengagement,retention,andtaskefficiency.

Onesignificanttrendobservedinthesestudiesistheadoptionofreal-timewhiteboardtoolsinonlinelearningandremote meetings,wheretheirvisualnatureenhancesboththedeliveryandcomprehensionofcomplextopics.Researchpaperson

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 13 Issue: 04 | Apr 2026 www.irjet.net p-ISSN: 2395-0072

interactive digital classrooms have consistently demonstrated that visual co-creation drawing, annotating, and brainstorming leads to greater cognitive engagement, improved memory retention, and stronger conceptual understandingamongparticipants.

Previous implementations like CoDraw, a collaborative drawing tool for language learners, and shared cursor/pointer systems used in educational software platforms, emphasize the value of immediate visual feedback. These tools have shown that minimizing latency in drawing synchronization can drastically improve collaborative task performance and mutualawarenessamongusers.

Applications like Figma, Miro, and Google Jamboard serve as real-world benchmarks that validate the utility of real-time visual collaboration in both design and educational contexts. These platforms rely on WebSocket-based communication protocols, often implementedvia Socket.IO, which ispraisedinacademicand developer communities for its efficiencyin managingmultipleconcurrentuserconnectionswithreal-timedatabroadcastingcapabilities.

Moreover, the architecture of collaborative systems has evolved to embrace event-driven, low-latency architectures that not only support live interaction but also ensure scalability and fault tolerance. The proposed Real-Time Collaborative Whiteboardsystemseekstodeliverabalanceofresponsiveness,simplicity,andfunctionaleffectiveness,makingitsuitable foreducationalinstitutions,remoteteams,andcreativeprofessionalsalike.

4. METHODOLOGY

The development of the Real-Time Whiteboard application follows a structured approach using front-end web technologiesincludingHTML,CSS,andJavaScript.Themethodologyfocusesondesigninganinteractiveand user-friendly drawingplatformwithoutrelyingonbackendservices.

4.1 Requirement Analysis

First,thesystemrequirementswereanalyzedtoidentifythecorefunctionalitiessuchasdrawing,erasing,colorselection, shapecreation,anddatastorage.Theneedforaresponsiveandintuitiveuserinterfacewasalsoconsidered.

4.2 System Design

Thesystem wasdesignedas a single-page webapplication. Thelayout includesa full-screencanvas elementfor drawing andatoolbarcontainingtoolslikepencil,eraser,colorpicker,shapes,anddownloadoptions.Thedesignensuressmooth interactionacrossdevices.

4.3 Implementation

CanvasAPI wasused to implement drawing functionality.Mouse events suchas mousedown, mousemove, and mouseup were used to capture user input. Different tools like brush, eraser, and shapes were implemented using JavaScript logic. Undoandredooperationsweremanagedusingarraystostoredrawingstates.

Volume: 13 Issue: 04 | Apr 2026 www.irjet.net

4.4 Data Management

-0072

The application uses Local Storage to store the whiteboard data. This ensures that the user's drawing is preserved even afterrefreshingthepage,providingapersistentexperiencewithoutabackend.

4.5 User Interaction

Userinteractionishandledthrougheventlisteners.Thesystemallowsusersto:drawfreelyonthecanvas,changecolors andbrushsizes,inserttextandshapes,andclearordownloadthecanvas.

4.6 Testing and Optimization

Theapplicationwastestedforperformanceandusabilityacrossdifferentbrowsersanddevices.Issueslikelagindrawing andimpropereventhandlingwereresolvedtoensureasmoothuserexperience.

4.7 Limitations

Since no backend is used, real-time collaboration between multiple users is not supported. Data is stored locally, which limitsaccesstoasingledevice.

5. RESULT AND DISCUSSION

5.1 Results

Thedevelopedsystem forReal-Time WhiteboardCollaboration UsingAI wassuccessfullyimplementedand testedunder multiplescenarios.Theresultsdemonstratethefollowingoutcomes:

Volume: 13 Issue: 04 | Apr 2026 www.irjet.net

5.2 Discussion

The results indicate that integrating AI with real-time collaborative systems significantly enhances usability and functionality. The AI features such as handwriting recognition and shape detection improved productivity by converting roughsketchesintostructuredcontent.However,accuracyvariedbasedoninputquality.

Scalability Considerations: Whilethesystemperformedwellwithalimitednumberofusers(5–10users),performance degradationwasobservedwhenscalingbeyondthat,indicatingtheneedforoptimizationinserverhandling.

Network Dependency: The system's performance heavily depends on internet speed. Users with slower connections experiencedslightdelaysandsynchronizationissues.

Security and Data Privacy: Basicauthenticationmechanismswereimplemented,butfurtherenhancementssuchasendto-endencryptionarerequiredforsecurecollaboration.

Comparedtotraditional tools,theAI-poweredwhiteboardprovides: betteraccessibility,automatedrecognition features, and remote collaboration capabilities. Identified limitations include limited AI accuracy for complex handwriting and dependencyonnetworkquality.

-0056

Volume: 13 Issue: 04 | Apr 2026 www.irjet.net p-ISSN: 2395-0072

6. CONCLUSION

This project presents the design and development of a Whiteboard Application using front-end web technologies. The systemprovidesessentialdrawingfunctionalitiesalongwithanintuitiveuserinterface,makingitsuitableforeducational andcollaborativepurposes.

Theintegrationofhandgesturecontrolenhancestheusabilityoftheapplicationbyenablingtouchlessinteraction,which represents a step towards more natural and user-friendly interfaces. It also demonstrates how modern technologies can becombinedtoimproveuserexperience.

Although the current system does not support multi-user collaboration due to the absence of a backend, it effectively fulfills its objective as a standalone application. The use of local storage ensures data persistence, and the overall performanceremainsstableundernormalconditions.

Inthefuture,theprojectcanbeextendedbyadding:real-timecollaborationusingWebSockets,cloud-baseddatastorage, and improved gesture recognition using advanced models. In conclusion, the developed system successfully achieves its goalsandprovidesastrongfoundationforfurtherenhancementsininteractivewebapplications.

REFERENCES

[1] M. Johnson et al., "Innovations in Virtual Whiteboard Technology: A Comprehensive Review," IEEE Transactions on Human-MachineSystems,vol.15,no.2,pp.567-578,Apr.2021.

[2] R. Patel and S. Gupta, "Enhancing Collaborative Learning through Virtual Whiteboard Platforms," International ConferenceonEducationTechnology,pp.123-136,Jul.2020.

[3]Q.Wangetal.,"VirtualWhiteboardSolutionsforRemoteWork:AComparativeStudy,"JournalofVirtualCollaboration, vol.8,no.4,pp.45-58,Oct.2019.

[4] S. Lee et al., "Usability Evaluation of Virtual Whiteboard Interfaces for Online Education," International Journal of Human-ComputerInteraction,vol.27,no.6,pp.512-525,May2022.

[5] H. Kim and J. Chen, "Virtual Whiteboard Integration in E-Learning Platforms: A User-Centric Approach," IEEE InternationalConferenceonE-Learning,pp.321-334,Nov.2021.

[6]M.Suzukietal.,"InteractiveVirtualWhiteboardSystems:DesignPrinciplesandUserExperience,"ACMTransactionson Computer-HumanInteraction,vol.22,no.3,pp.112-125,Sep.2020.

[7]R.GuptaandA.Patel,"EnhancingOnlineCollaborationwithVirtualWhiteboardTools:ACaseStudyofRemoteTeams," InternationalJournalofVirtualCollaboration,vol.12,no.1,pp.34-47,Jan.2021.

[8]S.ParkandK.Lee,"UsabilityandUserSatisfactionofVirtualWhiteboardApplicationsinEducationalSettings,"Journal ofEducationalTechnology&Society,vol.18,no.2,pp.215-228,Apr.2019.

[9] Q. Chen et al., "Integration of Virtual Whiteboard Technology in Blended Learning Environments," IEEE Transactions onLearningTechnologies,vol.14,no.4,pp.789-802,Oct.2021.

[10] H. Wang et al., "Virtual Whiteboards for Online Tutoring: A Comparative Analysis of Features and Usability," InternationalConferenceonE-LearningandDistanceEducation,pp.245-258,Dec.2020.

[11] E. Zhong, C. R. del-Blanco, D. Berjón, F. Jaureguizar, and N. García, "Real-Time Monocular Skeleton-Based Hand GestureRecognitionUsing3D-Jointsformer," Sensors,vol.23,no.16,p.7066,Aug.2023.

[12] O. Yusuf, M. Habib, and M. Moustafa, "Real-Time Hand Gesture Recognition: Integrating Skeleton-Based Data Fusion andMulti-StreamCNN," arXiv preprint,arXiv:2406.15003,Jun.2024

[13] O. Köpüklü, A. Gunduz, N. Kose, and G. Rigoll, "Real-time Hand Gesture Detection and Classification Using ConvolutionalNeuralNetworks," arXiv preprint,arXiv:1901.10323,Jan.2019.

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

[14]G.Benitez-Garcia,L.Prudente-Tixteco,L.C.Castro-Madrid,R.Toscano-Medina,J.Olivares-Mercado,G.Sanchez-Perez, and L. J. Garcia Villalba, "Improving Real-Time Hand Gesture Recognition with Semantic Segmentation," Sensors, vol. 21, no.2,p.356,Jan.2021.

[15] Y. Meng, H. Jiang, N. Duan, and H. Wen, "Real-Time Hand Gesture Monitoring Model Based on MediaPipe's RegisterableSystem," Sensors,vol.24,no.19,p.6262,Sep.2024.

[16]M.S.Abdallah,G.H.Samaan,A.R.Wadie,F.Makhmudov,andY.-I.Cho,"Light-WeightDeepLearningTechniqueswith AdvancedProcessingforReal-TimeHandGestureRecognition," Sensors,vol.23,no.1,p.2,Dec.2022.

[17]H.Zhu,C.Deng,andY.Zhu,"MediaPipebasedGestureRecognitionSystemforEnglishLetters,"in Proc. 11th Int. Conf. Networks, Communication and Computing (ICNCC),Beijing,China,Dec.2022.

[18] T. H. Chandhan, K. Kumar R., N. Raj, N. N. K. Reddy, and M. Z. A. N., "Air Canvas: Hand Tracking Using OpenCV and MediaPipe," SSRN,Nov.2023.

[19] "Virtual Drawing Board (Drawing and Writing Using Hand Gestures)," International Journal for Research in Applied Science and Engineering Technology (IJRASET),vol.10,2022.[Online].Available:

[20] "AIR CANVAS USING OPENCV, MEDIAPIPE," International Research Journal of Modernization in Engineering, Technology and Science (IRJMETS),vol.4,no.5,May2022.

[21]Y.-H.Chen,C.-H.Huang,S.-W.Syu,T.-Y.Kuo,andP.-C.Su,"Egocentric-ViewFingertipDetectionforAirWritingBased onConvolutionalNeuralNetworks," Sensors,vol.21,no.13,p.4382,Jun.2021.

[22] "Computer Vision Based Virtual Sketch Using Detection," International Journal for Research in Applied Science and Engineering Technology (IJRASET),vol.10,Jan.2022.

[23] T. Lugaresi, J. Tang, H. Nash, C. McClanahan, E. Uboweja, M. Hays, et al., "MediaPipe: A Framework for Building PerceptionPipelines," arXiv preprint,arXiv:1906.08172,Jun.2019.

[24] A. Bozorgpour, R. Azad, R. Karimijafarbigloo, J. Duotlikun, and E. Adeli, "COLiER: Collaborative Editing of Raster Images," arXiv preprint,arXiv:2107.05962,Jul.2021.

[25] T. Hemaa Chandhan et al., "An Approach for Air Drawing Using Background Subtraction and Contour Extraction," arXiv preprint,arXiv:2503.01497,2025.

Volume: 13 Issue: 04 | Apr 2026 www.irjet.net p-ISSN: 2395-0072 © 2026, IRJET | Impact Factor value: 8.315 |