byronhsu / never-blink Goto Github PK

View Code? Open in Web Editor NEW

890.0 10.0 69.0 94.58 MB

👀Blink and lose.

License: MIT License

Python 38.88% JavaScript 60.38% HTML 0.74%

video-streaming peerjs socketio blink game flask react

never-blink's Introduction

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 😊

Clone this repo.

git clone [email protected]:ByronHsu/Never-Blink.git

Install the packages

# Frontend
npm install
# Backend
pip install -r requirements.txt

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.

Start and Enjoy

Goto https://0.0.0.0:3000

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

4. 🚧 Problem

Because 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.
When restarting, the old media connection listener will be called again. So we remove restart temporarily.

5. 📖 Reference

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

6. 🗞️ License

MIT Licensed

never-blink's People

Contributors

Stargazers

Watchers

Forkers

herolf vdt ideaplexus mehedi-shafi michaelinio edjw alfonmga hamdshah giacomorebonato glomels yaki4 hhy5277 shaunstanislauslau nadeemkhan 0xflotus rodoviario nimeshvaghasiya radum hauwenc anurag870 mag357num puncoz-bookmarks python6460 eyakub phetw pooscan ubunfork adampassword compliment kunsanw jackwiy pubweb tmrxiaoxiao luyx2412 learnmove toanphung zen-zj ak30-fpj itxiaobao oceatoon superiqbal7 couplestudio yijencheng joe-nano vikaspandey121 govindtank y742035557 gpsbird sanyuesiyuewuyue fairplany josephsun-6 shaunholt forbidden-city d48 joanjoantan yangyis agingarichard conradkirschner swipswaps tbergman daizhiyu 521hellogithub tim810306 fanyushuai dileepindla bonniss cocogames vestfish1 lmliheng

never-blink's Issues

npm run start fails

$ npm run start

> @ start /Users/dennis/Documents/Developer/Repositories/Never-Blink
> python3 server.py

WebSocket transport not available. Install eventlet or gevent and gevent-websocket for improved performance.
 * Serving Flask app "server" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
Traceback (most recent call last):
  File "server.py", line 226, in <module>
    keyfile=os.path.join('backend', 'server.key'), certfile=os.path.join('backend', 'server.crt'))
  File "/usr/local/lib/python3.7/site-packages/flask_socketio/__init__.py", line 524, in run
    use_reloader=use_reloader, **kwargs)
  File "/usr/local/lib/python3.7/site-packages/flask/app.py", line 943, in run
    run_simple(host, port, self, **options)
TypeError: run_simple() got an unexpected keyword argument 'keyfile'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: `python3 server.py`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dschuessler/.npm/_logs/2019-06-13T20_55_26_642Z-debug.log

Python 3.7.3
macOS 10.14.5

To arrive at the eye part, a simpler way is posenet, https://github.com/tensorflow/tfjs-models/tree/master/posenet and feed that to a simple CNN which can classify if eye open or closed, https://towardsdatascience.com/real-time-face-liveness-detection-with-python-keras-and-opencv-c35dc70dafd3