HTML5 互 動 式 網 頁 應 用 HTML5 Interactive Web Applications 學 生 : 吳 庭 毓 張 裕 量 張 伯 彰 吳 庭 蓁 指 導 老 師 : 蔡 彥 興 國 立 聯 合 大 學 資 訊 工 程 學 系 苗 栗 市 恭 敬 里 聯 大 一 號 ystsai@nuu.edu.tw 摘 要 現 今 科 技 的 蓬 勃 發 展, 讓 行 動 裝 置 (Mobile device) 越 來 越 普 及, 使 用 行 動 載 具 玩 遊 戲 消 磨 時 間 或 尋 找 樂 趣 的 人 數 急 速 攀 升 但 無 論 是 網 頁 遊 戲 或 是 手 機 app 遊 戲, 對 著 冰 冷 的 螢 幕 都 會 讓 人 感 到 孤 單 所 以 若 能 在 遊 戲 內 添 加 和 朋 友 即 時 對 話 及 視 訊 的 功 能 或 許 能 改 變 現 今 遊 戲 潮 流 本 篇 文 是 製 作 網 頁 結 合 視 訊 社 群 遊 戲, 可 讓 朋 友 間 情 感 交 流 及 社 交 互 動 更 加 親 近, 而 且 在 Facetalk 的 過 程 中 可 增 加 更 多 變 數, 如 猜 測 對 方 心 思 關 鍵 字 : 行 動 裝 置 即 時 對 話 視 訊 Facetalk Abstract Today booming technology, let Mobile Device is becoming increasingly popular. Use the number of mobile carriers spend time playing games or looking for fun rapid rise. But whether it is a web app game or cell phone games, cold front screen will feel lonely.so if we add and friends in live chat and video games may alter the function of the current game trends. This text is a combination of video production web community game, allows emotional communication between friends and more intimate social interaction, and add more variables in the process Facetalk's like guessing the other thoughts. 目 的 製 作 此 作 品 的 主 要 目 的 為 增 加 遊 戲 的 交 誼 性 在 視 訊 聊 天 的 同 時, 配 合 網 頁 小 遊 戲 來 增 加 話 題 或 消 磨 時 間, 藉 此 提 升 朋 友 間 的 情 誼 交 流 研 究 方 法 藉 由 結 合 HTML5 以 及 WebRTC 兩 項 基 本 技 術, 達 到 使 用 行 動 App 運 行 網 頁 結 合 視 訊 之 技 術 1. HTML5 部 分 使 用 HTML5 撰 寫 Web App, 使 PC 端 及 手 機 端 使 用 者 皆 能 使 用 同 樣 的 App 應 用 並 在 螢 幕 解 析 度 方 面 加 入 適 應 性 設 計 (Responsive design), 調 整 在 不 同 解 析 度 上 的 行 動 裝 置 顯 示 效 果 2. WebRTC 部 分 WebRTC 可 在 網 頁 中 建 立 即 時 視 訊 串 流 本 機 建 立 Peer Connection 並 傳 送 Call Offer(in SDP) 到 接 收 端 必 須 先 連 接 本 機 串 流 視 訊, 再 來 接 收 端 的 Answer(in 12
SDP) 呼 叫 Peer Connection 的 startice() 函 式, 再 將 已 產 生 的 ICE Candidate 回 傳 以 進 行 連 結 架 構 動 作 : 下 樓 梯 2. 交 流 方 式 對 話 框 定 型 圖 文 麥 克 風 3. 社 群 ( 邀 請 ) URL 邀 請 大 廳 制 顯 示 在 線 用 戶 ( 同 意 框 [ 時 限 ] 可 設 密 碼 ) 圖 1 基 本 架 構 4. HTML5 技 術 : WebSocket WebRTC 中 國 象 棋 使 用 HTML5 及 JavaScript 來 實 作, Node.js 作 為 後 端 伺 服 器 圖 2 分 類 架 構 整 個 作 品 的 基 本 架 構 如 ( 圖 1) sever 伺 服 器 連 接 以 HTML5 為 框 架 的 client 端 伺 服 器, 並 加 入 WebRTC 及 WebSocket 兩 項 技 術 以 人 機 分 類 的 基 本 架 構 如 ( 圖 2) 使 用 者 能 使 用 的 功 能 是 玩 遊 戲 以 及 視 訊 聊 天, 技 術 層 面 則 使 用 了 Javascript HTML5 的 WebRTC WebSocket canvas 圖 3 流 程 圖 Interactive Web Applications 1. 遊 戲 策 略 : 中 國 象 棋 一 開 始 執 行 JS 程 式, 之 後 開 始 指 定 連 接 port 並 建 立 Socket 函 式, 開 始 遊 戲 之 後 依 照 遊 戲 規 則 進 行 處 理, 將 user 在 棋 盤 上 的 任 何 一 個 動 作 轉 換 為 JSON 字 串 並 送 到 13
sever 端 判 斷, 若 棋 局 沒 結 束 則 會 跳 回 規 則 重 新 處 理, 行 程 一 個 迴 圈, 否 則 結 束 該 連 線 遊 戲 畫 面 圖 7 下 樓 梯 : 初 始 畫 面 圖 4 象 棋 : 尚 未 連 線 之 畫 面 圖 8 下 樓 梯 : 遊 戲 大 廳 圖 5 象 棋 : 遊 戲 開 始 後 及 視 訊 之 畫 面 圖 9 下 樓 梯 : 遊 戲 房 間 圖 6 象 棋 : 當 連 線 中 斷 時 之 畫 面 圖 10 下 樓 梯 : 遊 戲 畫 面 14
WebRTC 基 本 架 構 1. 基 本 HTML <!DOCTYPE html> <html> <head> <script src="http://simplewebrtc.com/latest.js"></sc ript> </head> <body> <video height="300" id="localvideo"></video> <div id="remotesvideos"></div> </body> </html> 2. 建 立 WebRTC 物 件 var webrtc = new SimpleWebRTC({ // the id/element dom element that will hold "our" video localvideoel: 'localvideo', // the id/element dom element that will hold remote videos remotevideosel: 'remotesvideos', // immediately ask for camera access autorequestmedia: true ); 3. 等 待 另 一 位 加 入 // we have to wait until it's ready webrtc.on('readytocall', function () { // you can name it anything webrtc.joinroom('your awesome room name'); ); 15 WebRTC (Real-TimeCommunication) WebRTC 所 制 定 的 規 格 可 分 成 三 部 分 : 1. getusermedia, 可 取 得 用 戶 端 的 Web Camera 以 及 麥 克 風 資 源 從 設 備 輸 入 的 音 訊 與 視 訊, 會 經 由 Stream API 所 定 義 的 方 式 包 裝 2. PeerConnection, 用 來 建 立 本 機 與 瀏 覽 器 直 接 連 線 的 介 面 3. StreamMadia ( 媒 體 串 流 ), 可 透 過 這 個 介 面 來 建 立 連 線 傳 送 封 包, 達 到 在 對 方 的 瀏 覽 器 播 放 的 結 果 適 應 性 網 頁 設 計 ( Responsive Web Design ) 能 藉 著 改 變 網 頁 寬 度 來 支 持 各 種 流 動 電 子 產 品 和 家 用 PC 一 般 需 要 利 用 CSS3 中 的 Media Queries 來 監 測 目 前 螢 幕 的 最 大 寬 度, 然 後 選 取 適 合 螢 幕 大 小 的 網 頁 結 構 設 定 於 設 備 上 目 前 能 支 援 的 分 辨 率 能 到 1920 x 1080, 但 還 是 可 以 用 右 方 跟 右 下 方 的 拖 曳 工 具, 拖 到 超 出 螢 幕 分 辨 率 的 上 限 值 1. 優 點 : 一 開 發 成 本 比 Native App 低 : 因 為 Responsive Web design 通 常 可 以 直 接 用 Media Query 直 接 寫 搭 配 行 動 裝 置 的 CSS, 與 Native App 的 成 本 比 較 下 來 較 低
二 不 需 要 重 寫 HTML : Responsive Web Design 不 需 要 再 重 寫 另 一 份 HTML, 直 接 使 用 CSS 屬 性 來 對 不 同 裝 置 做 調 整 即 可 三 可 以 同 時 針 對 許 多 不 同 裝 置 分 別 調 整 : 通 常 做 都 是 利 用 CSS 的 Media Querues 方 法 來 實 現, 而 你 可 以 使 用 這 項 CSS 來 對 許 多 裝 置 做 設 計, 不 論 是 Smart Phone, Galaxy Note, ipad 或 是 Google Nexus 7 都 可 以 做 Responsive Web Design Responsive Web Design 實 作 方 式 1. CSS Image max-width (Flexible image) 調 整 圖 片 在 傳 統 PC 上, 圖 片 像 素 通 常 都 遠 大 於 在 Mobile 上 的 最 大 解 析 度, 所 以 如 果 沒 有 做 任 何 調 整, 在 看 圖 片 上 的 體 驗 會 比 較 差, 圖 片 突 出 瀏 覽 區 域 CSS 中 的 max-width 提 供 了 解 決 方 案, 這 個 屬 性 能 夠 讓 原 本 一 個 假 設 700px 的 圖 片, 在 手 機 中 顯 示 剛 剛 好 占 滿 手 機 的 寬 度, 而 高 度 就 隨 著 寬 度 做 等 比 例 縮 小 img { height: auto; max-width: 100%; 2. CSS3 Media Queries CSS3 Media Query 的 部 分,Media Queries 是 在 Responsive Web Design 中 最 容 易 被 提 起 也 最 重 要 的 一 個 部 分 使 用 Media Queries, 能 夠 讓 某 塊 區 域 在 PC 上 是 顯 示 的, 而 在 Mobile 中 是 隱 藏 的 而 這 個 判 斷 機 制 通 常 我 們 是 使 用 瀏 覽 的 寬 度 來 做 判 斷, 像 Mobile 的 寬 度 大 約 3 400 左 右, 而 傳 統 PC 的 寬 度 解 析 大 概 都 是 1366 以 上, 利 用 這 個 差 異 就 可 以 寫 出 符 合 不 同 寬 度 的 Media Queries 來 // 在 PC 上 的 顯 示.box { width: 500px; // Media Query, 當 寬 度 < 767px 時 載 入 下 面 這 段 CSS : @media (max-width: 767px) {.box { width: 100%; 結 論 我 們 的 設 計 理 念 很 簡 單, 以 前 電 腦 不 發 達 的 時 候, 大 家 都 聚 在 一 起 玩 樂 那 個 畫 面 至 今 被 冰 冷 的 平 板 手 機 取 代 了 所 以 為 了 找 回 以 前 的 感 覺, 一 個 擁 有 兩 款 遊 戲 的 網 頁, 配 上 一 個 視 訊 畫 面, 然 後 使 用 麥 克 風 來 對 話 的 情 景 漸 漸 從 腦 海 中 浮 現, 而 在 實 作 的 過 程 中, 這 個 畫 面 越 來 越 清 晰 當 在 比 賽 下 樓 梯, 自 己 在 著 急 的 操 控 人 物 時, 看 到 畫 面 中 的 對 方 也 是 用 同 樣 的 表 情 在 玩 下 樓 梯 比 象 棋 時, 對 方 可 能 因 諸 多 原 因 無 法 親 自 在 自 己 面 前 下 棋, 但 是 卻 能 邊 玩 邊 看 到 對 方 苦 思 的 表 情, 彷 彿 他 就 在 面 前 一 樣 未 來 可 延 製 成 外 掛, 附 掛 在 各 遊 戲 上 參 考 文 獻 [1] Making WebRTC Simple with conversat.io https://hacks.mozilla.org/2013/03/making-w ebrtc-simple-with-conversat-io/ 16