PDF/PPT Upload & Annotation Feature for Jitsi Whiteboard (Excalidraw Integration)

[Prashant19Chauhan]

📄 Project Proposal: PDF/PPT Upload & Annotation Feature for Jitsi Whiteboard (Excalidraw Integration)

🔍 Project Overview

This open-source initiative enhances the collaborative whiteboard experience in Jitsi meetings by enabling PDF and PPT file upload directly into the Excalidraw-powered whiteboard. Users can present slides, annotate them in real time, and maintain session continuity even for late joiners. The feature uses Jitsi's WebRTC-based data channels for minimal latency and efficient synchronization.

---

🎯 Objectives

• Support PDF and PPT/PPTX uploads.

• Convert slides into image format for whiteboard display.

• Enable drawing and annotations over slides.

• Include navigation controls (Next/Previous).

• Ensure full synchronization of slides and annotations for all participants, including late joiners.

• Provide an option to export the final annotated session as a downloadable PDF.

---

🧱 Technical Stack

Functionality | Tool/Library -- | -- Frontend Whiteboard | Excalidraw (Custom Integration) Real-time Sync | WebRTC (Jitsi Data Channels) PPT to PDF Conversion | LibreOffice CLI / Aspose.Slides / CloudConvert API PDF to Images | pdfjs-dist (client-side PDF parsing) File Storage | AWS S3 (public-read access) Export to PDF | jsPDF, html2canvas, canvas.toDataURL()

---

🛠️ Implementation Steps

1. File Upload Interface

• Add upload button in whiteboard toolbar.

• Accept .pdf, .ppt, and .pptx formats.

• Validate file type and size (max 50MB).

2. Convert PPT to PDF (if needed)

• Use backend services:

  • LibreOffice CLI (headless mode).

  • Aspose.Slides Cloud API.

  • CloudConvert API.

3. Convert PDF to Images

• Parse PDF using pdfjs-dist.

• Render each page to canvas.

• Convert canvases to image blobs (toBlob()/toDataURL()).

4. Upload Slide Images to AWS S3

• Organize uploads into folders.

• Use public-read URLs for quick access.

• Maintain slide order with filenames (e.g., slide_001.png).

5. Insert into Excalidraw

• Add images as background layers in Excalidraw.

• Ensure annotations are drawn over the image layers.

6. Navigation Controls

• Add UI buttons for Next/Previous.

• Maintain and sync slideIndex in appState.

• Show only the current slide image per index.

7. Real-Time Sync

• Use Jitsi’s data channels to sync:

  • Uploaded images.

  • Drawing elements.

  • Current slide index.

• Use Excalidraw’s getSceneElements() and updateScene() APIs.

8. Late Joiner Sync

• On join, send:

  • Current full scene (slides + annotations).

  • Current appState.

9. Export Annotated Slides

• Use html2canvas to export canvas.

• Use graph TD

  🧩 System Architecture
A[User Upload (.pdf/.pptx)] --> B[Backend (PPT → PDF)]
B --> C[pdfjs-dist (PDF → Images)]
C --> D[AWS S3 (Image Upload)]
D --> E[Excalidraw (Image Background + Draw Tools)]
E --> F[WebRTC Sync (Slides + Drawings)]
F --> G[Late Joiners Receive Full Scene]

  ✅ Feasibility Review

  Step	Task	Feasible?	Notes
  1	Upload UI	✅	Toolbar integration is easy.
  2	PPT to PDF	✅	Requires backend or external API.
  3	PDF to Images	✅	Use pdfjs-dist.
  4	Upload to S3	✅	Enables quick image access.
  5	Slide Integration	✅	Image layering in Excalidraw.
  6	Annotation Support	✅	Fully supported.
  7	PDF Export	✅	Use jsPDF + canvas exports.
  8	Real-time Sync	✅	Use Jitsi's WebRTC data channels.
  9	Broadcast Slides	✅	Via scene updates.
  10	Late Join Sync	✅	Supported by Excalidraw.

  🔧 Tools Overview

  Feature	Tools
  PPT → PDF	LibreOffice CLI / Aspose / CloudConvert
  PDF → Image	pdfjs-dist
  Storage	AWS S3
  Whiteboard	Excalidraw
  Sync	Jitsi WebRTC
  Annotation	Excalidraw drawing tools
  Slide Navigation	Custom button logic
  Export PDF	jsPDF + html2canvas

  📌 Conclusion

  This proposal brings structured presentation support to Excalidraw whiteboarding in Jitsi, combining slide sharing with real-time collaboration. It leverages existing open-source tools, scalable infrastructure, and low-latency technologies to build an intuitive, reliable feature set for enhanced team interaction.

[Prashant19Chauhan]

Hey @saghul,
I've put together an approach for implementing PDF/PPT integration into the Excalidraw whiteboard. Could you please take a look and let me know if I'm heading in the right direction or if there are any areas where you'd recommend deeper research? Appreciate your guidance!