重庆时时彩平台手机版 http://www.vzsio.live/ zh-cn PBlog2 v2.4 PuterJam's Blog http://www.vzsio.live/images/logos.gif http://www.vzsio.live/ PuterJam's Blog http://www.vzsio.live/article/Javascript/1044.htm <![CDATA[HTML5 MediaStream的運用]]> puterjam@gmail.com(puterjam) Fri,08 Jun 2012 16:11:11 +0800 http://www.vzsio.live/default.asp?id=1044 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

這里的關鍵技術并不復雜,在chrome下,我們可以使用navigator.webkitGetUserMedia即可,其他瀏覽器依次類推moz,o,ms之類。

<video id="v" autoplay></video>
 <script>
  navigator.webkitGetUserMedia({video:true},
  function(stream){
     document.getElementById("v").src = webkitURL.createObjectURL(stream);
   },
  function(error){
     console.log("不支持媒體流~ ", error);
   });
 </script>?

這段代碼正常情況下,你應該可以在瀏覽器里看到你的攝像頭視頻了。

?

另外,舜子還想提到一個非常有用的東西就是URL對象。看到webkitURL了么?createObjectURL 是可以把一些Blob(二進制大對象)轉換成一個本地的url,提供給script標簽,img,video,audio,甚至file來使用,這樣做有什么好處呢?

試想一下,瀏覽器未來直接在前端處理的資源會很多,你可以合成視頻和音頻,但是合成后的Blob(二進制大對象)如何給html來播放,那么這時候你就需要構造一個URI來提供,這個和base64URI還不一樣。其實createObjectURL會更加強大。

你還可以把一些文本,直接轉換成js,構造成一個url,提供給worker使用。減少了worker使用過程中需要多一個請求的開銷。

玩demo的,這邊請:

http://www.vzsio.live/web/gif_maker/

注意,最好是chrome 19以上的版本,并且確保你真的有攝像頭(沒攝像頭可能會crash瀏覽器,chrome的bug)。

最后還得感謝,jsgif庫。這個庫是從as3版本轉換過來的。

https://github.com/antimatter15/jsgif

]]>
http://www.vzsio.live/article/Javascript/html5_Orientation.html <![CDATA[HTML5 重力感應試玩~]]> puterjam@gmail.com(puterjam) Thu,21 Jul 2011 21:11:06 +0800 http://www.vzsio.live/default.asp?id=1037 Blog picture template artx 530x185 px 2

html5 中針對高端手機提供了重力感應和重力加速的接口,開發可以利用這個接口獲取到移動設備重力加速感應數據。

目前已經支持的瀏覽器只有chrome和firefox,以及IOS的webkit(貌似android上因為版本差異很大,部分低版本的系統不支持)。

通過iphone或者mac電腦訪問下面的地址可以體驗哈

http://www.vzsio.live/web/Orientation.html

 

使用也比較簡單:

首先,綁定感應事件

 

JavaScript代碼
  1. window.addEventListener('deviceorientation'this.orientationListener, false); //方向感應器  
  2. window.addEventListener('MozOrientation'this.orientationListener, false); //方向感應器 for firefox      
  3. window.addEventListener('devicemotion'this.orientationListener, false); //重力加速感應器 for iphone, android  

 


使用上需要區分設備是否支持重力加速器,部分設備無重力加速,只能獲取到方向

方向中分alphabetagamma三個,其實對應我們常說的 y, z, x 三個方向, 方向可以通過 event 來直接獲取到,獲取到到的數據單位是 度數, 不過firefox稍微有點偏離規范,返回的是 弧度 單位。

Start

]]>
http://www.vzsio.live/article/Javascript/setImmediate_requestAnimationFrame.html <![CDATA[setTimeout(0) 即將退役]]> puterjam@gmail.com(puterjam) Wed,20 Jul 2011 23:50:09 +0800 http://www.vzsio.live/default.asp?id=1036 Blog picture template artx 530x185 px

相信所有做前端開發的同學都會經常使用 setTimeout(0) 來做很多事情,這個一度成為解決了很多前端疑難雜癥的法寶。而且大家也知道 setTImeout(0) 的極限在16ms左右。也許很多人沒想到這個是一個很嚴重的問題,但是在w3c性能小組的專家眼里這是一個非常糾結的設置。

那setTimeout和16ms會帶來什么問題呢?

1. 我們都知道,我們在做頁面動畫的時候大多數都是在用setTImeout來控制每一幀的動畫的, 而多個setTimeout的存在會導致很多次CPU中斷調度的開銷,為了減少這些開銷,我們希望同一個統一的CPU中斷調度管理調度單元來管理所有動畫,

于是就出現了 requestAnimationFrame。 requestAnimationFrame 的出現不僅僅可以解決中斷調度的問題,還可以更加優化得統一管理動畫單元里dom元素的repaint方式。

2. 杯具的16ms,在早期。js的callback執行,是依賴CPU的中斷來進行控制的,如果兩個中斷之間時間太短會導致,CPU性能消耗很高,同時影響能耗,于是微軟和英特公司為了解決這個問題,就約定每個中斷之間的間隔是15.6ms(64 fps)所以就是我們常見的約等于16ms的間隔。不過隨著web的要求不斷增加,大家對這個要求希望是放寬的態度,于是在高端瀏覽器,這個性能被提升了4倍左右,所以在chrome,ie10等瀏覽器,setTimeout的間隔縮短到了 4ms (250 fps)。 但是問題來了,這么高的消耗以傳統的方式,并不能從根本上解決CPU的調度問題,而且能耗也會提升40%

于是W3C,提出需要取代 setTimeout(0) 的代替品 --- setImmediate

不過到底底層如何解決了這個CPU調度,還能保證腳本能夠很快執行,這塊舜子還在研究,了解的朋友也歡迎一起交流哈。

 

這是兩個非常好的方法用來取代setTimeout的api,舜子也做了一些小小的實驗來驗證 requestAnimationFrame,setImmediate 和 setTimeout 之間的執行效率區別,在IE10下可以看到,setImmediate 接口的callback次數可以達到每秒 6000 次的的執行。而requestAnimationFrame主要目的是為了保證動畫的圓滑播放,所以基本上是控制在60 fps的范圍,而且根據文檔介紹,只是一個時鐘控制器在進行調度,而且會更加需要來進行按需渲染。

http://www.vzsio.live/web/html5/timing_test.htm

 

 

]]>
http://www.vzsio.live/article/Javascript/nodeJS_IDE_cloud9.html <![CDATA[編輯器也浮云- cloud9 IDE分享]]> puterjam@gmail.com(puterjam) Fri,21 Jan 2011 19:36:02 +0800 http://www.vzsio.live/default.asp?id=1032

近期node.js的消息越來越多,越來越多的前端開發開始關注到這個似乎可以改變我們命運的新技術。其實node.js和之前的mozilla rhino一樣都是可以本地執行腳本,不過和rhino的區別在于node.js更加希望的是讓前端開發能夠通過自己熟悉的語言更塊地搭建自己的后臺服務。

基于node.js,其實對云端化是有幫助的。Cloud9 IDE就是借助node,讓編輯器也云端化。Cloud9 IDE基于node.js,服務于node.js。它提供了編輯器基礎的功能。同時也給node.js一個可視化的調試環境(前端開發要是沒個可視化的調試器,估計會很抓狂)。

好了,準備開始研究node.js的同學一定不能錯過這一個開發輔助利器哈。

 

如何安裝:

首先確認你已經安裝好了node.js,這里就不講如何安裝node.js了,步驟也很簡單,編譯過程也很快。下載node.js到這里 http://nodejs.org/

到 github 下載源碼 https://github.com/ajaxorg/cloud9

當然, linux或者window的cygwin同學可以直接使用git工具來獲得  

git clone git://github.com/ajaxorg/cloud9.git

 

執行 :

1. 到你的cloud9的本地目錄執行

Linux and OSX:

$ bin/cloud9.sh 

Windows:

> bin\cloud9-win32.bat 

第一次運行會需要一點時間,cloud9會在線更新一些必要的文件,第二次運行就很快了
 
在你的運行控制臺里看到這個圖案就說明啟動正常了。

 

2. 然后 在你的瀏覽器里直接打開 http://127.0.0.1:3000 即可以打開編輯器,嘿嘿是不是啟動比神馬的eclipse要快很多呀。當然這里還是推薦chrome了。

 

在cloud9 IDE中你可以很方便地調試你的node.js代碼,而且cloud9也提供了多種語法高亮效果. 不過既然云端了,cloud9也會出現一些很明顯的問題,例如不能直接編輯本地文件,你在啟動編輯器的時候設置一個工作路徑,你之能編輯這個路徑下的文件。

*通過 -w 啟動前設置工作路徑

$ node bin/cloud9.js -w /path/to/your/awesome/workspace 

 

]]>
http://www.vzsio.live/article/Javascript/file_to_base64_url.html <![CDATA[利用HTML5對文件進行base64轉換]]> puterjam@gmail.com(puterjam) Mon,27 Sep 2010 01:27:42 +0800 http://www.vzsio.live/default.asp?id=1029

Base64編碼的數據做為URL的應用開始越來越廣泛,轉換的工具也不少。但是不少工具都是要下載或者在線進行轉換,或不能進行批量轉換。

這里舜子利用HTML5的FileReader我們是可以對本地文件進行讀取并且轉換為瀏覽器用的base64 URL,

然后利用HTML5的Drag&Drop我們只需要把文件拖放到瀏覽器窗口即可開始進行轉換。

 

工具地址: http://www.vzsio.live/web/html5/encodeDataUrl.htm

 

Html5的base64轉換小工具在Chrome瀏覽器和firefox下測試通過。當然效果快的還是Chrome瀏覽器。舜子還針對音頻和圖片進行了預覽支持。當然大家用到base64的應該還是圖片較多。所以小工具有個bug就是無法處理過大的文件,過大的base64其實意義不大了。

]]>
http://www.vzsio.live/article/Javascript/IE9_msPerformance.html <![CDATA[IE9允許前端開發獲取到頁面性能數據]]> puterjam@gmail.com(puterjam) Tue,29 Jun 2010 22:56:26 +0800 http://www.vzsio.live/default.asp?id=1026

        長期以來,為了改善站點的用戶體驗,我們一直都是在頁面頂端加上一個 (new Date()).getTime() 來獲取用戶打開頁面的時間,使用httpwatch來分析頁面打開的解釋時間。httpwatch雖然強大,但是還是無法讓我們深入到用戶的環境去了解用戶打開頁面前的一些情況,例如:DNS解釋時間,請求和響應時間,以及更加深入的頁面渲染時間等重要信息。這些信息對用戶環境分析是至關重要的。

        如今,這個情況即將改變,微軟的IE9將給前端開發們提供有力的性能分析接口讓我們能夠深入分析頁面的性能,這就是強大的msPerformance接口。這個接口其實是基于HTML5草案Web Timing的定義來開發的(有意思的是這個接口是google提供的,chrome目前還沒支持,IE9先行了)。

        我們來看看通過Web Timing我們可以獲取到什么數據

 

window.msPerformance.navigation

 {

requestCount : 76

type : 0

startTime : 1277821481923

redirectedCount : 5

uniqueDomains : 31

}

 

 

window.msPerformance.timingMeasures

 {

request : 22

domContentLoaded : 342

response : 10

firstPaint : 29

domInteractive : 342

msStyleContentLoaded : 342

fetch : 459

domComplete : 342

load : 89

connect : 3

}

 

 

window.msPerformance.timing

 {

domLoading : 1277821481950

responseEnd : 1277821481960

navigationStart : 1277821481923

fetchStart : 1277821481923

msStyleContentLoaded : 1277821482293

firstPaint : 1277821481952

fullyLoaded : 0

requestStart : 1277821481927

loadEnd : 1277821482383

unloadStart : 1277821481923

}

 

通過這些數據我們可以更加深入得分析頁面的性能和用戶的網絡環境,提供更加好的差異化服務。

 到這里下載IE9預覽版

 

發現IE9pre3的console列出的接口不全,直接用調試器把這個接口和方法全部列出來了,更加直觀

]]>
http://www.vzsio.live/article/Javascript/qzone_app_for_chrome.html <![CDATA[我的Qzone應用插件 for chrome ]]> puterjam@gmail.com(puterjam) Mon,08 Feb 2010 16:44:20 +0800 http://www.vzsio.live/default.asp?id=1018  

研究了chrome的插件編寫方式,剛好結合我們的Qzone的APP寫了一個應用。 歡迎大家嘗鮮 :P

寫chrome插件給人的感覺還是挺爽的。很強很html5。

 

 

安裝請步移:

https://chrome.google.com/extensions/detail/mfibffkabmegiiapfkpdcpmhcigkncac?hl=zh-CN

 

*如果無法下載,請配以下host:

74.125.39.99 chrome.google.com

74.125.47.139 clients2.google.com

 

對喜歡看代碼的同學說的話,看到代碼別見怪。源碼很亂,第一次寫chrome插件沒很好得規劃

 


]]>
http://www.vzsio.live/article/Javascript/early-look-at-ie9.html <![CDATA[IE9 前瞻]]> puterjam@gmail.com(puterjam) Thu,19 Nov 2009 10:32:28 +0800 http://www.vzsio.live/default.asp?id=1015 雖然IE6在依然是很重要的釘子戶,但是我們不能放棄關注未來ie的變化。

IE9 的幾個關鍵字: 硬件渲染新的JS引擎,CSS,標準

Dean_PDC_4.png

大家期待已久的圓角也將支持了

 

不過這里最讓大家期待的是硬件渲染(視頻演示看這里)的支持。這可以讓瀏覽器性能提高一個很高的檔次。

關于新的腳本引擎可以用下圖來說明,這個測試是用著名的SunSpider來測試的

Dean_PDC_2.png

更多信息可以從官方博客得到 :P

]]>
http://www.vzsio.live/article/Javascript/firefox_3.6_beta.html <![CDATA[firefox 3.6 beta 發布]]> puterjam@gmail.com(puterjam) Wed,04 Nov 2009 11:52:52 +0800 http://www.vzsio.live/default.asp?id=1013 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/

]]>
http://www.vzsio.live/article/Javascript/eclipse_debug_chrome.html <![CDATA[使用 Eclipse 調試 Chrome 的腳本]]> puterjam@gmail.com(puterjam) Thu,06 Aug 2009 16:29:11 +0800 http://www.vzsio.live/default.asp?id=1009

Google Chrome 發布了基于 Eclispe 的調試工具  Chrome Developer Tools , 調試需要Chrome 3.0.189.0 以上版本。

這樣我們就可以使用Eclipse遠程調試Chrome的代碼了。

 

一點點準備工作:

 

1. 調試前我們的先安裝 Chrome Developer Tools .

 打開 Eclipse 新建一個 Update Site 就可以完成安裝

 http://chromedevtools.googlecode.com/svn/update/dev/

 

2. 開啟 Chrome 的遠程調試模式

執行chrome 帶以下參數

 

window:

chrome --remote-shell-port=9222

 

mac:

./Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-shell-port=9222

 

當然端口是可以配置的。

 

3.打開Eclipse添加一個調試配置

 

開始調試:

 

1.綁定進程
 
由于 Chrome 是多進程的瀏覽器,所以調試的時候,我們需要在Eclispe里綁定獨立的標簽進程。
 
 
 
 
2. 設置斷點
 
不知道什么原因,綁定后,無法直接暫停腳本運行,除非遇到腳本錯誤。不過我們可以給也腳本設置debug,讓調試器生效。
 
  
在代碼中設置 debugger 斷點
 
  
看程序停下來了,這樣就可以做調試了。

 

]]>
重庆时时彩规律大全
重庆时时彩骗局报道 3v重庆时时彩下载 重庆时时彩1-5球 重庆时时彩组六怎么玩能挣钱 重庆时时彩网上平台是假的吗 重庆时时彩app分析软件 新时时彩是怎么开奖的 重庆时时彩预测2 时时彩内部管理计划群 360重庆老时时彩走势图表 时时彩漏洞教程 重庆时时彩开奖的 重庆时时彩平台高返点 重庆时时彩平刷组六 玩重庆时时彩心态
四川金7乐玩法介绍 安徽11选5走势图今天 猴年四大生肖买彩票易中大奖 新疆11选5彩票开奖结果查询双色球 qq表情投稿赚钱 怎样买高频彩稳赚不赔 天天时时彩手机免费版 极速快3彩票 325捕鱼手机版官方网站