HTML5 MediaStream的运用

Blog picture template artx 530x185 px

HTML5在技术上发展越来越快,在输入方面浏览器也开始具备了更多能力。舜子一直在关注视频和音频流在html5的支持,虽然不是什么创新点,但是对html来说是一个非常重要的能力。

Chrome 18开始就把MediaStream放到实验室里,不过记得在19前的这些版本里,getUserMedia 接口一直不太稳定,很容易crash。近期发现Chrome 19.0.1055 dev在这个接口的稳定性上有较好的提升。不过在稳定性上,还需要改善。例如,摄像头使用次数过多后,媒体流会莫名中断,对于没有安装摄像头的检测做得不够完善,可能会导致浏览器crash。不过相信chrome以后的版本会fix这些问题,也希望能在chrome 19 的release版本正式用上这个功能。

这个demo里,其实舜子很早就想用html5来完成gif视频合成的尝试了。也借这个机会,搞了一把极限开发,利用Chrome 的MediaStream,把用户的摄像头作为动画合成的来源。

HTML5 GIF Maker 2

查看更多...

Tags: html5 mediastream gif

分类:Javascript | 固定链接 | 评论: 17 | 引用: 0 | 查看次数: 23229

HTML5 重力感应试玩~

Blog picture template artx 530x185 px 2

html5 中针对高端手机提供了重力感应和重力加速的接口,开发可以利用这个接口获取到移动设备重力加速感应数据。

目前已经支持的浏览器只有chrome和firefox,以及IOS的webkit(貌似android上因为版本差异很大,部分低版本的系统不支持)。

通过iphone或者mac电脑访问下面的地址可以体验哈

查看更多...

Tags: html5 Javascript

分类:Javascript | 固定链接 | 评论: 95 | 引用: 0 | 查看次数: 24927

setTimeout(0) 即将退役

Blog picture template artx 530x185 px

相信所有做前端开发的同学都会经常使用 setTimeout(0) 来做很多事情,这个一度成为解决了很多前端疑难杂症的法宝。而且大家也知道 setTImeout(0) 的极限在16ms左右。也许很多人没想到这个是一个很严重的问题,但是在w3c性能小组的专家眼里这是一个非常纠结的设置。

那setTimeout和16ms会带来什么问题呢?

1. 我们都知道,我们在做页面动画的时候大多数都是在用setTImeout来控制每一帧的动画的, 而多个setTimeout的存在会导致很多次CPU中断调度的开销,为了减少这些开销,我们希望同一个统一的CPU中断调度管理调度单元来管理所有动画,

查看更多...

分类:Javascript | 固定链接 | 评论: 17 | 引用: 0 | 查看次数: 12233

编辑器也浮云- cloud9 IDE分享

 

近期node.js的消息越来越多,越来越多的前端开发开始关注到这个似乎可以改变我们命运的新技术。其实node.js和之前的mozilla rhino一样都是可以本地执行脚本,不过和rhino的区别在于node.js更加希望的是让前端开发能够通过自己熟悉的语言更块地搭建自己的后台服务。

基于node.js,其实对云端化是有帮助的。Cloud9 IDE就是借助node,让编辑器也云端化。Cloud9 IDE基于node.js,服务于node.js。它提供了编辑器基础的功能。同时也给node.js一个可视化的调试环境(前端开发要是没个可视化的调试器,估计会很抓狂)。

好了,准备开始研究node.js的同学一定不能错过这一个开发辅助利器哈。

查看更多...

Tags: ide cloud nodejs

分类:Javascript | 固定链接 | 评论: 43 | 引用: 0 | 查看次数: 16052

利用HTML5对文件进行base64转换

Base64编码的数据做为URL的应用开始越来越广泛,转换的工具也不少。但是不少工具都是要下载或者在线进行转换,或不能进行批量转换。

这里舜子利用HTML5的FileReader我们是可以对本地文件进行读取并且转换为浏览器用的base64 URL,

然后利用HTML5的Drag&Drop我们只需要把文件拖放到浏览器窗口即可开始进行转换。

 

查看更多...

Tags: html5 filereader base64

分类:Javascript | 固定链接 | 评论: 31 | 引用: 0 | 查看次数: 9209

IE9允许前端开发获取到页面性能数据

        长期以来,为了改善站点的用户体验,我们一直都是在页面顶端加上一个 (new Date()).getTime() 来获取用户打开页面的时间,使用httpwatch来分析页面打开的解释时间。httpwatch虽然强大,但是还是无法让我们深入到用户的环境去了解用户打开页面前的一些情况,例如:DNS解释时间,请求和响应时间,以及更加深入的页面渲染时间等重要信息。这些信息对用户环境分析是至关重要的。

        如今,这个情况即将改变,微软的IE9将给前端开发们提供有力的性能分析接口让我们能够深入分析页面的性能,这就是强大的msPerformance接口。这个接口其实是基于HTML5草案Web Timing的定义来开发的(有意思的是这个接口是google提供的,chrome目前还没支持,IE9先行了)。

        我们来看看通过Web Timing我们可以获取到什么数据

 

查看更多...

Tags: ie9 performance 优化

分类:Javascript | 固定链接 | 评论: 20 | 引用: 0 | 查看次数: 3572

我的Qzone应用插件 for chrome

 

研究了chrome的插件编写方式,刚好结合我们的Qzone的APP写了一个应用。 欢迎大家尝鲜 :P

写chrome插件给人的感觉还是挺爽的。很强很html5。

 

查看更多...

Tags: chrome qzone

分类:Javascript | 固定链接 | 评论: 21 | 引用: 0 | 查看次数: 4965

IE9 前瞻

虽然IE6在依然是很重要的钉子户,但是我们不能放弃关注未来ie的变化。

IE9 的几个关键字: 硬件渲染新的JS引擎,CSS,标准

Dean_PDC_4.png

大家期待已久的圆角也将支持了

查看更多...

Tags: IE

分类:Javascript | 固定链接 | 评论: 13 | 引用: 0 | 查看次数: 3888

firefox 3.6 beta 发布

firefox 3.6 beta 发布,增加了不少上流的功能。

1. window.onhashchange 期待已久的接口,
https://developer.mozilla.org/en/DOM/window.onhashchange

2. http 行为监听,字面意思应该是允许进行一些http的监听工作,类似抓包(应该是给插件提供的接口)
You can now monitor HTTP transactions to observe requests and responses in real time.
https://developer.mozilla.org/en/Monitoring_HTTP_activity

3. 全屏视频

4. 字体支持

5. 拖拽支持文件直接拖拽

6. 图片渲染品质缩放算法 类似ie的 -ms-interpolation-mode

更多变化请看这里
https://developer.mozilla.org/en/Firefox_3.6_for_developers

不过这里没有提到真 html 5 (放弃doctype定义)的模式。

下载:
https://developer.mozilla.org/devnews/index.php/2009/10/30/firefox-3-6-beta-1-is-now-available-for-download/

Tags: Firefox

分类:Javascript | 固定链接 | 评论: 6 | 引用: 0 | 查看次数: 993

使用 Eclipse 调试 Chrome 的脚本

 

Google Chrome 发布了基于 Eclispe 的调试工具  Chrome Developer Tools , 调试需要Chrome 3.0.189.0 以上版本。

这样我们就可以使用Eclipse远程调试Chrome的代码了。

查看更多...

Tags: chrome debug remote

分类:Javascript | 固定链接 | 评论: 10 | 引用: 0 | 查看次数: 4238