【O專欄】手機傾斜、搖一搖，新技術讓網頁能知道，不用透過特定 App

相信大家在玩智慧型手機時，都有接觸過一些需要用到手機本體來控制方向的遊戲。例如賽車遊戲，使用者直接把手機當方向盤使用，增加互動的樂趣。而現在瀏覽器也可以透過 <device>元素標籤，讓網頁抓取到使用者的裝置方向，與網友的裝置進行互動。

首先，我們來看一段 App 和行動裝置互動的影片：

▲Instapaper付費版示範影片，手機往後傾，畫面就向下捲。（http://vimeo.com/1540283）

加速度計妙用多

一般來說，網頁方向的應用就是大家所熟知的橫向模式（landscape）和直向模式（portrait）。當你把手機打橫或是擺直，網頁內容也隨之以橫向或是直向方式呈現出來了。試想，如果你要讓手機辨認它在X、Y、Z三度空間裡的座標位置，要怎麼辦到呢？

▲想要判讀手機目前的方位，就得經由感測器裡輸入的X、Y、Z軸相關訊息來得知。

答案就是借助手機上的加速度計（accelerometer）等感測裝置。至於加速度計在現實生活中有什麼應用？先從使用它的應用程式來看看。無論在 Apple 的 App store 或 Android 的 Google Play，都有一些非常棒的相關程式，比方Instapaper付費版，可以傾斜手機讓頁面上下捲動，讓閱讀本身出現新的操作方式。還有AccuPedo – Pedometer、AccuPedo-TE之類的計步器小程式，都是利用加速度計所產生的應用。

位移角度辨方位

制定網頁技術標準的全球資訊網協會W3C，將裝置方向標準化，這表示連網頁上也可以輕鬆使用這些技術，而且能夠跨平台。瀏覽器廠商也都會支持這個功能，其中Opera、Chrome、Safari、Firefox在手機上也已經推出了支援orientation功能的瀏覽器。透過符合標準的瀏覽器，開發人員可以利用以下的JavaScript函式取得裝置的方位資訊：

window.addEventListener('deviceorientation',update,true)

其中x軸（前後移動）以beta數值代表，y軸（左右移動）角度大小以gamma數值代表，z軸（裝置面向的角度）以alpha數值為代表，由於可以得知手機傾斜的方位，所以也可以當指南針來用。

▲藉由讀取裝置方向，手機網頁也可以變指南針。

網頁直接看視訊

以往，倘若要抓到本機攝影鏡所拍攝的即時影像，必須運用Flash之類的外掛程式才行。現在瀏覽器也可以直接辦到，在W3C中瀏覽器廠商達成了共識，以JavaScript API取代了以往的外掛程式。

▲只要開網頁就能看到攝影機的畫面。

用瀏覽器抓取攝影機影像很簡單，只要使用getUserMedia這個API就可以了。

<script type="text/javascript">
var video = document.getElementsByTagName('video')[0],
heading = document.getElementsByTagName('h1')[0];

if(navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback, errorCallback);
function successCallback( stream ) {
video.src = stream;
}
function errorCallback( error ) {
heading.textContent =
"An error occurred: [CODE " + error.code + "]";
}
} else {
heading.textContent =
"Native web camera streaming is not supported in this browser!";
}
</script>

試想，以後大家拿著手機就可以將影像透過網頁即時分享出來，你也不必安裝特定的視訊軟體，就可以隨時隨地在有網路的地方進行視訊會議，相當方便。目前Opera的手機版瀏覽器已經率先支援這項技術了。

未來應用更多元

有了各種可以和硬體裝置溝通的API，未來的網頁操作會更令人耳目一新，特別是編寫HTML5原生應用程式也有更多可能性。當然，新技術同時也會對舊的使用模式帶來衝擊。當網站可以擷取用戶裝置上的攝影鏡頭時，會產生個人隱私上的問題，W3C也正在積極解決。但可以預期的是，裝置方向和本機攝影鏡頭這兩項功能在不久的未來，將在網頁上有更多的運用。