浏览器体检报告

您的浏览器正在体检中...

体检过关?按 键继续。

HTML 打造现代化的网络应用

高寒蕊 (Hanrui Gao)

  -   北京

自我介绍

+


@


Blog: www.enjoyhtml5.com

内容

WARNING!

网络应用

JavaScript 控制动画

你一定用过下面这种实现方法:

window.setTimeout(function() {
  // move element. Call this again.
}, 0);

但现在,我们向您推荐:

window.requestAnimationFrame = window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame || window.msRequestAnimationFrame;

var reqId_ = null;
(function callback(time) { // time is the Unix time.
  // move element.
  reqId_ = window.requestAnimationFrame(callback, opt_elem /* bounding elem */);
})();

例子

function draw() {
  var now = new Date().getTime();
  // update models.
  paintScene(canvas);
  window.setTimeout(draw, 10);
}
draw();

function draw(time) {
  // update models.
  paintScene(canvas);
  window.requestAnimationFrame(draw, canvas);
}
draw();

页面可见性 / 预渲染

判断你的网络应用/网页是否真的可见:

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

Demo

预渲染页面:

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

Demo

网络状态 —— 浏览器知道你断线了没有

获取当前状态:

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

捕获事件:

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

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

Web Intents

The web has a problem...

如果有天老板突发奇想……

Web Intents is a framework for client-side service discovery and inter-application communication
Web Intents 是一个用于发现客户端服务和应用间通信的框架

它是如何工作的呢?

  1. 服务注册它的意图 (Intent) 来处理用户的某种动作 (Action)
  2. 应用请求开始某个动作 (Action),譬如:分享、编辑、选中、查看……
  3. 用户选择他所希望使用的服务来处理本次动作 (Action)

是不是觉得有点儿眼熟?

1. 服务提供商的应用注册它自己的服务

声明要处理图片分享的意图:

<intent action="http://webintents.org/share" type="image/*" />
action*
一个描述要执行的操作的动词。
type
文件类型 (Mimetype) 过滤器。
href
如果指定此选项,当用户选择服务的时候将加载此链接;否则使用当前页面。

2. 客户端应用开始一个动作

应用说它需要使用分享功能:

var intent = new Intent();
intent.action = 'http://webintents.org/share';
intent.type = 'image/*';
intent.data = [imgData];

window.navigator.startActivity(intent);

( 2b. 用户选择使用自己想使用的服务 )

3. 服务提供者处理动作

在页面加载的时候设置传递过来的数据 (可选)

window.intent.data

然后呢?

Nothing! —— 你已经将你的应用和服务集成在一起了

接下来呢?

双向通信

客户端:

var intent = new Intent('http://webintents.org/pick', 'image/*');

window.navigator.startActivity(intent, function(intentData) {
  var img = document.querySelector('img');
  img.src = intentData.data[0];
});

服务器端:完成时会发出回调消息

window.intent.postResult([ ... some data ... ]);

演示 - cloud picker

( register a picker )

Google Docs Picker API

页面呈现

CSS3 打造的三维"视"界

访问网络摄像头和麦克风

JavaScript 原生支持,无需安装任何插件!

<video autoplay controls></video>
<input type="button" value="►" onclick="record(this)" id="start">
<input type="button" value="■" onclick="stop(this)" id="stop" disabled>
var localMediaStream, recorder;

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);
});

全屏显示

<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()

新增 CSS 伪类及 HTML 元素属性:

Web Audio API

我们不是已经有 <audio> 了么?

定时播放

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:

音频处理

var ctx = new webkitAudioContext();
var analyser = ctx.createAnalyser();

function initAudio(arrayBuffer) {
  ctx.decodeAudioData(arrayBuffer, function(buffer) {
    var src = ctx.createBufferSource();
    src.buffer = buffer;
    src.connect(analyser); // src -> analyser -> destination
    analyser.connect(ctx.destination);
    render(src);
  }, function(e) {
    console.log('Error decoding audio file', e);
  });
}

function render(src) {
  (function callback(timeStamp) {
    var byteData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(byteData);

    // draw byteData to <canvas> visualization...

    window.requestAnimationFrame(callback, src);
  })();
}

Web RTC

实时通讯的需求永远存在

GMail Video Chat
Google Plus Hangout
Facebook Video Chat
Tokbox

……全都是基于浏览器的应用,但全都需要安装自己的插件或者是使用 Flash

什么是 WebRTC ?

高质量、实时语音/视频通信,并且完全基于浏览器!


我们想要看到的产品是:

Robot

社区贡献

chromestatus.com

updates.html5rocks.com

Chrome Frame

<Meta> 标签:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

HTTP header:

X-UA-Compatible: IE=Edge,chrome=1

有用的资源



谢 谢 !