用攝像頭來改變網頁字體大小吧！

　　在“前端攻城師”的圈子里，響應式網頁設計早已成為熱門關鍵字。采用這種設計的網站能夠根據網頁的實際寬度變化，從而更換網站的排版，可以靈活地適應不同設備的屏幕寬度——換言之，采用響應式設計的網頁，能夠同時適應桌面、平板、手機三種設備對排版的不同要求，是一種一勞永逸的網頁設計方案。

　　說起來新的網頁規范確實極大地豐富了網頁的表現力，響應式網頁設計依賴新的 CSS3 規范。而 HTML5 如今仍然在進化當中，每年新增的 API 接口，增強了網頁與設備本身的交互，也為新的響應式網頁設計方法提供思路。

　　Marko Dugonjić 是流行比較網頁字體效果 Typetester 的設計者，也是積極、前衛的前端工程師。最近他利用攝像頭，設計出能夠根據人臉距離屏幕原因，從而改變字體大小的響應式網頁。

　　打開這個網頁，允許瀏覽器使用電腦的攝像頭之后，網頁下方就會出現一個“人臉識別”的窗口，當你的臉距離屏幕越近，網頁的字體就變得越小，反之，網頁字體就變得越大。測試過程中，我更換了兩個網絡，可能受網絡條件，圖像識別的影響(一個深色背景，一個淺色背景)，一個識別速度較慢，一個識別速度較快。

　　體驗過 Dugonjić 的前端實驗，忍不住在內心里面贊一句： “酷!”

　　將攝像頭與網頁結合起來，Dugonjić 是如何做到?

　　他使用了 Audun Mathias Øygard 去年 6 月開發出來的 JavaScript 類庫 headtrackr。這個類庫能夠實時跟蹤人臉以及頭部與電腦屏幕之間的位置，這個位置不局限于前后，還包括上下以及左右。前端工程師能夠利用 headtrakr 提供的位置信息，從而展開不同的交互方式。

　　作為技術示范，Audun 開發了幾個基于 headtrackr 的 DEMO，其中一個我們比較熟悉，是人機交互先鋒 Jonny Lee 五年前利用 Wii 的遙控器所制作的“交互電子白板”，同樣是基于“攝像頭”的交互創新。

　　經 Audun 介紹，headtrackr 使用了 JavaScript 類庫 ccv 來進行臉部識別，通過 3D 類庫 three.js 來識別臉部的正面、側面，并采用一些算法人臉與屏幕的距離。而整個 headtrackr 的技術基礎，是來自 webRTC，再挖深層次一點，整個技術的實現依賴于 HTML5 里新定義的 getUserMedia API。

　　原理圖

　　測定人臉與攝像頭距離的計算方式

　　因為 HTML5 進步太快，一些瀏覽器尚未完全支持，getUserMedia API 就是如此。從下方的表格中可以看出，目前支持 getUserMedia API 的瀏覽器，只有桌面版的 Chrome、Firefox、Opera，移動瀏覽器 Safari、Opera Mini、Android 4.2 的內置瀏覽器、BlackBerry 的瀏覽器均不支持該 API。因此 Dugonjić 基于人類識別的響應式網頁設計，估計仍然需要一段時間才能成為現實。

　　紅色代表不支持

　　不過，在試用 iPad mini 的過程中，我已經感受到不同設備的屏幕尺寸，對應用排版的影響，Dugonjić 的實驗不能說完全沒有實際意義。

　　在 iPad 上閱讀《商業周刊》的體驗是很好的，字體、段間距等等都調整得比較完美，但到了 7.9 英寸，1024 x 768 分辨率的屏幕上，《商業周刊》的字體就變小而且較為模糊，閱讀體驗下降。解決方案很簡單，就是加入調整字體大小的選項，或者采取響應式網頁設計的思路，自動匹配版式——如果利用移動設備的攝像頭，進行人臉識別，然后調整字體或者版式的大小，那么不光用戶省力，連前端工程師的工作也能變得省力。

　　Dugonjić 在 Mozilla 發布了一篇文章，詳細地描述了自己的設計過程，如果你對這個基于攝像頭的網頁交互感興趣，可以參考自己動手實驗一下。

　　“第六感”、Google 眼鏡、Kinect 等等，乃至 headtrackr 的出現，體現了“基于攝像頭的交互”這一趨勢，未來也許會有基于攝像頭更多的技術創新出現。

原文轉自：http://www.ifanr.com/248715