Demo web app that queries the API with images (either uploaded or from the webcam), then renders the JSON output in a HTML canvas element as bounding boxes, indicating violations of the social distancing protocol.
- Node
- yarn
yarn
yarn start
yarn build
Simply POSTing the image to the API and waiting for a JSON response, then rendering the output.
Poll a screenshot from the webcam behind the scenes and feed it to the API.
Once a response is received, render the output and restart the process.
Build a HTML canvas of the same size as the image and set the image as background.
For each bounding box, draw a rectangle of the appropriate color in the corresponding right position.
Draw a small coronavirus image for each person found to not be respecting the social distancing norms.
Listen for changes to props and re-render.
- Create React App
- Inspiration from react-bounding-box, but we ended up writing our own Canvas bounding box rendering component
- react-webcam
- bulma