FreeOZ论坛

标题: Give me a gear, I'll wheel the world! New features in Google Gears [打印本页]

---

作者: coredump    时间: 4-6-2008 21:41
标题: Give me a gear, I'll wheel the world! New features in Google Gears
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. 
   
4. // Capture an image.
   
5. var image = camera.captureImage(function(media) {
   
6.     uploadImage(media.content);
   
7.     });
   
8. 
   
9. // Capture of a video, specifying a desired resolution and duration.
   
10. var video = camera.captureVideo(function(media) {
    
11.     uploadVideo(media.content);
    
12.     }, 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. 
    
11. function process(var srcBlob) {
    
12.   var canvas = google.gears.factory.create('canvas');
    
13.   canvas.load(srcBlob);
    
14. 
    
15.   var context = canvas.getContext('gears-2d');
    
16.   // crop out 10 pixels on each side.
    
17.   context.crop(10, 10, canvas.width - 20, canvas.height - 20);
    
18.   context.resize(1024, 768);
    
19. 
    
20.   var destBlob = canvas.toBlob();
    
21. 
    
22.   // update on screen:
    
23.   var localServer = google.gears.factory.create('localserver');
    
24.   var store = localServer.createStore(STORE_NAME);
    
25.   store.captureBlob(destBlob, IMAGE_URL);
    
26.   var img = document.getElementById('myImage');
    
27.   img.src = IMAGE_URL;
    
28. 
    
29.   // now upload to server:
    
30.   request = google.gears.factory.create('httprequest');
    
31.   request.open('PUT', serverUrl);
    
32.   request.onreadystatechange = function() {
    
33.     if (request.readyState == 4) {
    
34.       alert('Upload finished!');
    
35.     }
    
36.   }
    
37.   request.sendBlob(destBlob);
    
38. };

复制代码

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开发平台。

---

作者: ubuntuhk    时间: 9-6-2008 12:00
标题: 回复 #1 coredump 的帖子
对这个技术需要保持关注

---

作者: NEWGAY    时间: 9-6-2008 14:09
跨域httprequest访问能力。。

这会不是个blackhole呢？？

---

作者: coredump    时间: 9-6-2008 14:29
标题: 回复 #3 NEWGAY 的帖子
http://code.google.com/apis/gear ... createworkerfromurl

http://code.google.com/apis/gear ... ml#allowcrossorigin

---

作者: bash    时间: 11-6-2008 12:21
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.

---

作者: ryan88    时间: 15-6-2008 00:25
谢谢楼主分享，长见识了。

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

---

欢迎光临 FreeOZ论坛 (https://www.freeoz.org/forum/)

Powered by Discuz! X3.2