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.
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.
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.
- To check demo, Click here.
-
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:
- Pencil
- Shapes: Circle, Square, Rectangle, Oval, Line
- Text Annotations
- Eraser
- Clear all
- Settings for Annotations: Thickness, Color
- 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
- This feature allow teacher to record whiteboard.
- Screen recording permission will be requred with selected browser screen for recording.
-
Downloading annotated files
- Teacher can download annotated canvas as a single PDF file.
-
Students can annotate
-
Teacher can grand students to use annotation tool.
-
Only one student will be granted annotation tool at a time.
-
For One-to-one classroom
- Teacher can allow students to annotate with button provided in control bar.
-
For Small Classroom and Large Hall
- Student need to use raise hand for granting permission to use annotation tool.
-
-
Bonus features:
- Announcements: Teacher can do announcements in text and image forms.
- Polls: Teachers can raise a poll (question) with four options and students can choose one of the four options as an answer.
- Support for other pub/sub services.
- Support for annotations in Mobile & Tablet browsers.
- Some UI and user experience improvements.
Channelize Whiteboard will work on all Desktop & Laptop browsers. On Mobile & Tablet browsers, currently the UI of annotations is not coming fine.
Make sure you make the following preparations before compiling and running the sample project.
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.
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 .
-
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
- [npm][node], [JavaScript][js] — core platform and dev tools
- Install Node.js LTS
- agora-rtm-sdk (agora rtm web sdk)
- aws-sdk (amazon web services - S3)
- Typescript
- React
- Javascript
- pdfJs
1. Install npm
npm install
2. Locally run the Web demo
npm run dev
3. To build the project
npm run build