https://github.com/hyesungoh/wavyclientprototype
Wavy Client Prototype
https://github.com/hyesungoh/wavyclientprototype
posenet react tensorflowjs typescript
Last synced: 3 months ago
JSON representation
Wavy Client Prototype
- Host: GitHub
- URL: https://github.com/hyesungoh/wavyclientprototype
- Owner: hyesungoh
- Created: 2021-07-05T13:15:16.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-08-28T14:34:02.000Z (about 4 years ago)
- Last Synced: 2025-07-19T06:55:10.376Z (3 months ago)
- Topics: posenet, react, tensorflowjs, typescript
- Language: TypeScript
- Homepage: https://agitated-volhard-845a19.netlify.app/
- Size: 26.7 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Wavy Client Prototype
testing real-time pose detection and similarity evaluation
## Introduction
댄스 코칭 서비스 개발을 위해 **실시간 분석**, **분석 결과 보기**, **원하는 영상 배우기** 기능을 Prototyping 하였습니다.
## Features
#### 실시간 분석
- `Tensorflow.js`와 `posenet`을 이용하여 사용자 웹캠의 모션 정보를 실시간으로 추출한 후, 웹캠 위에 스켈레톤을 그려줍니다.
- 실시간으로 추출한 데이터를 이용하여 미리 추출된 `학습용 영상`의 데이터와 유사도 비교 알고리즘을 수행한 후, 그에 대한 정보를 `텍스트`와 `게이지바`를 이용하여 보여줍니다.
- posenet의 Architecture, Output Stride, 감지되는 시간, input 해상도와 스켈레톤 설정 값, 동영상 재생 시간을 조절할 수 있도록 개발하여 프로토타이핑에 최적화하였습니다.
#### 분석 결과 보기
- `Youtube 임베드` 영상과 `사용자가 전에 췄던 영상`을 하나의 컨트롤러로 시간대 이동, 시작/중지 할 수 있습니다.
- 따라하기 버튼을 클릭 시 사용자가 전에 췄던 영상의 크기와 투명도를 조절한 후, 사용자 웹캠을 보여줍니다.
- 컨트롤러를 이동할 때만 보여지는 유투브 영상을 이용해 컨트롤러에서 이동한 시간대의 화면을 미리 볼 수 있도록 하였습니다.
#### 원하는 영상 배우기
- Youtube 영상의 url을 입력한 후, 해당 영상과 사용자 웹캠을 같이 보여줍니다.
## Packages
- react@17.0.2
- react-router-dom@5.2.0
- recoil@0.3.1
- styled-components@5.3.0
- react-webcam@5.2.4
- react-player@2.9.0
- @material-ui/core@4.12.2
- @tensorflow/tfjs@3.7.0
- @tensorflow-models/posenet@2.2.2
- @types/dom-mediacapture-record@1.0.10
## Getting Started
```bash
# clone this repo
cd prototypefrontend
npm install # or yarn
npm start
```
## Developer
This project was supported by Software Maestro
| AI: [haeseoklee](https://github.com/haeseoklee) | FE: [hyesungoh](https://github.com/hyesungoh) | BE: [Yeonwu](https://github.com/Yeonwu) |
| :-------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: |
| 
| 
| 
|