10 | Made using 🧠 and ❤️ by !!CODERS 11 |
12 |
2 |
3 | # **Shikshak** - HackThisFall'20
4 |
5 | ### Academics made Affordable.
6 |
7 | ---
8 |
9 | ## A Preview of What Shikshak Is:
10 |
11 | ## Landing page:
12 |
13 | 
14 |
15 | ## Calibrating Board on Teacher's End
16 |
17 | 
18 |
19 | ## Board Preview on the Students Canvas
20 |
21 | 
22 |
23 | ## The problem Shikshak solves
24 |
25 | > During this pandemic, the online classes and the work from home charades easily consume over 3GB of a person's network data. This might seem normal for a person middle-class or above, but the weekly cost of such a high bandwidth is not viable for everyone, especially for the ones looking for affordable education. This is where "Shikshak" helps the needy. We provide a low-bandwidth solution to attending online classes through our portal. The magic happens in how we transmit the image of the board on which the teacher is writing. We heavily compress it to the format such that there is almost an 85% decrease in internet consumption using our product. From the machine learning perspective following are some challenges we faced: detect corners of the blackboard, make a suitable boundary of the best-suited blackboard as understood by machine learning, define final edges of the blackboard, dot map the pixels to understand the written content on the blackboard.
26 |
27 | ## Challenges we ran into
28 |
29 | > The major hurdle on the web development side was to configure webRTC in such a way so that students can only use an audio channel for real-time communication with the teacher. The second hurdle was to bring the frames of the teacher's video down to such a format so that net consumption can be decreased.
30 |
31 | ## Features offered by Shikshak
32 |
33 | - ### **Corner Detection**
34 | - Using `opencv`, `imutils` to recognise end pooints of the board.
35 | - ### **Edge Detection**
36 | - Combinations to figure out best possible board-frame and detecting its edges.
37 | - ### **Pixel Mapping**
38 | - Using `canny` to transform image to first a Gaussian Blur, and eventually its pixels.
39 | - ### **Real-time Audio Communication**
40 | - The Teacher is in constant contact with the Student(s) using `webRTC` audio channels.
41 | - ### **Efficient & Real-time transmission of data**
42 | - Scanning of the board, generation of pixel array, and real-time transmission of this array via `Socket.IO` and plotting the pixels on the Students canvas using `Canvas API`.
43 |
44 | ## Technology Stack and Dependencies
45 |
46 | - **ML**
47 | - numpy
48 | - imutils
49 | - opencv
50 | - pickle
51 | - canny
52 | - matplotlib
53 | - scipy.spatial
54 | - **APIs**
55 | - Node.js
56 | - Express in TypeScript
57 | - Socket.IO
58 | - Flask
59 | - **Front-end**
60 | - React.js in TypeScript-XML
61 | - Tailwind CSS
62 | - Socket.IO - Client
63 | - webRTC
64 | - Canvas API
65 |
66 | # Thank You!
67 |
68 |
|
72 | Abhishek Saxena
73 |
74 |
77 | |
83 |
84 | Ansh Sharma
85 |
86 |
89 | |
95 |
|
100 | Gita Alekhya Paul
101 |
102 |
105 | |
111 |
112 | Yashvardhan Jagnani
113 |
114 |
117 | |
123 |
The meeting has ended.
176 | 182 | > 183 | )} 184 | > 185 |172 | Capturing in:{" "} 173 | {countdown} 174 |
175 |Please move away
176 | > 177 | )} 178 |