Skip to content
πŸ‘€Blink and lose.
Branch: master
Clone or download
Latest commit 518a6ee Jun 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode format code Jun 7, 2019
assets update gif Jun 13, 2019
backend add readme Jun 7, 2019
src add image flexible Jun 11, 2019
templates capture last frame Jun 7, 2019
.babelrc merge react & flask, make basic video call Jun 1, 2019
.eslintrc format code Jun 7, 2019
.gitignore merge with andy Jun 1, 2019
.prettierrc format code Jun 7, 2019
LICENSE Create LICENSE Jun 13, 2019
License update readme Jun 13, 2019
README.md merge Jun 14, 2019
package.json add readme Jun 7, 2019
requirements.txt basic function done Jun 6, 2019
server.py add image flexible Jun 11, 2019
webpack.config.js add ui Jun 5, 2019

README.md

Never-Blink

1. πŸŽ‰ Introduction

πŸ™Œ Upvote for my product hunt!

Randomly connect to a player around the world and challenge him/her. Remember not to blink!

For full version of demo video, click here.

2. πŸ“œ Implementation

1. Project structure

.
β”œβ”€β”€ backend
β”‚   β”œβ”€β”€ __init__.py
β”‚   β”œβ”€β”€ detect.py
β”‚   └── shape_predictor_68_face_landmarks.dat (detect model)
β”œβ”€β”€ package.json
β”œβ”€β”€ requirements.txt
β”œβ”€β”€ server.py
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ app.jsx
β”‚   β”œβ”€β”€ index.js
β”‚   β”œβ”€β”€ play.jsx
β”‚   └── start.jsx
β”œβ”€β”€ static
β”‚   └── bundle.js
β”œβ”€β”€ templates
β”‚   └── index.html
└── webpack.config.js

We use react as our frontend framework, and use peerjs to communicate between clients. At backend, we use flask to host the server. For connection between clients and server, we use socketio to implement real-time data transfer.

2. Game State

We use the notion of Finite State Machine to design our game state. The circle is the state. The text in the top of each box is the event causing state transition, and the text in the bottom of each box is the action taken when event occurs. The logic looks quite simple here, but it is not that easy to implement. For more detail you can check play.jsx or server.py.

3. πŸ’» Development

I spent lots of time formatting my code and writing comments to make it as readable as possible. Hope you enjoy 😊

  1. Clone this repo.
git clone git@github.com:andyh0913/blink_contest.git
  1. Install the packages
# Frontend
npm install
# Backend
pip install -r requirements.txt
  1. Build and Run
# Build frontend files
npm run build
# Run server
npm run start

Every time you changed your code, you should run the above command again. We do not support hot module replacement now.

  1. Start and Enjoy

Goto https://0.0.0.0:3000

0.0.0.0:3000 does not work, remember to add https.

4. 🚧 Problem

  1. Becausee the detector is too slow and weak, we can not endure too many clients. Therefore, we do not deploy it to a public server now. We plan to train a robust and fast model in the future.
  2. When restarting, the old media connection listener will be called again. So we remove restart temporarily.

5. πŸ“– Reference

  1. Environment setup: https://github.com/rwieruch/minimal-react-webpack-babel-setup
  2. Simple P2P WebRTC package: https://github.com/peers/peerjs
  3. Socket-io: https://socket.io/docs/client-api/
  4. Flask-socketio: https://flask-socketio.readthedocs.io/en/latest/
  5. Blink detector: https://github.com/dilawar/eye-blink-detector
  6. Material UI: https://material-ui.com/

6. πŸ—žοΈ License

MIT Licensed

You can’t perform that action at this time.