Channelize Whiteboard

Modern JavaScript based Whiteboard for Collaboration in Online Education.

Channelize Whiteboard is a leading open source whiteboard solution that powers innovation in Tele-education by adding engagement in online learning. It is rich in features, compatible with diverse frameworks, and easy to integrate and extend.

This Whiteboard Solution has been co-developed by Channelize.io & Agora.io

About the project

Channelize Whiteboard is a project to provide developers building solutions for the online education and collaboration space, an interactive open-source whiteboard with real-time annotations.

Applicable scenarios

Channelize Whiteboard supports the following scenarios:

One-to-one Classroom: An online teacher gives an exclusive lesson using whiteboard annotation to only one student in real-time.
Small Classroom: A teacher gives an online lesson to multiple students, and both the teacher and students can interact with each other in real time. The number of students in a small classroom should not exceed 16.
Lecture Hall: Thousands of students can watch an online lecture together. Students can "raise their hands" to interact with the teacher, and their responses are viewed by all the other students at the same time.

In Small Classroom and Large Hall:

Teacher can do the announcements in text and image form.
Teacher can raise a poll (Question) with four options and students can choose one of the four options.

Demo

To check demo, Click here.

Functions (Only works in Web)

Interactive Whiteboard: Using PDF.js for Whiteboard annotations and Agora RTM SDK to reflect white board annotations changes to students. Whiteboard currently provides the following tools:
1. Pencil
2. Shapes: Circle, Square, Rectangle, Oval, Line
3. Text Annotations
4. Eraser
5. Clear all
6. Settings for Annotations: Thickness, Color
7. Highlighter (Teacher can highlight text in uploaded .pdf file)
Full Screen mode: Both teacher and students can use full screen mode independently.
Uploading file: Teachers can upload PPT, WORD, PDF, JPG, PNG files which will be broadcasted to the attendees / Students. Teachers can then annotate these files.
Class recording
1. This feature allow teacher to record whiteboard.
2. Screen recording permission will be requred with selected browser screen for recording.
Downloading annotated files
1. Teacher can download annotated canvas as a single PDF file.
Students can annotate
1. Teacher can grand students to use annotation tool.
2. Only one student will be granted annotation tool at a time.
3. For One-to-one classroom
  - Teacher can allow students to annotate with button provided in control bar.
4. For Small Classroom and Large Hall
  - Student need to use raise hand for granting permission to use annotation tool.
Bonus features:
1. Announcements: Teacher can do announcements in text and image forms.
2. Polls: Teachers can raise a poll (question) with four options and students can choose one of the four options as an answer.

Some Upcoming Features

Support for other pub/sub services.
Support for annotations in Mobile & Tablet browsers.
Some UI and user experience improvements.

Compatibility

Channelize Whiteboard will work on all Desktop & Laptop browsers. On Mobile & Tablet browsers, currently the UI of annotations is not coming fine.

Get started

Prerequisites

Make sure you make the following preparations before compiling and running the sample project.

Get an Agora App ID

Follow these steps to get an Agora App ID:

Create an account in Agora Console.
Log in to Agora Console and create a project. Select "App ID only" as your authentication mechanism when creating the project. Make sure that you disable the App Certificate of this project or can use security according to your needs.
Get the App ID of this project in Project Management page.

Set up File Converter API

For File uploading, we need to set up back-end API server which converts the WORD, PDF, JPG, PNG to PDF format using Unoconv and LibreOffice and upload it to AWS S3. for File-Convert Setup Click here .

Preparations

Set up your AWS S3 bucket . For details, see S3 setup.
Rename .env.example to .env.local and configure the following parameters:
If you want to change title from Channelize Whiteboard to [Your_title]. Please make changes in src/i18n/en.ts and public/index.html .
If you want to change favicon icon. Please replace favicon.png in public folder
(Required) Agora App ID

# Agora App ID
REACT_APP_AGORA_APP_ID=agora appId
REACT_APP_AGORA_LOG=true

File converter API URL

REACT_APP_LIBRE_BACKEND_URL=file_converter_api_url

AWS S3 configurations for Whiteboard. Please make changes in the toolelements.js file at: src/components/whiteboard/toolelements.js

# your AWS S3 bucket name
REACT_APP_AWS_BUCKET_NAME=your_aws_bucket_name
# your AWS S3 bucket region
REACT_APP_AWS_BUCKET_REGION=your_bucket_region

-- Can use one of them

# your AWS S3 access key
REACT_APP_AWS_BUCKET_KEY=your_bucket_key

# your AWS S3 access secret key
REACT_APP_AWS_BUCKET_SECRET=your_bucket_sk

   OR

# your AWS S3 endpoint
REACT_APP_AWS_IdentityPoolId=IdentityPoolId

Tech Stack

[npm][node], [JavaScript][js] — core platform and dev tools
Install Node.js LTS

Core SDKs

agora-rtm-sdk (agora rtm web sdk)
aws-sdk (amazon web services - S3)

Frontend tech utilities

Typescript
React
Javascript

For Whiteboard Annotation

pdfJs

Run the project

1. Install npm
   npm install

2. Locally run the Web demo
   npm run dev

3. To build the project
   npm run build

ChannelizeIO / Channelize-Whiteboard-SDK