Yaze

實踐大學 2016 人機互動課程專案 - AR 相機 (APP Client 端)

Unity + Vuforia AR 雲端相簿應用

2016-03-26

實踐大學 2016 人機互動課程專案 - AR 相機 (APP Client 端)

專案簡介

這是實踐大學 2016 人機互動技術與應用課程的完整專案範例，展示如何使用 Unity + Vuforia 開發 AR 相機 APP，實現拍照、截圖、上傳雲端的完整功能。

專案特色

目標： 開發一個 AR 相機 APP，拍攝 AR 畫面並上傳到雲端相簿

技術架構：

Unity + Vuforia AR → 截圖功能 → HTTP 上傳 → PHP Server → MySQL 資料庫

核心功能：

系統架構

Client-Server 架構

這是一個完整的 Client-Server 架構專案：

┌─────────────────────────────────────┐
│     AR Camera APP (Client 端)       │
│  Unity + Vuforia + NGUI + C#        │
│                                     │
│  1. AR 圖像辨識                      │
│  2. 3D 模型疊加                      │
│  3. 截圖功能                         │
│  4. HTTP POST 上傳                   │
└────────────┬────────────────────────┘
             │ HTTP (WWWForm)
             ↓
┌─────────────────────────────────────┐
│    Cloud Album (Server 端)          │
│    PHP + MySQL + Apache             │
│                                     │
│  1. 接收圖片上傳                     │
│  2. 儲存到 MySQL (BLOB)              │
│  3. 圖片檢視與管理                   │
└─────────────────────────────────────┘

核心功能實作

1. AR 擴增實境

使用 Vuforia SDK 實現圖像辨識：

2. 截圖功能

實作方式： 使用 ScreenshotButton.cs 腳本

// 關鍵程式碼
void buttonClick(GameObject button){
    ScreenshotManager.Save("temp", "MyScreenshots", true);
}

void readyToUpload(){
    unixTimestamp = (Int32)(DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1))).TotalSeconds;
    StartCoroutine(Upload());
}

功能特點：

3. 雲端上傳功能

HTTP POST 上傳實作：

IEnumerator Upload(){
    // 讀取截圖檔案
    byte[] bytes = File.ReadAllBytes(ScreenshotManager.LastSavedFilePath);

    // 建立 WWWForm
    WWWForm form = new WWWForm();
    form.AddField("timeid", unixTimestamp);
    form.AddBinaryData("fileToUpload", bytes, filename, "image/png");

    // 上傳到 Server
    WWW www = new WWW(uploadURL, form);
    yield return www;
}

上傳機制：

4. NGUI 使用者介面

UI 元件：

互動設計：

// NGUI 事件處理
UIEventListener.Get(button).onClick = buttonClick;

技術亮點

1. 完整的 AR 拍照流程

AR 場景渲染 → 按下拍照按鈕 → 截圖 → 儲存本地 → 上傳雲端 → 顯示結果

2. 穩定的網路上傳

3. Unity 與 Web 整合

4. 模組化設計

開發環境

硬體需求

軟體需求

專案結構

Assets/
├── Scripts/
│   ├── ScreenshotButton.cs      # 截圖與上傳
│   ├── URLButtonScript.cs       # URL 按鈕
│   ├── ButtonScript.cs          # 通用按鈕
│   └── CameraFocus.cs           # 相機對焦
├── Vuforia/                     # Vuforia SDK
└── NGUI/                        # UI 系統

學習重點

1. AR 開發技能

2. Unity 網路通訊

3. 檔案處理

4. UI 互動設計

5. 錯誤處理

應用場景

這個專案可以應用在：

專案資源

GitHub 開源專案： https://github.com/yazelin/usc2016hci_ARCamera

Server 端專案： 雲端相簿 (Web Server 端)

相關課程：

專案資訊

教學UnityAndroidARVuforiaNGUI