第5回SCDN - Things that become possible with HTML5

510 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
510
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 第5回SCDN - Things that become possible with HTML5

    1. 1. Things that becomepossible with HTML5 Atsuya Takagi
    2. 2. Introduction• (@atsuya)• M.S. in computer science from California State University, Northridge• book on node• http://about.me/atsuya
    3. 3. Motion with CSS• http://www.htmlfivewow.com/slide42
    4. 4. 3D transforms with CSS• http://www.htmlfivewow.com/slide44
    5. 5. Canvas• http://www.htmlfivewow.com/slide47
    6. 6. 2D Canvas• http://www.htmlfivewow.com/slide49
    7. 7. WebGL• http://www.htmlfivewow.com/slide51• http://www.htmlfivewow.com/slide52
    8. 8. Audio• http://www.htmlfivewow.com/slide57
    9. 9. Play Sound• http://www.htmlfivewow.com/slide59
    10. 10. Generate Sound• http://www.htmlfivewow.com/slide60
    11. 11. Realtime Audio Analysis• http://www.htmlfivewow.com/slide64
    12. 12. File• http://www.htmlfivewow.com/slide17
    13. 13. Directory• http://www.htmlfivewow.com/slide18
    14. 14. Drag and Drop• http://www.htmlfivewow.com/slide19
    15. 15. FileReader• http://www.htmlfivewow.com/slide23
    16. 16. Blob URL• http://www.htmlfivewow.com/slide25
    17. 17. File System• http://www.htmlfivewow.com/slide29
    18. 18. File System Access• http://www.htmlfivewow.com/slide30
    19. 19. file transferring
    20. 20. file transferringusing browsers
    21. 21. actual P2P
    22. 22. but Flash sucks
    23. 23. tensoid
    24. 24. Demo
    25. 25. not actual P2P
    26. 26. but it rocks
    27. 27. Inside tensoid• file API to read file• websocket for send/receive• node as connection hub
    28. 28. Inside tensoid• file API to read file• websocket for send/receive• node as connection hub
    29. 29. Websocket• bi-directional, full-duplex• browser initiates connection to server • server can push anytime • no polling. it’s realtime.
    30. 30. Websocket in tensoid• all communications regarding file transfer• send/receive base64 encoded data• some traffic control
    31. 31. Inside tensoid• file API to read file• websocket for send/receive• node as connection hub
    32. 32. Inside tensoid• file API to read file• websocket for send/receive• node as connection hub
    33. 33. TM• single threaded, event loop, non-blocking server framework • every api call is asynchronous• write server code in javascript
    34. 34. TM
    35. 35. Node in tensoid• all server side stuff• websocket talks to node• receive data from sender, transfer that data to receiver
    36. 36. Detail of tensoid• listen to file drag and drop• notify node about file is ready• node records sender’s session id• node sends back the url
    37. 37. Detail of tensoid• receiver accesses the url• notify node to start transferring• node notifies sender to start• sender sends data, node receives it, node sends it to receiver• sender notifies when it’s done
    38. 38. Conclusion• html5 rocks• a lot of existing web applications has already adapted• so many things you can do with it• tensoid is just one of them
    39. 39. Resources• http://www.html5rocks.com• http://www.htmlfivewow.com/• http://nodejs.org/• http://socket.io/• https://github.com/atsuya/tensoid
    40. 40. Thank you!

    ×