A darts multi-player online platform where users can play in real time against other users around the globe!
1 - Access device camera through WebRTC and display the video on canvas. ** We are here **
2 - Understand what is the best technology/methodology to detect the dart board and the darts landing on it. ** We are here **
3 - Design the board score matrix, so we can match the areas with the respective points.
4 - Develop a minimal 501 single player game.
5 - Create users accounts and a score board history
6 - Multiplayer functionality
-- WebRTC works on all the main browsers on laptops and PC's, check it out here -> (https://codelabs.developers.google.com/codelabs/webrtc-web/#0).
For mobile apps in Android & IOS WebRTC as native commands which need to be implemented but also works (https://webrtc.org/native-code/). We can develop Android and IOS apps with React native and use the specific WebRTC technology for each platform.
For now we will focus on just get the video through the laptop/PC webcam to be able to process the image and guarantee we can detect the dart board, which is the main selling point of our app, withouth it everything else is pointless. ** ACHIEVED **
-- Try diferent image processing approaches to find wich are the best ways to detect the board and the darts on it. For now will use the Tracking.js library but have the feeling this will not be the best approach due to the fact the processing power heavy lifting will be done on the device CPU which means if the user as a old mobile it might not work. So we should have in mind to use Python or Node to process the image on the server side.
Electron -> Develop desktop web apps, using Javascript, CSS, HTML. This means we can develop for web but instal on Laptop or PC like if it was a native program.
React/React Native -> With React & React Native we can make our Front-End logic universal for Desktop/Mobile, changing only the render functions. Also gives us the possibility to write mobile apps withou the need to learn native code like Java or Swift.
scikit-image -> Python Image processor
Tracking.js - > JavaScript Computer Vision on the web
WebRTC -> Real-time Communication Between Browsers
Three.js -> JavaScript 3D library
We need to decide between NodeJs or Python. This decision will be highly influenced by the technology language which is going to be responsible for image processing.
-- Simple Augmented Reality With OpenCV, Three.js And WebSockets (This example does not work but its a good conceptual case):
https://www.smashingmagazine.com/2016/02/simple-augmented-reality-with-opencv-a-three-js/
-- WebRTC list of tutorials:
https://codelabs.developers.google.com/codelabs/webrtc-web/#0
https://webrtc.github.io/samples/
-- WebRTC access to device camera & React chat implementation:
https://www.html5rocks.com/en/tutorials/getusermedia/intro/
https://react.rocks/tag/WebRTC
-- Motion detection:
http://codersblock.com/blog/motion-detection-with-javascript/
-- Object Detection with HTML5 getUserMedia
http://techslides.com/object-detection-with-html5-getusermedia
-- Computer Vision on the Web:
https://www.packtpub.com/books/content/object-detection-using-image-features-javascript
-- React nice list of tutorials:
https://react.rocks/
-- React & React Native implementations and boilerplate:
http://jkaufman.io/react-web-native-codesharing/
https://github.com/este/este
-- Electron with React:
https://github.com/gabrielbull/react-desktop
https://github.com/chentsulin/electron-react-boilerplate