{"id":31144258,"url":"https://github.com/channelizeio/channelize-whiteboard-sdk","last_synced_at":"2025-09-18T14:38:14.663Z","repository":{"id":55634977,"uuid":"283570836","full_name":"ChannelizeIO/Channelize-Whiteboard-SDK","owner":"ChannelizeIO","description":"Open-source whiteboard for real-time online tutoring \u0026 team collaboration","archived":false,"fork":false,"pushed_at":"2024-05-07T11:01:10.000Z","size":1929,"stargazers_count":14,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-30T05:03:27.711Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://channelize.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChannelizeIO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-29T18:15:13.000Z","updated_at":"2023-06-27T14:11:04.000Z","dependencies_parsed_at":"2022-08-15T05:01:00.895Z","dependency_job_id":null,"html_url":"https://github.com/ChannelizeIO/Channelize-Whiteboard-SDK","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ChannelizeIO/Channelize-Whiteboard-SDK","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChannelizeIO%2FChannelize-Whiteboard-SDK","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChannelizeIO%2FChannelize-Whiteboard-SDK/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChannelizeIO%2FChannelize-Whiteboard-SDK/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChannelizeIO%2FChannelize-Whiteboard-SDK/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChannelizeIO","download_url":"https://codeload.github.com/ChannelizeIO/Channelize-Whiteboard-SDK/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChannelizeIO%2FChannelize-Whiteboard-SDK/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275781969,"owners_count":25527498,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-18T02:00:09.552Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-18T14:38:12.671Z","updated_at":"2025-09-18T14:38:14.653Z","avatar_url":"https://github.com/ChannelizeIO.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cdiv align=\"center\"\u003e\n\u003cimg src='src/assets/Channelize-logo.png' height=\"280\"/\u003e\n\u003ch1\u003eChannelize Whiteboard\u003c/h1\u003e\n\u003c/div\u003e\n\u003ch3\u003eModern JavaScript based Whiteboard for Collaboration in Online Education.\u003c/h3\u003e\n\u003cp\u003eChannelize 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.\u003c/p\u003e\n\n### This Whiteboard Solution has been co-developed by Channelize.io \u0026 Agora.io\n\n\u003ctable align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"\u003e\n\u003ctd align=\"center\" \u003e\n \u003ca href='https://channelize.io/' target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg src='src/assets/Logo-Channelize.png' width=\"300\"/\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\" \u003e\n \u003ca href='https://www.agora.io/' target=\"_blank\" rel=\"noopener noreferrer\" \u003e\n    \u003cimg src='src/assets/agoralightblue-1.png' width=\"300\"/\u003e\n\u003c/td\u003e\n\u003c/table\u003e\n\n\n# About the project\n\nChannelize 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.\n\n\n### Applicable scenarios\n\n\nChannelize Whiteboard supports the following scenarios:\n\n\n- One-to-one Classroom: An online teacher gives an exclusive lesson using whiteboard annotation to only one student in real-time.\n- 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.\n- 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.\n\n\nIn Small Classroom and Large Hall:\n- Teacher can do the announcements in text and image form. \n- Teacher can raise a poll (Question) with four options and students can choose one of the four options.\n\n### Demo\n   - To check demo, [Click here](https://whiteboard-demo.channelize.io/).\n\n### Functions (Only works in Web)\n\n- 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:\n    1. Pencil\n    2. Shapes: Circle, Square, Rectangle, Oval, Line\n    3. Text Annotations\n    4. Eraser\n    5. Clear all\n    6. Settings for Annotations: Thickness, Color\n    7. Highlighter (Teacher can highlight text in uploaded .pdf file)\n\n- Full Screen mode: Both teacher and students can use full screen mode independently.\n- 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.\n\n- Class recording \n    1. This feature allow teacher to record whiteboard.\n    2. Screen recording permission will be requred with selected browser screen for recording.\n\n- Downloading annotated files\n    1. Teacher can download annotated canvas as a single PDF file.\n\n- Students can annotate \n    1. Teacher can grand students to use annotation tool.\n    2. Only one student will be granted annotation tool at a time.\n\n    3. For One-to-one classroom\n         - Teacher can allow students to annotate with button provided in control bar.\n   \n    4. For Small Classroom and Large Hall\n         - Student need to use raise hand for granting permission to use annotation tool.\n         \n- Bonus features:\n    1. Announcements: Teacher can do announcements in text and image forms.\n    2. Polls: Teachers can raise a poll (question) with four options and students can choose one of the four options as an answer.\n          \n### Some Upcoming Features\n\n   1. Support for other pub/sub services.\n   2. Support for annotations in Mobile \u0026 Tablet browsers.\n   3. Some UI and user experience improvements.\n\n### Compatibility\n\nChannelize Whiteboard will work on all Desktop \u0026 Laptop browsers. On Mobile \u0026 Tablet browsers, currently the UI of annotations is not coming fine.\n\n# Get started\n\n\n   ## Prerequisites\n\n   Make sure you make the following preparations before compiling and running the sample project.\n\n   #### Get an Agora App ID\n   Follow these steps to get an Agora App ID:\n   1. Create an account in [Agora Console](https://sso.agora.io/v2/signup).\n   2. 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](https://docs.agora.io/en/Agora%20Platform/token?platform=All%20Platforms#appcertificate) of  this project or can use security according to your needs.\n   3. Get the App ID of this project in **Project Management** page.\n\n\n   #### Set up File Converter API \n   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.\n   for File-Convert Setup  [Click here](https://github.com/ChannelizeIO/Channelize-Whiteboard-SDK/tree/Node-File-Convertor-API) .\n\n   ## Preparations\n   - **Set up your AWS S3 bucket . For details, see [S3 setup](https://docs.aws.amazon.com/quickstarts/latest/s3backup/step-1-create-bucket.html).**\n\n\n   - **Rename `.env.example` to `.env.local` and configure the following parameters:**\n\n   - **If you want to change title from Channelize Whiteboard to [Your_title]. Please make changes in src/i18n/en.ts and public/index.html .**\n\n   - **If you want to change favicon icon. Please replace favicon.png in public folder**\n\n   - **(Required) Agora App ID** \n   ```bash\n   # Agora App ID\n   REACT_APP_AGORA_APP_ID=agora appId\n   REACT_APP_AGORA_LOG=true\n   ```\n   - **File converter API URL**\n   ```bash\n   REACT_APP_LIBRE_BACKEND_URL=file_converter_api_url\n   ```\n\n   - **AWS S3 configurations for Whiteboard.**\u0026nbsp;\n     Please make changes in the toolelements.js file at:\u0026nbsp; src/components/whiteboard/toolelements.js\n\n   ```bash\n   # your AWS S3 bucket name\n   REACT_APP_AWS_BUCKET_NAME=your_aws_bucket_name\n   # your AWS S3 bucket region\n   REACT_APP_AWS_BUCKET_REGION=your_bucket_region\n\n   -- Can use one of them\n\n   # your AWS S3 access key\n   REACT_APP_AWS_BUCKET_KEY=your_bucket_key\n\n   # your AWS S3 access secret key\n   REACT_APP_AWS_BUCKET_SECRET=your_bucket_sk\n\n      OR\n\n   # your AWS S3 endpoint\n   REACT_APP_AWS_IdentityPoolId=IdentityPoolId\n   ```\n\n   ## Tech Stack\n   * [npm][node],\u0026nbsp; [JavaScript][js] — core platform and dev tools\n   * Install Node.js LTS\n\n   ### Core SDKs\n   - agora-rtm-sdk (agora rtm web sdk)\n   - aws-sdk (amazon web services - S3)\n\n   ### Frontend tech utilities\n   - Typescript\n   - React\n   - Javascript\n\n   ### For Whiteboard Annotation\n   - pdfJs\n\n\n   ## Run the project\n   ```bash\n   1. Install npm\n      npm install\n\n   2. Locally run the Web demo\n      npm run dev\n\n   3. To build the project\n      npm run build\n   ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchannelizeio%2Fchannelize-whiteboard-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchannelizeio%2Fchannelize-whiteboard-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchannelizeio%2Fchannelize-whiteboard-sdk/lists"}