找回密码
 FreeOZ用户注册
查看: 3521|回复: 5
打印 上一主题 下一主题

[网络技术] Give me a gear, I'll wheel the world! New features in Google Gears

[复制链接]
跳转到指定楼层
1#
发表于 4-6-2008 21:41:19 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?FreeOZ用户注册

x
Gears(原来叫Google Gears)是Google在07年推出的一个开源的浏览器插件,它可以让Google以及第三方的在线服务离线运行和使用。现有的Gears发行版本是0.2,主要有3大功能: Local Server, Database和Workerpool,分别为浏览器增加了离线缓存,本地数据库和多线程Javascript等功能。如果想体验Gears的功能可以试一试以下几个链接:
http://www.google.com/reader/
http://www.rememberthemilk.com/
http://www.zoho.com/
http://messaging.myspace.com/
http://docs.google.com

由于Gears是Open Source的项目,所以可以从网上下载到它的全部源代码,包括一些还未实现的新功能的设计文档等,通过研究这些代码和文档可以发现Gears是一个多么野心勃勃的项目:

1. AudioAPI
   通过Javascript就可以很方便的播放,录制,编辑语音。不需要ActiveX或者Flash插件等,跨平台。
下载并播放音频代码:
  1. var audio = google.gears.factory.create('beta.audio');
  2. audio.src = 'http://blahblahblob.com/sampleaudio.wav';
  3. audio.load();
  4. audio.play();
  5. //a handle to the blob can be got by invoking, if needed.
  6. var blob = audio.getMediaBlob();
复制代码
录制并上传语音代码:
  1. var recorder = google.gears.factory.create('beta.audiorecorder');
  2. recorder.destination = <http post url>
  3. recorder.autoStream = true;
  4. recorder.record(); //asynchronous call
复制代码
2. CameraAPI
   通过Javascript操作摄像头进行拍照或录像。示例代码:
  1. // Create a camera object
  2. var camera = google.gears.factory.create("beta.camera");

  3. // Capture an image.
  4. var image = camera.captureImage(function(media) {
  5.     uploadImage(media.content);
  6.     });

  7. // Capture of a video, specifying a desired resolution and duration.
  8. var video = camera.captureVideo(function(media) {
  9.     uploadVideo(media.content);
  10.     }, 5000);
复制代码
3.BlobAPI   
  操作二进制数据,能够把很大Size的数据(图片,视频等文件)进行分片,并结合Gears的Workerpool,离线等功能进行自动的续传。即使网络很慢也能给用户带来良好使用体验。这个功能主要作为1和2的基础。

4.FileSystemAPI
  提供通过Javascript安全访问本地磁盘数据的能力。代码示例:
  1. var desktop = google.gears.factory.create('beta.desktop');
  2. var files = desktop.getLocalFiles(['Images (*.jpg, *.gif)', '*.jpg;*.gif', 'All files', '*']);
  3. for (var i = 0; i < files.length; ++i) {
  4.   var img = document.createElement("img");
  5.   img.src = files[i];
  6.   document.body.appendChild(img);
  7. }
复制代码
5.ImagingAPI   
  类似HTML5规范中Canvas的实现,用来通过Javascript操作,编辑图片等跨浏览器的2D图形绘制能力。下面这段代码把下载图片,裁剪,缩放,显示以及上传等动作一气呵成
  1. var request = google.gears.factory.create('httprequest');
  2. var serverUrl = 'http://picasaweb.google.com/photo/23432094834';
  3. request.open('GET', serverUrl);
  4. request.onreadystatechange = function() {
  5.   if (request.readyState == 4) {
  6.     process(request.responseBlob);
  7.   }
  8. };
  9. request.send();

  10. function process(var srcBlob) {
  11.   var canvas = google.gears.factory.create('canvas');
  12.   canvas.load(srcBlob);

  13.   var context = canvas.getContext('gears-2d');
  14.   // crop out 10 pixels on each side.
  15.   context.crop(10, 10, canvas.width - 20, canvas.height - 20);
  16.   context.resize(1024, 768);

  17.   var destBlob = canvas.toBlob();

  18.   // update on screen:
  19.   var localServer = google.gears.factory.create('localserver');
  20.   var store = localServer.createStore(STORE_NAME);
  21.   store.captureBlob(destBlob, IMAGE_URL);
  22.   var img = document.getElementById('myImage');
  23.   img.src = IMAGE_URL;

  24.   // now upload to server:
  25.   request = google.gears.factory.create('httprequest');
  26.   request.open('PUT', serverUrl);
  27.   request.onreadystatechange = function() {
  28.     if (request.readyState == 4) {
  29.       alert('Upload finished!');
  30.     }
  31.   }
  32.   request.sendBlob(destBlob);
  33. };
复制代码
6.NotificationAPI  
为浏览器增加桌面通知能力,使你的网站通过几句Javascript便具有像MSN和QQ那样的提示功能。示例代码:
  1. <script type="text/javascript" src="gears_init.js"></script>
  2. <script type="text/javascript">
  3. var desktop = google.gears.factory.create('beta.desktop')
  4. var notification = desktop.createNotification();
  5. notification.title = Barbecue on Saturday';
  6. notification.icon = 'http://mail.google.com/mail.gif';
  7. notification.subtitle = 'Thu Mar 27 1:25pm - 2:25pm';
  8. notification.description = 'Hey everyone, looks like great weather this ' +
  9.     'weekend so I thought we might get together';
  10. notification.displayAtTime = new Date(2008, 5, 27, 14, 0, 0);
  11. notification.displayUntilTime = new Date(2008, 5, 27, 14, 0, 15);
  12. notification.addAction('View', 'http://mail.google.com/view?id=...');
  13. desktop.showNotification(notification);
  14. </script>
复制代码
7.GeolocationAPI         
  把GPS的能力带入WEB,使网站程序可以自动对使用者进行物理定位(当然需要使用者同意 )。这是个很有想象力的功能,联想于Gears已经有了Windows Mobile版,外加Google自家的Android移动平台和Google Maps,是不是一个永远不用升级地图的GPS导航软件浮现在你的眼前了呢

以上这些NB哄哄的功能有些实现了,有些还在开发中,外加0.2版新加的创建快捷方式和跨域httprequest访问能力,使得Google Gears成为一个拥有无限可能的WEB开发平台。

评分

参与人数 2威望 +50 收起 理由
ryan88 + 20 精品文章
ubuntuhk + 30 谢谢分享!

查看全部评分

回复  

使用道具 举报

2#
发表于 9-6-2008 12:00:16 | 只看该作者

回复 #1 coredump 的帖子

对这个技术需要保持关注
回复  

使用道具 举报

3#
发表于 9-6-2008 14:09:51 | 只看该作者
跨域httprequest访问能力。。

这会不是个blackhole呢??
回复  

使用道具 举报

4#
 楼主| 发表于 9-6-2008 14:29:28 | 只看该作者
回复  

使用道具 举报

5#
发表于 11-6-2008 12:21:34 | 只看该作者
before i want write java script to load the login page from other site then i can try to guess  the passwd.
failed because the java not support to do that for security reason.
回复  

使用道具 举报

6#
发表于 15-6-2008 00:25:31 | 只看该作者
谢谢楼主分享,长见识了。

说真的,我觉得现在大学的课程里应该加入Google技术这一科(最好是double module)当然我说不是中国的大学。
回复  

使用道具 举报

您需要登录后才可以回帖 登录 | FreeOZ用户注册

本版积分规则

小黑屋|手机版|Archiver|FreeOZ论坛

GMT+10, 28-4-2024 03:03 , Processed in 0.041508 second(s), 22 queries , Gzip On, Redis On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表