Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What The Web Can Do For Your Apps

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/

19f565f05a5d2e98d4416d1db627bf76?s=128

Jan van Hellemond

December 18, 2013
Tweet

More Decks by Jan van Hellemond

Other Decks in Technology

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