Benefits and pitfalls of using HTML5 APIs
for online experiments and simulations


P. Garaizar, M.A. Vadillo and D. López-de-Ipiña


University of Deusto

Shifts in
the last decade...

From Read-Only to
Read/Write Web


Wikipedia, Youtube, Facebook, Twitter...

From native to
web-based apps


Google Docs, SalesForce, picnik...

From browsers to
app-players


Google V8, Mozilla JägerMonkey, Microsoft Chakra...

From non-standard & proprietary web technologies

(Java, Flash, Silverlight...)

...to fully-featured standards

(HTML5, CSS3, SVG...)

Animations

Declarative & procedural

Declarative animations

CSS & SVG+SMIL

CSS Animations

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#dot {
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 2.560s;
}

Libet's clock paradigm on the Web, by Garaizar, P.

SVG + SMIL Animations

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="100px">
  <circle cx="25" cy="50" r="25" fill="blue" stroke="freeze" stroke-width="1">
    <animateMotion path="M 25 0 H 350 Z" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

Based on an example @ Mozilla Developer Network.

Procedural animations

Canvas, SVG, WebGL

setTimeout, postMessage, requestAnimationFrame

Procedural animations: Canvas

Box2D JS, by Yasushi, A.

Procedural animations: SVG

iScience Maps, by Reips, U. & Garaizar, P.

Procedural animations: timers

setTimeout

// 60 Frames Per Second
var interval = 1000 / 60;

function start() {
  //Define initial status
  setTimeout(animate, interval);
}

function animate() {
  //Change properties
  setTimeout(animate, interval);
}


postMessage

// 60 Frames Per Second
var interval = 1000 / 60;

function start() {
  //Define initial status
  last = Date.now();
  setZeroTimeout(animate);
}

function animate() {
  time = Date.now();
  if (time >= last + interval) {
    //Change properties
    last = time;
  }
  setZeroTimeout(animate);
}


requestAnimationFrame

// 60 Frames Per Second
var interval = 1000 / 60;

function start() {
  //Define initial status
  last = Date.now();
  requestAnimationFrame(animate);
}

function animate(time) {
  if (time >= last + interval) {
  //Change properties
  last = time;
}


User input
collection

DOM events' timestamps


  • Specify the time at which the event was created (in milliseconds).


  • They may not have millisecond accuracy in some Operating Systems.

Platform-dependent hacks


  • Java Applet to expose nanosecond timing function to ECMAScript:

    • import java.applet.Applet;
public class nano extends Applet {
  public long nanoTime() {
    return System.nanoTime();
  }
}

  • Google: chrome.Interval (microseconds from UNIX epoch).

High-Resolution Timing API


This API provides a monotonically increasing timing function with sub-millisecond resolution not subject to system clock skew or adjustments : 

partial interface Performance {
  DOMHighResTimeStamp now();
};

Real-Time Communications

HTML5 WebSockets

AJAX
polling

AJAX
long polling

HTML5
WebSockets

WebRTC


  • Provides real-time communications between browsers (audio/video conferencing)


  • Without requiring proprietary plugins, downloads or installs.


  • Relies on two APIs: PeerConnection API and GetUserMedia API.

Conclusions

Conclusions


  • Many of these specifications are still under heavy development.


  • It is not easy to find living instances of research-related use.


  • Our purpose was to provide a roadmap to this new land of opportunity for HTML5.

Thanks for your attention ;-)

References

References

References

References

References

References

References

  • A. Bergkvist, D.C. Burnett, C. Jennings, and A. Narayanan, “WebRTC 1.0: Real-time Communication Between Browsers”, W3C Editor's Draft 16 March 2012. Retrieved from http://dev.w3.org/2011/webrtc/editor/webrtc.html

  • D. Burnett, and A. Narayanan. getusermedia: Getting access to local devices that can generate multimedia streams 22 December 2011. W3C Editors draft (Work in progress.) Retrieved from http://dev.w3.org/2011/webrtc/editor/getusermedia.html

  • J. Rosenberg. Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocols. April 2010. Internet RFC 5245. Retrieved from http://tools.ietf.org/html/rfc5245

  • J. Rosenberg, R. Mahy, P. Matthews, D. Wing. Session Traversal Utilities for NAT (STUN). October 2008. Internet RFC 5389. Retrieved from http://tools.ietf.org/html/rfc5389

  • P. Mahy, P. Matthews, J. Rosenberg. Traversal Using Relays around NAT (TURN): Relay Extensions to Session Traversal Utilities for NAT (STUN). April 2010. Internet RFC 5766. Retrieved from http://tools.ietf.org/html/rfc5766

Did you like the slides?


They are Kinout powered!


An HTML5 based Keynote System created by TapQuo