Book an Artist
Pythia
Citrus
Newnorm
Majestic
Wellnessta
Raheja
Payu
Xrosswork
UNRC
DB corp
A1 card
Gospel Radio
Python
ReactJS
AngularJS
VueJS
Full Stack
Flutter
UI/UX
DevOps Engineers
QA Engineers
iOS
Android
Marketplace Development
Jamstack Development
Progressive web app
Other Development
Architecture Design
MVPScaling
Kubernetes Deployment
Cloud Optimization
Infrastructure Migration
Video on Demand Development
Audio On Demand Development
Video Streaming Development
Audio Streaming Development
Over The Top Development
Beacon Based Solutions
RFID & Barcode based solutions
Proximity based solutions
industry 4.0 IoT Solutions
Process
Jitsi
Mediasoup
bigBlueButton
Paid SDK
Video Conferencing Solutions
Virtual Classroom Solutions
On Demand Service Solutions
Virtual Fitness App
Social Audio App
Telemedicine Solutions
Short video sharing app
About us
Life @ iTechNotion
Career
Contact us BACK
Integrating Excalidraw Whiteboard with Jitsi: A Step-by-Step Guide
Visual collaboration tools have become essential for enhancing online meetings and discussions. The combination of Excalidraw, a powerful collaborative whiteboarding tool, with Jitsi, a versatile video conferencing platform, can greatly enhance your virtual interactions. In this guide, we'll walk you through the process of setting up Excalidraw and integrating it with your self-hosted Jitsi instance, enabling you to seamlessly create, share, and collaborate on visual content in real-time.
Avkash Kakdiya- 23 Aug 2023
- 3 min read
Introduction
Visual collaboration tools have become essential for enhancing online meetings and discussions. The combination of Excalidraw, a powerful collaborative whiteboarding tool, with Jitsi, a versatile video conferencing platform, can greatly enhance your virtual interactions. In this guide, we'll walk you through the process of setting up Excalidraw and integrating it with your self-hosted Jitsi instance, enabling you to seamlessly create, share, and collaborate on visual content in real-time.
Step 1: Set Up Excalidraw Backend
Before you can integrate Excalidraw with Jitsi, you need to set up the Excalidraw backend on your server. Follow these steps:
1) Clone the Repository: Open your terminal and run the following command to clone the Excalidraw backend repository:
git clone https://github.com/jitsi/excalidraw-backend.git
2) Install Dependencies: Navigate to the cloned directory and install the necessary dependencies by running:
npm install
3) Build the Application: Once the dependencies are installed, build the Excalidraw backend by running:
npm run build
4) Start the Server: Start the Excalidraw backend server using the following command:
npm start
Step 2: Configure Excalidraw with Jitsi
Now that you have the Excalidraw backend up and running, it's time to configure Excalidraw with your Jitsi instance:
- Access Jitsi Configuration Files: Log in to your server where you have Jitsi installed and navigate to the configuration files. These are typically located in the /etc/jitsi/meet directory.
- Edit the Configuration: Open the configuration file for your domain (e.g., yourdomain.com-config.js) using a text editor.
- Add Excalidraw Configuration: Within the configuration file, locate the section where you can customize features. Add the following lines to enable and configure the Excalidraw integration:
- Make sure to replace 'https://excalidraw-backend.example.com' with the actual URL of your Excalidraw backend server.
- Save and Apply Changes: Save the configuration file and restart your Jitsi services for the changes to take effect.
whiteboard: {
enabled: true,
collabServerBaseUrl: 'https://excalidraw-backend.example.com'
},Step 3: Test the Integration
- Start a Jitsi Meeting: Create or join a Jitsi meeting on your self-hosted instance.
- Access Excalidraw: During the meeting, you'll see a new icon that represents the Excalidraw whiteboard. Click on this icon to open the Excalidraw canvas.
- Collaborate in Real-Time: Use the Excalidraw tools to draw, sketch, and collaborate with other participants in real-time.
- Discuss and Share Ideas: Utilize Jitsi's audio and video features to discuss and share ideas while collaborating on the Excalidraw canvas.
Step 4: Concluding the Session
- Save and Share: Once your collaborative session is complete, consider saving the Excalidraw canvas by bookmarking the URL or using any saving options provided by Excalidraw.
- End the Integration: Stop using the Excalidraw canvas by closing the Excalidraw tab. You can continue your Jitsi meeting without the whiteboard.
Conclusion
Integrating Excalidraw with your self-hosted Jitsi instance offers a seamless way to enhance visual collaboration during online meetings. By following these step-by-step instructions, you can set up Excalidraw backend, configure the integration with Jitsi, and experience the benefits of real-time visual collaboration. This combination of tools empowers you to engage, brainstorm, and create together with participants from anywhere, making your virtual meetings more interactive and productive.
Avkash Kakdiya
Ready to Kick-Off a New Project?
We are committed to providing our clients with the top solutions through global business ventures.
Trusted Clients
" They accepted a huge challenge and exceeded it. We're all better because they did. "
- Bill Crose Founder & CEO, Adyton
" The team’s in-depth knowledge extends to all things web and beyond. "
- Thomas Hayes Founder, Group Piex
" The Leave and Attendance Management project has been a great value for our money. "
- GoPaL Prajapati Chief Project Manager, DB Corp Ltd (Dainik Bhaskar)
" Very Pleased with app development! highly recommended services! "
- Joey Wargachuk App Development
" Highly recommend for web development, apps, e-commerce, database management, etc. very reliable A+++ "
- Tony eCommerce site
" Avkash and his team at iTechNotion have done a great job developing our app and we are pleased enough to continue working with them to develop of our remaining applications. "
- Selwyn IOS app development
" Very good work again. I recommended this great professional and excellent provider. The communication is very good. Is my partner from Portugal and a member that i want in my team of www.toranjadesign.com my company. "
- Amvidigal Android TV Launcher App
" Hired team for few tasks in last 2-3 years. Prompt reply, top notch service and affordable quotes. They even went extra mile to deliver tasks which were not their responsibility. "