使用者介面與設計

使用者使用本論文特別開發的 Adobe Flash 程式作為視訊連線活動的客戶端，選用 Flash 的原因主要有：

(1) Flash 被廣泛應用在各大小網站中，使用者對 Flash 也相當熟悉，不論是在網頁上 玩遊戲或是炫麗的動畫效果，許多都來自 Flash。有些瀏覽器有內建 Adobe Flash Player 如 Google Chrome 5.0 以上，即使沒有內建，遇到需要載入 Flash 時也會通 知使用者要安裝或更新。因此符合本平台希望能減少使用者進入門檻的目的。

(2) Flash 對於網路影音傳輸格式──串流媒體（Streaming media）、RTMP 通訊協定與 串流媒體伺服器的連接和影音擷取裝置控制有完整的 API 支援。

10

3.1.3.1 開始視訊連線活動

在本平台視訊連線活動中，依有無發佈影像權力將連線身分分成兩種：

(1) 成員(Member)：需要設定網路攝影機和麥克風的使用者，可以參與語音通話和取得 影像發佈權，亦可在主畫面做標誌，讓所有房間內的使用者都看的到。另外，以 Client-Server 角度定義具有發佈權的成員稱為「成員發佈端」；不具發佈權的成員 稱為「成員接收端」。

(2) 訪客（guest）：不具任何權限，僅能接收影像和聲音觀看。僅能加入成員建立的房 間觀看。另外，以 Client-Server 角度定義訪客稱為「訪客接收端」

使用者進入本平台網站，進行視訊連線活動，首先會看到 flash 程式在瀏覽器中被 啟動，接著檢查平台的三個伺服器運作情況如圖 3-2。

圖 3-2 客戶端 Flash 程式─三伺服器運作狀態檢查介面

當三伺服器皆正常運作，才會到下一個頁面，否則會被卡住在檢查頁面被要求重新進行 連線。接著依照使用者的身分是成員或訪客而進入不同頁面，成員使用者會進入裝置設 定介面如圖，可以設定使用的網路攝影機、麥克風等裝置，若是成員發佈端，可以選擇 即將要發佈串流的攝影機（紅框位置），輸入裝置設定介面如圖 3-3，待設定完成後進 入主畫面；訪客使用者則無此設定介面，而是直接進入主畫面。

11

12

圖 3-5 成員接收端的主畫面 圖 3-6 訪客接收端的主畫面

不同身分的使用者看到的背景色會不同：成員發佈端為綠色（圖 3-4）、成員接收端為 黃色（圖 3-5）、訪客接收端為藍色（圖 3-6），方便使用者區分現在的身分。

可以比較以上三圖發現不同身分的操作介面不盡相同：

(1) 成員發佈端具有所有區域的功能

(2) 成員接收端的攝影機參數控制區功能被鎖住，原因是接收端不具發佈權，不能發佈 視訊影像。

(3) 訪客接收端僅剩下視訊畫面區和資訊區，其餘區域皆無法使用。

各區域的主要功能詳細說明如下：

(a) 視訊畫面區：所有活動內的客戶端 Flash 程式都會開到相同的視訊畫面，但是視訊 來源不盡相同。發佈端的視訊畫面來自自己電腦的視訊擷取裝置，而成員接收端和 訪客接收端皆來自影音伺服器的影音串流，這個影音串流是由發佈端負責發送產生 的。

(b) 資訊區：顯示目前活動內的狀態

(c) 畫筆控制區：僅成員使用者（含發佈端和接收端）可以使用。讓使用者控制畫筆顏 色粗細和切換標誌類型，在視訊畫面區進行畫筆標誌，所有活動內的成員和訪客都 能看到。詳細介紹在 3.4 節。

(d) 攝影機參數控制區：僅發佈端能使用，可以控制視訊擷取裝置（網路攝影機、虛擬

13