Augmented Reality in Your Browser using Vanilla JavaScript

Augmented Reality (AR) is on the rise, with live AR apps like Snapchat or Pokémon Go that are used by hundreds of millions of Users. With rising popularity, it also becomes more and more important for developers to have at least some experience with AR. And since we are in the age of frameworks where there are dozens of frameworks for each and everything, I thought: Why not act against the trend and implement AR using good old Plain Vanilla JS? Luckily, there happens to already be a beta Shape&Face Detection API that got released by the W3C earlier this year.
In this talk, I will introduce attendees to the Shape Detection API, go through some examples of AR in Web Development and also showcase a live face-filter service!

Transcript

1. AUGMENTED REALITY
2. AUGMENTED REALITY IN YOUR BROWSER!
3. AUGMENTED REALITYUSING VANILLA JAVASCRIPT! IN YOUR BROWSER!
4. AUGMENTED REALITY IN YOUR BROWSER USING
 VANILLA JAVASCRIPT
5. @FLXWU
6. @flxwu AR in Your Browser with Vanilla JS AUGMENTED REALITY STARTUPS 1,612
7. @flxwu AR in Your Browser with Vanilla JS WHAT IS AUGMENTED REALITY? USING THE
 SHAPEDETECTION API LET’S CODE FACE-FILTERS!
8. @flxwu AR in Your Browser with Vanilla JS WHAT IS AUGMENTED REALITY?
9. @flxwu AR in Your Browser with Vanilla JS “interactive experience of the real world whereby the objects in the real-world are "augmented" by computer-generated perceptual information, sometimes across multiple sensory modalities, . . .
10. @flxwu AR in Your Browser with Vanilla JS including visual, auditory, haptic, somatosensory, and olfactory. “
11. @flxwu AR in Your Browser with Vanilla JS visual auditory haptic somatosensory olfactory
12. @flxwu AR in Your Browser with Vanilla JS visual auditory haptic somatosensory olfactory
13. @flxwu AR in Your Browser with Vanilla JS
14. @flxwu AR in Your Browser with Vanilla JS
15. @flxwu AR in Your Browser with Vanilla JS
16. @flxwu AR in Your Browser with Vanilla JS
17. @flxwu AR in Your Browser with Vanilla JS 1. COMPUTER VISION 2. COMPUTER GRAPHICS
18. @flxwu AR in Your Browser with Vanilla JS Marker 1. COMPUTER VISION
19. @flxwu AR in Your Browser with Vanilla JS Tracking 1. COMPUTER VISION
20. @flxwu AR in Your Browser with Vanilla JS Tracking 1. COMPUTER VISION
21. @flxwu AR in Your Browser with Vanilla JS Tracking 1. COMPUTER VISION
22. @flxwu AR in Your Browser with Vanilla JS SLAM Simultaneous Localization and Mapping
23. @flxwu AR in Your Browser with Vanilla JS
24. @flxwu AR in Your Browser with Vanilla JS SLAM Simultaneous Localization and Mapping
25. @flxwu AR in Your Browser with Vanilla JS 2. COMPUTER GRAPHICS Transforming
26. @flxwu AR in Your Browser with Vanilla JS 2. COMPUTER GRAPHICS Transforming
27. @flxwu AR in Your Browser with Vanilla JS Overlay 2. COMPUTER GRAPHICS
28. @flxwu AR in Your Browser with Vanilla JS
29. @flxwu AR in Your Browser with Vanilla JS
30. @flxwu AR in Your Browser with Vanilla JS USING THE SHAPEDETECTION API?
31. @flxwu AR in Your Browser with Vanilla JS
32. @flxwu AR in Your Browser with Vanilla JS
33. @flxwu AR in Your Browser with Vanilla JS “foo”
34. @flxwu AR in Your Browser with Vanilla JS “foo”
35. @flxwu AR in Your Browser with Vanilla JS “foo”
36. @flxwu AR in Your Browser with Vanilla JS Version >70 chrome://flags/#enable-experimental-web-platform-features
37. @flxwu AR in Your Browser with Vanilla JS ShapeDetection API ShapeDetection FaceDetection TextDetection BarcodeDetection
38. @flxwu AR in Your Browser with Vanilla JS Encoder Mac Android Win10 Linux Face QR/ Barcode Text
39. @flxwu AR in Your Browser with Vanilla JS ShapeDetection API ShapeDetection FaceDetection TextDetection BarcodeDetection
40. @flxwu AR in Your Browser with Vanilla JS
41. @flxwu AR in Your Browser with Vanilla JS
42. @flxwu AR in Your Browser with Vanilla JS
43. @flxwu AR in Your Browser with Vanilla JS
44. @flxwu AR in Your Browser with Vanilla JS
45. @flxwu AR in Your Browser with Vanilla JS
46. @flxwu AR in Your Browser with Vanilla JS
47. @flxwu AR in Your Browser with Vanilla JS
48. @flxwu AR in Your Browser with Vanilla JS [Constructor (optional FaceDetectorOptions)] interface FaceDetector { Promise<sequence<DetectedFace>> detect(Source image); };
49. @flxwu AR in Your Browser with Vanilla JS [Constructor (optional FaceDetectorOptions)] interface FaceDetector { Promise<sequence<DetectedFace>> detect(Source image); };
50. @flxwu AR in Your Browser with Vanilla JS { unsigned short maxDetectedFaces; boolean fastMode; }; [Constructor (optional FaceDetectorOptions)] interface FaceDetector { Promise<sequence<DetectedFace>> detect(Source image); };
51. @flxwu AR in Your Browser with Vanilla JS { unsigned short maxDetectedFaces; boolean fastMode; }; [Constructor (optional FaceDetectorOptions)] interface FaceDetector { Promise<sequence<DetectedFace>> detect(Source image); };
52. @flxwu AR in Your Browser with Vanilla JS { unsigned short maxDetectedFaces; boolean fastMode; }; [Constructor (optional FaceDetectorOptions)] interface FaceDetector { Promise<sequence<DetectedFace>> detect(Source image); }; <img>,<canvas>,<svg>,<video> Blob ImageData (e.g. b64)
53. @flxwu AR in Your Browser with Vanilla JS { unsigned short maxDetectedFaces; boolean fastMode; }; [Constructor (optional FaceDetectorOptions)] interface FaceDetector { Promise<sequence<DetectedFace>> detect(Source image); }; <img>,<canvas>,<svg>,<video> Blob ImageData (e.g. b64)
54. @flxwu AR in Your Browser with Vanilla JS { DOMRectReadOnly boundingBox; FrozenArray<Landmark>? landmarks; }; { unsigned short maxDetectedFaces; boolean fastMode; }; [Constructor (optional FaceDetectorOptions)] interface FaceDetector { Promise<sequence<DetectedFace>> detect(Source image); }; <img>,<canvas>,<svg>,<video> Blob ImageData (e.g. b64)
55. @flxwu AR in Your Browser with Vanilla JS { DOMRectReadOnly boundingBox; FrozenArray<Landmark>? landmarks; }; { unsigned short maxDetectedFaces; boolean fastMode; }; [Constructor (optional FaceDetectorOptions)] interface FaceDetector { Promise<sequence<DetectedFace>> detect(Source image); }; <img>,<canvas>,<svg>,<video> Blob ImageData (e.g. b64)
56. @flxwu AR in Your Browser with Vanilla JS
57. @flxwu AR in Your Browser with Vanilla JS
58. @flxwu AR in Your Browser with Vanilla JS
59. @flxwu AR in Your Browser with Vanilla JS
60. @flxwu AR in Your Browser with Vanilla JS CODING TIME!
61. @flxwu AR in Your Browser with Vanilla JS
62. @flxwu AR in Your Browser with Vanilla JS PERFORMANCE
63. @flxwu AR in Your Browser with Vanilla JS PERFORMANCE FLEXIBILITY
64. @flxwu AR in Your Browser with Vanilla JS PERFORMANCE FLEXIBILITY
65. @flxwu AR in Your Browser with Vanilla JS PERFORMANCE COMPLEXITY FLEXIBILITY
66. @flxwu AR in Your Browser with Vanilla JS PERFORMANCE COMPLEXITY FLEXIBILITY
67. @flxwu AR in Your Browser with Vanilla JS PERFORMANCE COMPLEXITY FLEXIBILITY SIZE
68. @flxwu AR in Your Browser with Vanilla JS USE CASES
69. @flxwu AR in Your Browser with Vanilla JS
70. @flxwu AR in Your Browser with Vanilla JS covergirl.com
71. @flxwu AR in Your Browser with Vanilla JS covergirl.com
72. @flxwu AR in Your Browser with Vanilla JS
73. @flxwu AR in Your Browser with Vanilla JS
74. @flxwu AR in Your Browser with Vanilla JS
75. @flxwu AR in Your Browser with Vanilla JS
76. @flxwu AR in Your Browser with Vanilla JS
77. @flxwu AR in Your Browser with Vanilla JS GIVE IT A TRY!
78. @flxwu
79. @flxwu