Classy

1. 프로젝트 소개 🚀
2. 프로젝트 기능 및 설계 📍
3. 프로젝트 구조 🌲
4. 역할 👋🏻
5. 프로젝트 스크린샷 ✍🏻
6. 프로젝트 설치 및 실행 ✨
7. 소프트웨어공모전 결과 ✨

🌍 배포 링크

1. 프로젝트 소개 🚀

• 개요 : 교내 소프트웨어 공모전
• 주제 : Web RTC & A.I를 이용한 실시간 수업 플랫폼
• 기간 : 2020.09 ~ 2020.11

2. 프로젝트 기능 및 설계📍

• 기능

  • Node JS + Mongo DB를 활용한 Kakao Talk 로그인 기능 및 사용자 정보 및 사진 저장
  • Web RTC를 활용한 교사에게 모든 학생 화면 및 캠 전송
  • Web RTC를 활용한 학생에게 교사의 화면 전송
  • Web RTC를 활용한 선생 화면 녹화 후 AWS S3에 저장
  • A.I 를 활용한 비정상적 행위 감지 후 Web RTC로 교사에게 메세지 전달 및 학생에게는 sound로 경고
  • WebRTC는 OpenVidu 플랫폼 활용, 지금은 AWS 서버 비용 문제로 서버 운영 X => 오픈소스 Web RTC 형태로 유지 중
    

• 교사 설계

• 학생 설계

3. 프로젝트 구조 🌲

├── index.js
└── public
    ├── audio
    │   ├── concentration.mp3
    │   ├── image.mp3
    │   ├── wrongFace.mp3
    │   └── zeroFace.mp3
    ├── css
    │   ├── capture.css
    │   ├── classroom.css
    │   └── index.css
    ├── html
    │   ├── capture.html
    │   ├── classroom.html
    │   └── index.html
    ├── js
    │   ├── RTC_Multiconnection.js
    │   ├── RTC_Socket.js
    │   ├── capture.js
    │   ├── classroom.js
    │   ├── face-api.min.js
    │   ├── index.js
    │   └── toKorChars.js
    ├── models
    │   ├── Image.js
    │   ├── face_landmark_68_model-shard1
    │   ├── face_landmark_68_model-weights_manifest.json
    │   ├── face_landmark_68_tiny_model-shard1
    │   ├── face_landmark_68_tiny_model-weights_manifest.json
    │   ├── face_recognition_model-shard1
    │   ├── face_recognition_model-shard2
    │   ├── face_recognition_model-weights_manifest.json
    │   ├── metadata.json
    │   ├── model.json
    │   ├── mtcnn_model-shard1
    │   ├── mtcnn_model-weights_manifest.json
    │   ├── ssd_mobilenetv1_model-shard1
    │   ├── ssd_mobilenetv1_model-shard2
    │   ├── ssd_mobilenetv1_model-weights_manifest.json
    │   ├── tiny_face_detector_model-shard1
    │   ├── tiny_face_detector_model-weights_manifest.json
    │   └── weights.bin
    └── uploads
        ├── unknown1.png
        ├── unknown10.png
        ├── unknown2.png
        ├── unknown3.png
        ├── unknown4.png
        ├── unknown5.png
        ├── unknown7.png
        ├── unknown8.png
        ├── unknown9.png
        ├── 김성원.png
        ├── 이유찬.png
        ├── 정인권.png
        └── 최인제.png

4. 역할 👋🏻

이름	담당역할
정인권	Frontend 페이지 구현(HTML, CSS, JS), Kakao 로그인 연동, WebRTC 구현, A.I 모델 적용
이유찬	A.I 모델 구현 및 적용, WebRTC 구현
김성원	A.I 모델 구현 및 적용, Sound 적용
최인제	A.I 모델 구현 및 적용, uploads 관리 및 구현

5. 프로젝트 스크린샷 ✍🏻

[1] Classy Main Page ✨

[2] Classy Login Module ✨

[3] Classy Picture Module✨

[4] Classy Class Module Student ✨

[5] Classy Class Module Teacher ✨

6. 프로젝트 설치 및 실행 ✨

1. Git Clone

git clone https://github.com/developjik/classy.git

2. 프로젝트 패키지 설치

yarn install

3. 프로젝트 실행

yarn start

7. 소프트웨어공모전 결과