國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
3.2 系統實做
3.2.1 硬體裝置
因應在家中觀影的需求，另外考慮到每個家庭所能擁有的基本設備，本研究選擇 一台可上網的電腦，搭配一台可架於螢幕上方的的小型視訊攝影機為本系統裝置。
攝影機捕捉螢幕前的影像，將影像資訊交由電腦導入電腦視覺技術處理，利用影 像偵測與辨識技術抓取視訊畫面當中人臉的區塊，然後驅使所建立好的3D 虛擬 環境做出對應人臉移動的視野轉換，讓使用者感覺電腦螢幕上之3D 視野是會隨 著使用者頭部移動而有所改變，彷彿在看真實的物體一般。另一方面，非接觸式 的設備相對於適合運用在人機互動介面上，除了操控直覺，設備不易損壞外，本 裝置跟現有的虛擬環境或環繞式3D Cave 相比，所需之硬體設備相對簡易低廉，
可以有效降低人機介面硬體裝置的成本。
圖 十九：利用前置的小型攝影機捕捉人臉位置示意圖
圖 二十：內容會因使用者的動作而改變不同視角與片段 40
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
3.2.2 軟體開發
軟體開發部份，此系統希望在不須繁複的前置動作、也不須安裝額外軟體的前提 下進行體驗，讓一般使用者在使用螢幕觀看影片時的操作流程不會跟平常有太大 的差異，因此我們選擇能夠跨平台的 HTML5 網頁技術，能讓系統直接在瀏覽器 上運行。此外，WebGL 是一項使用 JavaScript API 呈現 3D 電腦圖形的技術，有別 於過往需加裝瀏覽器外掛程式，透過 WebGL 的技術，只需要編寫網頁程式語言 即可實現3D 圖像的展示。
系統一開始透過HTML5 所提供的 getUserMedia API 截取視訊畫面，經由 MIT 所釋出的開源程式碼clmtrackr (https://github.com/auduno/clmtrackr) 辨識人臉和 影像分析(clm 全文為 Constrained Local Model，是人臉辨識中較常用的演算法之 一，通過利用局部模型在特徵點附近搜索確定每個特徵點位置，並結合形狀擬合，
自動對圖像進行校正。)，定位出人臉的位置之後，接著從資料庫選擇對應的影片 片段，在WebGL 所建立的 3D 空間中輸出，我們讓影像透過串流呈現在一個位於 3D 空間中的平面上，這塊平面能即時接收人臉的位置資訊而改變其本身所在位 置，為了讓影像在畫面上平移的效果更接近人眼觀看真實世界環境的感覺，我們 多加了一個參數，讓使用者移動的幅度越大越偏離中央時，能看到的角度範圍也 越大。此外，在瀏覽器的右上角我們加上了一個輕量化的GUI 控制介面，方便施 測者能夠隨時檢查視訊畫面和數值是否正確，並且在正式實驗時可以隱藏起來。
41
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
圖 二十一：系統流程圖
圖 二十二：系統畫面
42
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University