Inspiration

The ongoing pandemic has made virtual education the new normal. Teachers and students have become very much used to the new mode of teaching and learning. But somewhere, this digitalization does not give them the feel of actually interacting with each other like the offline mode.

Edurizon is a one-stop fully functional hosted web application for smooth and extensive collaboration and engagement between teachers and students in this virtual era of learning and education. This prototype is built using agile methodologies, keeping in mind best coding practices and website performances. Using **Dolby.io Communication APIs**, we have extensive student-teacher collaboration for seamless video conferencing for classes and an interactive office hours meet. Other side features include course allocation, submitting assignments, and a discussion forum, making the application an all-round featured essential needed to make teaching and learning a fun process remotely!

What it does

1. Courses
a) Displays list of courses allotted to both students and teachers.
b) Displays list of students and faculty in the course
c) Displays virtual class meeting link
d) Displays course-wise announcements posted by the teacher.
e) Teachers have additional functionality to add and remove students to a particular course

2. Class Video Conference Meeting - BUILT WITH DOLBY API

A simple video conference meet call with very basic features:

  • Turn the camera off and on
  • Turn the microphone off and on
  • Screen share
  • Exit the meeting
  • View Participants List

3. Office Hours - USP Feature - BUILT WITH DOLBY API

In the virtual mode of education, it often becomes very difficult for the students to reach out to their teachers for doubts and difficulties, as per their convenient timings. This increases complexities and hampers their learning, even the self-esteem of students in some cases. Keeping this in mind, this feature has been built with the following functionality:

  • For Teacher’s View (How to enter) -
    a) The Teacher needs to post office hours for each of their allotted courses through a form.
    b) Once the office hours are posted, cabins appear displaying the office hours and joining meeting link. Green indicates that their office hours have started.
    c) This feature will enable the students and teacher to connect efficiently as per the schedule and decrease the inconvenience of not being able to reach out and ask for availability, hence saving a lot of time and effort.

  • For Students View (How to enter) -
    a) Course Faculty Cabins are displayed on the layout with course names and the free office hours of the teachers.
    b) The red light turns to green once the office hours become active.
    c) The student user(circular element with initials) can easily move to the desired cabin during the active hours with the help of arrow keys of the keyboard.
    d) Once the student is inside the cabin, a popup appears, enabling them to join the meeting, where the teacher will be available.
    e) The Student Breakout Room is a space where students can enjoy their break and chill with friends.
    f) Teachers do not have access to this breakout room.

  • Office Hour Faculty Cabin Room
    a) Geospatial location theme is enabled using Dolby.io API
    b) isSpeaking Feature is used to give ripple effect to the user speaking currently. c) UI of the faculty room is kept as realistic as possible, showing the faculty cabin with faculty seats and three-four student seats.

  • Student Breakout Room
    a) Built using Dolby.io API
    b) It is a space where students can enjoy their break and chill with friends. Teachers do not have access to this breakout room.

4. Assignments: Shows a list of pending and submitted assignments for the students with relevant details like Assignment Title, Question Link, Due Date, attaching and submitting file option and allows teachers to post assignments through forms for each course of theirs. A grading feature is also available.

5. Student Forum:

  • Students can search for relevant questions they are looking for(fuzzy search enabled) and their answers on this page.
  • They can post a question and can answer any question on an ongoing thread.
  • In order to maintain the decorum amongst students, we have enabled a sentiment-analysis feature while posting any question or answer. This will prevent any student from posting/writing inappropriate words or using foul language by showing a popup and restricting them to post.

How we built it

  • We used Figma to design the web pages since we were so keen on making a beautiful UI.
  • Frontend of the application is made using HTML, CSS, Bootstrap, JS and Parcel.js for packaging code to yield better performance.
  • Backend of the application is made using Node JS, Express JS and MongoDB as the database.
  • We have integrated Dolby API's in our project to build a video conferencing application for students and teachers. With the help of Dolby IO documentation, we were able to:

    • create a basic audio conferencing application.
    • integrate video features to the conference.
    • display the list of participants in the conference.
    • implement the screen sharing feature.
    • leave the conference. Implement the isSpeaking feature to track who is speaking at the moment.
  • The website is deployed on Heroku and hosted on Netlify.

  • We have used Cloudinary for media storage.

  • We also used Mocha with Chai for unit tests that run and must pass before the code is deployed on Heroku.

Challenges we ran into

There were various challenges encountered throughout the course of the project. Some of the major ones are as follows:

Incorporating the video conference feature: The concept of integrating the Dolby API and opening and closing of sessions using web sockets was new for us, which got us stuck on some of its components like picking the conference members list and the video and audio controls.

CORS error: The Cross-Origin-Resource-Sharing error came time and again while working with APIs and running the project locally. This happens due to websites trying to check if the origins of the server and the web application match. This error was resolved by building our own proxy at the backend by using express middleware to apply an Access-Control-Allow-Origin: * header to every response from the server.

Sketching out the logic for the Office-Hour page at Student’s View: Picking up the moving character’s position coordinates with every arrow key movement and writing conditions as per the boundaries of the classes it passed through, required a lot of javascript manipulations, but eventually, we successfully managed to crack it.

Accomplishments that we're proud of

This was the first time we worked on a project involving video conferencing integrations and integrating its APIs to deliver some amazing features for perfect and seamless connection with peers. We came across many challenges but we are proud to deliver the project and submit it on time being a team having very little experience in developing high scale conferencing applications.

We successfully integrated the following features to our application using the Dolby.io Communications APIs:-

  • Creating a virtual conference
  • Integrating Audio controls
  • Integrating Video controls
  • Participants List Viewing Option
  • Screen share Option
  • isSpeaking Feature: Highlights the participant who is speaking currently.
  • GeoSpatial Location Theme: We have built the features keeping in mind the geospatial location theme to give appropriate realistic sound effects

What we learned

  1. Implementing different functionalities and exploring various video conferencing tools using Dolby API to fulfill our purpose is what we majorly learned throughout the hackathon.
  2. We learned how to write clean code and make a seamless user experience for all the call members as far as video conferencing is concerned.
  3. The documentation gave a lot of knowledge about the core functionalities and logic of how the conferencing apps are built behind the scenes, taking into consideration sessions generated by every use who joins the call.

What's next for Edurizon - Igniting a Better Future

1. Chat Integration with GetStream.io:

  • Integration of Stream's chat messaging service into a video conference application built with Dolby.io, to make it easier for students and teachers to communicate. For eg, if a teacher is asking questions in the classroom, students may type in their answers in the chatbox.

2. Classroom with teacher controls: - Classroom that has a separate teacher and student views where only the teacher can share the screen and give access to the student if he/she wishes to share the screen.

  • An option given to teachers - Students cannot speak until they raise their hand and are called upon.
  • Teacher can also assign seats to the students. Just like a seating chart in a physical room, the consistency of location can help somebody quickly identify when somebody is missing or find a particular individual.
  • An option where the teacher can manually mute a student as and when required.
  • Virtual whiteboard functionality for a better explanation.
  • An option to record meetings.
Share this project:

Updates