What The Web Can Do For Your Apps

Browsers have come a long way. Things that used to be exclusively in the domain of native apps are becoming more and more common in open web applications. I will introduce and demonstrate some of these things, like the File API, 3D rendering and animation, WebGL, audio tricks using the Web Audio API, video tricks using getUserMedia, the very new Speech API, etc.

Links for the demos used in this talk:

CSS 3D
http://codepen.io/juliangarnier/details/hzDAF
http://tridiv.com/
http://www.paulrhayes.com/experiments/pyramid/

Canvas 2D
http://www.clicktorelease.com/code/bumpy-metaballs/
http://andrew-hoyer.com/andrewhoyer/experiments/cloth/
http://www.joelambert.co.uk/flux/

Canvas 3D (WebGL)
http://madebyevan.com/webgl-water/
http://www.playmapscube.com/

Web Audio API
http://webaudioplayground.appspot.com/

Speech API
https://www.google.com/intl/en/chrome/demos/speech.html
http://www.broken-links.com/tests/webspeech/synthesis.php

getUserMedia
http://webcamtoy.com/
http://webqr.com/

WebRTC
http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/
https://apprtc.appspot.com/

File API
http://stuk.github.io/jszip/examples/read-local-file-api.html

Device API (devicelight)
http://www.freshtilledsoil.com/the-future-of-web/ambient-light/

Transcript

1. WTWCDFYA What The Web Can Do For Your Apps Jan van Hellemond @jvhellemond @frontlab Tales from the bleeding edge
2. - CSS 3D - Canvas 2D - WebGL - getUserMedia() - Web Audio API - WebRTC - File API - Device APIs - Firefox OS - One More Thing™ WTWCDFYA
3. CSS 3D
4. CSS 3D 3D transforms 3D perspective
5. CSS 3D 10 3.2 12 16 3.0
6. Canvas 2D
7. Canvas 2D <canvas> HTML element .getContext("2d") API
8. 9 3.2 2.1 Canvas 2D
9. WebGL
10. WebGL
11. WebGL <canvas> HTML element .getContext("webgl") API 2.0
12. WebGL 11 4 8
13. getUserMedia()
14. getUserMedia() - Camera (video) - Microphone (audio) - Permission required - Stream to <video>, <audio>
15. getUserMedia() 21 17
16. Web Audio API
17. Web Audio API 6.0 10 25
18. WebRTC
19. WebRTC - Real-time chat - Videoconferencing - Media streaming - Screen sharing
20. WebRTC 23 22
21. File API
22. File API <input type="!le"> element Permission required Drag-and-drop
23. File API 10 6.0 6 3.6 3.0
24. Device APIs
25. Device APIs - Geolocation - Vibration - Accelerometer - Gyroscope - Battery status
26. Device APIs 11 4.2 7 6 3.0
27. Device APIs Firefox OS - Web Telephony - Web SMS - Mobile Connection API - Power Management API
28. Device APIs
29. Device APIs
30. Device APIs
31. Device APIs
32. Speech API
33. Speech API Speech recognition Speech synthesis
34. Speech API Speech recognition Speech synthesis
35. Speech API 25
36. #thanks Mozilla Developer Network