Preflight

Checking compatibility...

If things look good, press → to move on.

Bleeding Edge HTML5

  -  

Of course we're using Geolocation!

Who?

+


@


Blog:

State of Chrome

Agenda

Page Visibility API / Prerendering

Determine if your app is visible or not:

document.addEventListener('visibilitychange', function(e) {
  console.log('hidden:' + document.hidden,
              'state:' + document.visibilityState)
}, false);

Demo

Prerendering pages:

<link rel="prerender" href="http://example.org/index.html">

Demo

Know when you're connected

Status:

if (navigator.onLine) {
  console.log('ONLINE!');
} else {
  console.log('Connection flaky');
}

Online/offline events:

window.addEventListener('online', function(e) {
  // Re-sync data with server.
}, false);

window.addEventListener('offline', function(e) {
  // Queue up events for server.
}, false);

Web graphics enhanced

Native Client

Web Audio API

http://www.flickr.com/photos/vancouverfilmschool/4286583454/

Don't we already have HTML5 <audio>?

Scheduled playback

var ctx = new window.webkitAudioContext();

function playSound(arrayBuffer) { // Obtain arrayBuffer from XHR2.
  ctx.decodeAudioData(arrayBuffer, function(buffer) {
    var src = ctx.createBufferSource();
    src.buffer = buffer;
    src.looping = false;
    src.connect(ctx.destination);
    src.noteOn(0); // Play immediately.
  }, function(e) {
    console.log(e);
  });
}

Shoot:

 

The web has a problem...

Imagine integrating with all of these!

Web Intents is a framework for client-side service discovery and inter-application communication

How does it work?

  1. Service registers its intention to handle an action for the user
  2. App requests to start an action (share, edit, pick, view, ...)
  3. User selects which service to handle the action.

  4. More information: webintents.org

Multimedia

http://www.flickr.com/photos/aaronpk/5060305871/

Fullscreen content

<video width="300" src="movie.webm" controls></video>
<button onclick="enterFullscreen()">Get Huge!</button>

function enterFullscreen() {
  var elem = document.querySelector('body');
  elem.onwebkitfullscreenchange = function(e) {
    console.log("Entered fullscreen!");
    elem.onwebkitfullscreenchange = onFullscreenExit;
  };
  elem.webkitRequestFullScreen();
}

Demo

Fullscreen API

Control of the entire document and elements:

document.webkitIsFullScreen ( bool )
document.webkitCurrentFullScreenElement ( DOMElement )
document.webkitFullScreenKeyboardInputAllowed ( bool )
document.webkitCancelFullScreen();

Element.webkitRequestFullScreen();
//Element.webkitRequestFullScreenWithKeys();

Control of media elements:

MediaElement.webkitSupportsFullscreen ( bool )
MediaElement.webkitDisplayingFullscreen ( bool )
MediaElement.webkitEnterFullScreen()
MediaElement.webkitExitFullScreen()

Microphone & camera access

Plugin-free camera, microphone, device access.

<video autoplay controls></video>
<input type="button" value="⚫" onclick="record(this)" id="start">
<input type="button" value="◼" onclick="stop(this)" id="stop" disabled>

var record = function(button) {
  recorder = mediaStream.recorder();
};

var stop = function(button) {
  mediaStream.stop();
  recorder.getRecordedData(function(blob) {
    // Upload blob using XHR2.
  });
};

window.navigator.getUserMedia('video', function(stream) {
  document.querySelector('video').src = window.URL.createObjectURL(stream);
  localMediaStream = stream;
}, function(e) {
  console.log(e);
});

Web RTC

http://www.flickr.com/photos/aareps/6005165581/

What is WebRTC?

high quality real-time voice/video communication in the browser


That was a lot!

chromestatus.com

updates.html5rocks.com

Thanks! Questions?

@   +