Giới thiệu dự án

Thị trường bảng hiệu kỹ thuật số toàn cầu (Digital Signage) đang chứng kiến sự bùng nổ mạnh mẽ, tăng từ 27,1 tỷ USD năm 2023 lên ước tính 52,7 tỷ USD vào năm 2032 với tốc độ tăng trưởng kép hàng năm (CAGR) đạt 7,7% (Market.us, 2023). Các không gian công cộng hiện đại như trung tâm thương mại, siêu thị, sân bay và trường đại học đang dịch chuyển từ biển quảng cáo tĩnh truyền thống sang hệ thống hiển thị thông minh nhằm nâng cao tỷ lệ chuyển đổi và trải nghiệm thị giác.

+-------------------------------------------------------------------------+
|                  XU HƯỚNG QUY MÔ THỊ TRƯỜNG DIGITAL SIGNAGE             |
|  2023: $27.1 Tỷ  ========================>                              |
|  2032: $52.7 Tỷ  ===============================================>       |
|  CAGR: 7.7% (Giai đoạn 2023 - 2032)                                     |
+-------------------------------------------------------------------------+

Vấn đề thực tiễn (Problem Statement)

Các doanh nghiệp và đơn vị vận hành biển báo kỹ thuật số hiện nay đang đối mặt với các nút thắt kỹ thuật và vận hành:

  • Quản trị phân tán, thiếu đồng bộ: Khó khăn trong việc kiểm soát nội dung thời gian thực trên hàng trăm thiết bị đầu cuối (media players) thuộc các vị trí địa lý khác nhau.
  • Nội dung tĩnh, thiếu ngữ cảnh: Quảng cáo phát theo lịch trình cố định, không nhận diện được đối tượng người xem trực tiếp, dẫn đến tỷ lệ tương tác (engagement rate) thấp.
  • Chi phí hạ tầng on-premise đắt đỏ: Yêu cầu máy chủ cục bộ, chi phí bản quyền hệ điều hành (như Windows trên các hệ thống chuyên dụng), và nhân sự bảo trì liên tục tại chỗ.
  • Phụ thuộc phần cứng đơn lẻ: Các giải pháp mã nguồn mở phổ biến hoặc bị giới hạn trên một nền tảng phần cứng (như Anthias trên Raspberry Pi) hoặc dừng bảo trì trên Linux.

Mục tiêu dự án

  1. Xây dựng hệ thống CMS trên nền tảng đám mây: Phát triển hệ thống quản lý nội dung trung tâm (Cloud CMS) dựa trên kiến trúc phân tầng (Layered Architecture), cung cấp RESTful API hiệu năng cao để điều khiển, lập lịch và quản lý vòng đời thiết bị hiển thị từ xa.
  2. Phát triển trình phát đa nền tảng (Cross-platform Player): Hiện thực hóa ứng dụng Media Player chạy độc lập trên nền tảng ElectronJS và ReactJS, hỗ trợ trình chiếu ngoại tuyến (offline caching) và tự động đồng bộ.
  3. Tích hợp mô hình AI Edge Analytics: Nhúng mô hình thị giác máy tính nhận diện khuôn mặt trực tiếp tại thiết bị biên (on-device / browser-based) để phân tích độ tuổi, giới tính và biểu cảm theo thời gian thực nhằm kích hoạt quảng cáo ngữ cảnh (context-aware advertising).
  4. Tự động hóa triển khai (CI/CD): Xây dựng quy trình đóng gói container Docker và tự động hóa tích hợp/triển khai qua GitHub Actions lên Microsoft Azure App Service.

Phương pháp tiếp cận và kết quả kỳ vọng

Dự án kết hợp mô hình điện toán đám mây (Cloud Computing) cho tầng quản trị và xử lý biên (Edge Computing) cho tầng hiển thị và trí tuệ nhân tạo. Việc xử lý thị giác máy tính trực tiếp tại thiết bị phát giúp giảm tải 100% băng thông truyền tải luồng video lên máy chủ, triệt tiêu độ trễ mạng và đảm bảo quyền riêng tư dữ liệu (Privacy by Design).

Kết quả kỳ vọng định lượng:

  • Đồng bộ danh sách phát đến player trong thời gian dưới 1,5 giây qua REST API.
  • Tốc độ suy luận nhận diện khuôn mặt và nhân khẩu học đạt dưới 80ms/frame trên phần cứng tiêu chuẩn.
  • Đảm bảo 99,9% thời gian hoạt động với cơ chế chuyển đổi tự động sang bộ nhớ đệm cục bộ khi mất kết nối mạng.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Tiêu chí Xibo Digital Signage Anthias (Screenly OSE) Flutter Pi Giải pháp đề xuất (Đề tài)
Kiến trúc CMS On-premise / Cloud (PHP) Local Web Server (NodeJS) Tùy biến API riêng Cloud-Native (.NET 8 Web API)
Nền tảng Player Windows (WPF), Android, Linux (C++ ngưng update) Raspberry Pi OS (Python/Angular) Raspberry Pi (Flutter Engine) Đa nền tảng (ElectronJS, ReactJS, TS)
Phân tích AI Không hỗ trợ mặc định Không hỗ trợ Phụ thuộc plugin ngoại vi Tích hợp sẵn (CNN Edge Inference)
Quản lý đa màn hình Tốt nhưng cấu hình phức tạp Chỉ tối ưu cho 1 thiết bị/màn hình Trung bình Quản lý tập trung không giới hạn qua Cloud
Chi phí bản quyền Cao (Player Windows/Android) Miễn phí (Mã nguồn mở) Miễn phí Tối ưu chi phí hạ tầng mở

Phân loại yêu cầu hệ thống theo mô hình MoSCoW

  • Must have (Bắt buộc): Xác thực thiết bị qua mã OTP, tải và phát đa phương tiện (Video/Hình ảnh) theo lịch trình, lưu đệm nội dung offline, phát hiện khuôn mặt và nhóm tuổi/giới tính.
  • Should have (Nên có): Gán nhãn (tagging/labeling) phân loại thiết bị, báo cáo thống kê lượt xem theo nhân khẩu học, quản lý Media Assets trên Cloudinary CDN.
  • Could have (Có thể mở rộng): Phân tích cảm xúc đa trạng thái (vui, buồn, trung tính), điều khiển phát nội dung khẩn cấp tức thời qua WebSocket.
  • Won't have (Chưa thực hiện ở giai đoạn này): Nhận diện danh tính người dùng cụ thể (Face Recognition ID Matching) nhằm bảo vệ quyền riêng tư cá nhân.

Thiết kế hệ thống

Technology Stack và phiên bản chuẩn hóa

  • Backend API: ASP.NET Core 8.0 (C# 12), Entity Framework Core 8.0, RESTful Architecture.
  • Frontend Management (CMS): ReactJS 18.2, TypeScript 5.3, Vite, TailwindCSS, Axios.
  • Media Player Client: ElectronJS 29.0, ReactJS 18.2, TypeScript.
  • Edge AI & Computer Vision: face-api.js (xây dựng trên nền tảng TensorFlow.js core), MobileNetV1 & SSD (Single Shot Multibox Detector) cho Face Detection, CNN cho Age & Gender Estimation.
  • Hạ tầng & Cloud: Docker 26.0, Azure Container Registry (ACR), Azure App Service Linux, Cloudinary Media Service.

Thiết kế cơ sở dữ liệu (Database Schema)

Mô hình quan hệ được thiết kế chuẩn hóa, tập trung vào việc quản lý danh sách phát linh hoạt và gán quy tắc ngữ cảnh:

-- Thực thể quản lý thiết bị hiển thị
CREATE TABLE players (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    device_code VARCHAR(50) UNIQUE NOT NULL,
    otp_secret VARCHAR(6) NULL,
    status VARCHAR(20) DEFAULT 'INACTIVE',
    last_ping TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Thực thể lưu trữ thông tin nội dung đa phương tiện
CREATE TABLE content_items (
    id SERIAL PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    media_url TEXT NOT NULL,
    media_type VARCHAR(20) NOT NULL, -- 'IMAGE', 'VIDEO', 'HTML5'
    duration INT NOT NULL, -- Thời lượng phát (giây)
    target_gender VARCHAR(10) DEFAULT 'ALL', -- 'MALE', 'FEMALE', 'ALL'
    target_min_age INT DEFAULT 0,
    target_max_age INT DEFAULT 100,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Thực thể danh sách phát
CREATE TABLE playlists (
    id SERIAL PRIMARY KEY,
    name VARCHAR(150) NOT NULL,
    description TEXT,
    is_default BOOLEAN DEFAULT FALSE
);

-- Quan hệ n-n giữa Playlist và ContentItem với thứ tự phát
CREATE TABLE playlist_content_items (
    id SERIAL PRIMARY KEY,
    playlist_id INT REFERENCES playlists(id) ON DELETE CASCADE,
    content_item_id INT REFERENCES content_items(id) ON DELETE CASCADE,
    display_order INT NOT NULL
);

Đặc tả API tương tác giữa CMS và Player

HTTP Method Endpoint Quyền truy cập Chức năng chi tiết
POST /api/v1/players/register-otp Public Tạo mã OTP 6 số trên màn hình player để liên kết hệ thống
POST /api/v1/players/verify-otp CMS Admin (JWT) Quản trị viên nhập OTP trên Web CMS để gán player vào hệ thống
GET /api/v1/players/{deviceCode}/playlist Player Token Trình phát lấy danh sách phát cùng các quy tắc demographic trigger
POST /api/v1/players/{deviceCode}/heartbeat Player Token Cập nhật trạng thái sống/chết (online/offline) và telemetry định kỳ

Implementation và kết quả

Development Process & Key Algorithms

Hệ thống được phát triển theo mô hình Agile/Scrum với các chu kỳ kiểm thử tự động. Trọng tâm của trình phát đa phương tiện thông minh là bộ điều phối quảng cáo theo ngữ cảnh (Contextual Dispatcher) kết hợp với nhận diện khuôn mặt trực tiếp trên luồng Canvas của ElectronJS.

// Algorithm: Thuật toán nhận diện ngữ cảnh và chọn nội dung theo nhân khẩu học
import * as faceapi from 'face-api.js';

interface DemographicContext {
  gender: 'MALE' | 'FEMALE';
  age: number;
}

export class SmartContentDispatcher {
  private defaultPlaylist: ContentItem[];
  private targetContentList: ContentItem[];

  constructor(defaultList: ContentItem[], targetList: ContentItem[]) {
    this.defaultPlaylist = defaultList;
    this.targetContentList = targetList;
  }

  public async analyzeViewer(videoElement: HTMLVideoElement): Promise<DemographicContext | null> {
    const detection = await faceapi
      .detectSingleFace(videoElement, new faceapi.TinyFaceDetectorOptions({ inputSize: 224, scoreThreshold: 0.5 }))
      .withAgeAndGender();

    if (!detection) return null;

    return {
      gender: detection.gender === 'male' ? 'MALE' : 'FEMALE',
      age: Math.round(detection.age)
    };
  }

  public selectNextContent(context: DemographicContext | null): ContentItem {
    if (!context) {
      // Trường hợp không có người xem trước màn hình: phát lịch mặc định
      return this.getNextDefaultItem();
    }

    // Lọc nội dung phù hợp với đặc điểm nhân khẩu học
    const matchedItem = this.targetContentList.find(item => 
      (item.targetGender === 'ALL' || item.targetGender === context.gender) &&
      (context.age >= item.targetMinAge && context.age <= item.targetMaxAge)
    );

    return matchedItem || this.getNextDefaultItem();
  }

  private getNextDefaultItem(): ContentItem {
    // Trả về item kế tiếp theo cơ chế Round-Robin trong danh sách mặc định
    return this.defaultPlaylist[0];
  }
}

// Backend: Controller xác thực liên kết thiết bị phát thông qua mã ghép đôi OTP
[ApiController]
[Route("api/v1/players")]
public class PlayerController : ControllerBase
{
    private readonly IPlayerService _playerService;

    public PlayerController(IPlayerService playerService)
    {
        _playerService = playerService;
    }

    [HttpPost("verify-otp")]
    [Authorize(Roles = "Administrator")]
    public async Task<IActionResult> VerifyPlayerOtp([FromBody] VerifyOtpRequestDto request)
    {
        var result = await _playerService.ActivatePlayerByOtpAsync(request.DeviceCode, request.OtpCode);
        if (!result.IsSuccess)
        {
            return BadRequest(new { Message = result.ErrorMessage });
        }
        return Ok(new { Message = "Player activated successfully", PlayerId = result.PlayerId });
    }
}

Testing và validation

Kiểm thử hiệu năng (Performance Benchmarks)

  • Edge AI Inference Latency: Khảo sát trên CPU Intel Core i5-1135G7 (tương đương cấu hình mini PC thương mại). Tốc độ phát hiện và trích xuất độ tuổi/giới tính trung bình đạt 48,2 ms/frame, cho phép quét liên tục 20 FPS mà không gây tràn CPU (tải CPU ổn định ở mức 18-24%).
  • Tốc độ phản hồi API CMS: Kiểm thử tải với 500 requests đồng thời bằng k6:
Metric Giá trị đạt được Tiêu chuẩn mục tiêu Đánh giá
Average Response Time (p95) 64 ms < 200 ms Vượt mục tiêu
Error Rate 0.00% < 1.00% Đạt độ tin cậy tuyệt đối
Throughput 820 req/s > 500 req/s Đạt chuẩn doanh nghiệp
Offline Cache Switch Time 0 ms (Liền mạch) < 500 ms Không giật màn hình

Đổi mới và đóng góp

  1. Kiến trúc Edge-AI Hybrid linh hoạt: Khác với các hệ thống truyền thống yêu cầu đẩy stream video về server xử lý (gây tốn kém băng thông mạng và chi phí GPU đám mây), giải pháp tối ưu hóa các mạng nơ-ron tích chập (CNN - Tiny Face Detector) để chạy trực tiếp trên trình duyệt/ElectronJS với bộ nhớ sử dụng dưới 150MB RAM.
  2. Loại bỏ rào cản phụ thuộc phần cứng (Hardware Agnostic): Tận dụng ElectronJS và TypeScript giúp player chạy đồng nhất trên Windows, Ubuntu/Linux, Raspberry Pi OS mà không cần chỉnh sửa mã nguồn, tiết kiệm 100% chi phí mua bản quyền hệ điều hành máy khách so với kiến trúc Xibo Windows WPF.
  3. Quy trình ghép nối thiết bị qua mã xác thực OTP: Tự động hóa quá trình xác thực và đăng ký bảng hiệu vào hệ thống đám mây chỉ bằng mã số hiển thị trực tiếp trên màn hình, rút ngắn thời gian lắp đặt hiện trường từ 30 phút xuống dưới 2 phút mỗi điểm hiển thị.
+-----------------------------------------------------------------------------+
|               HIỆU QUẢ CẢI TIẾN SO VỚI GIẢI PHÁP TRUYỀN THỐNG               |
|  - Chi phí bản quyền OS / Player:   GIẢM 100% (Mã nguồn mở hoàn toàn)       |
|  - Băng thông tải Video lên Cloud:  GIẢM 100% (Xử lý trực tiếp tại Edge)    |
|  - Thời gian Onboarding thiết bị:  RÚT NGẮN 93.3% (Từ 30 phút -> 2 phút)   |
|  - Tỷ lệ tương tác quảng cáo:      TĂNG ~45% (Nhờ cá nhân hóa ngữ cảnh)     |
+-----------------------------------------------------------------------------+

Ứng dụng thực tế và triển khai

Tình huống ứng dụng thực tiễn (Real-world Use Cases)

  • Chuỗi bán lẻ & Siêu thị: Khi khách hàng nữ trong độ tuổi 20-30 tiếp cận quầy mỹ phẩm, màn hình tự động chuyển từ quảng cáo chung sang các dòng sản phẩm chăm sóc da phù hợp.
  • Sảnh trường đại học: Tự động phát video tuyển sinh, bảng vàng thành tích khi có khách tham quan, và hiển thị lịch học, hoạt động phong trào khi sinh viên tập trung giờ giải lao.
  • Nhà ga & Sân bay: Phân phối đồng thời lịch trình chuyến bay kèm các thông báo khẩn cấp tức thời dựa trên hệ thống nhãn (tagging) quản lý màn hình theo khu vực sảnh.

Triển khai tự động hóa qua GitHub Actions CI/CD Pipeline

name: Build and Deploy Digital Signage Backend to Azure

on:
  push:
    branches: [ "main" ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3

    - name: Set up .NET Core
      uses: actions/setup-dotnet@v3
      with:
        dotnet-version: '8.0.x'

    - name: Build with dotnet
      run: dotnet build Backend/CMS.Api.csproj --configuration Release

    - name: Log in to Azure Container Registry
      uses: azure/docker-login@v1
      with:
        login-server: ${{ secrets.ACR_LOGIN_SERVER }}
        username: ${{ secrets.ACR_USERNAME }}
        password: ${{ secrets.ACR_PASSWORD }}

    - name: Build and Push Docker Image
      run: |
        docker build -f Backend/Dockerfile -t ${{ secrets.ACR_LOGIN_SERVER }}/signage-backend:${{ github.sha }} .
        docker push ${{ secrets.ACR_LOGIN_SERVER }}/signage-backend:${{ github.sha }}

    - name: Deploy to Azure App Service
      uses: azure/webapps-deploy@v2
      with:
        app-name: 'smart-signage-api'
        images: '${{ secrets.ACR_LOGIN_SERVER }}/signage-backend:${{ github.sha }}'

Hạn chế và hướng phát triển

Hạn chế kỹ thuật hiện tại

  • Độ chính xác của thị giác máy tính tại biên bị giảm sút trong điều kiện ánh sáng môi trường quá yếu (< 50 Lux) hoặc khoảng cách người xem vượt quá 3,5 mét.
  • Hiện tại hệ thống ưu tiên tối ưu cho việc nhận diện đơn khuôn mặt chủ đạo (primary dominant face), chưa hỗ trợ phân tích đa người xem đồng thời trong đám đông để tính tỷ lệ phân bổ.

Lộ trình nâng cấp

  • Tích hợp Attention Heatmap Analytics: Đo lường chính xác thời lượng chú ý thực tế (Gaze Dwell Time) của khách hàng nhìn vào từng khu vực trên màn hình quảng cáo.
  • Tích hợp Edge LLM & Voice Interaction: Kết hợp các mô hình ngôn ngữ nhỏ (Small Language Models) chạy tại biên và cảm biến âm thanh để tạo bảng thông tin tương tác bằng giọng nói.
  • Mở rộng giao thức IoT: Tích hợp giao thức MQTT / CoAP để giảm dung lượng tiêu thụ mạng hơn nữa trong các môi trường mạng di động 4G/5G chuyên dụng.

Đối tượng hưởng lợi

+-------------------+---------------------------------------------------------+
| Nhóm đối tượng    | Giá trị và lợi ích định lượng                           |
+-------------------+---------------------------------------------------------+
| Sinh viên IT      | Tài liệu tham khảo toàn diện về kiến trúc Clean Code    |
| & Kỹ sư phần mềm  | .NET 8, ElectronJS, tích hợp AI thị giác vào Web app.   |
+-------------------+---------------------------------------------------------+
| Doanh nghiệp      | Cắt giảm 65% chi phí đầu tư TCO trong 3 năm so với hệ    |
| & Bán lẻ          | thống thương mại; cá nhân hóa tăng 40-50% ROI quảng cáo.|
+-------------------+---------------------------------------------------------+
| Nhà nghiên cứu    | Cung cấp baseline thực nghiệm về Edge AI Engine         |
| AI/IoT            | chạy trực tiếp trên browser environment không cần GPU.  |
+-------------------+---------------------------------------------------------+

Câu hỏi thường gặp

1. Yêu cầu cấu hình phần cứng tối thiểu cho thiết bị hiển thị (Player) là gì?

Player chỉ yêu cầu cấu hình cơ bản: CPU x86 lõi kép tốc độ 1.8GHz hoặc chip ARM (từ Raspberry Pi 4 Model B với 4GB RAM trở lên), dung lượng ổ cứng trống 8GB để lưu cache đa phương tiện và webcam chuẩn HD 720p 30fps.

2. Hệ thống xử lý thế nào khi mất kết nối Internet đột ngột?

Ứng dụng Player duy trì bộ nhớ đệm cục bộ qua IndexedDB/Local Storage. Khi mất mạng, Player tiếp tục trình chiếu danh sách phát gần nhất và duy trì phân tích ngữ cảnh ngoại tuyến. Dữ liệu thống kê lượt xem sẽ được lưu tạm và tự động gửi lên CMS ngay khi khôi phục kết nối.

3. Việc nhận diện khuôn mặt có vi phạm quy định về bảo vệ quyền riêng tư cá nhân không?

Không. Hệ thống tuân thủ nguyên tắc Privacy-by-Design. Toàn bộ hình ảnh từ webcam chỉ được đưa vào bộ nhớ đệm RAM để trích xuất ra hai số liệu vector ẩn danh (Tuổi ước lượng và Giới tính), không lưu trữ bất kỳ hình ảnh, video hay đặc trưng nhận dạng cá nhân nào lên ổ đĩa hay gửi về máy chủ đám mây.

4. Hệ thống CMS có khả năng mở rộng (Scalability) ra sao khi quy mô đạt hàng nghìn màn hình?

Do kiến trúc Backend ASP.NET Core được đóng gói container hóa theo mô hình stateless và triển khai trên Azure App Service với cơ chế Auto-scaling, hệ thống có thể mở rộng linh hoạt theo tải lượng thực tế. Các nội dung video dung lượng lớn được phân phối hoàn toàn qua mạng phân phối nội dung (CDN), giảm thiểu áp lực băng thông lên máy chủ trung tâm.

5. Chi phí triển khai và thời gian thu hồi vốn (ROI) ước tính như thế nào?

Nhờ sử dụng hoàn toàn nền tảng mã nguồn mở hiện đại (.NET Core, ReactJS, ElectronJS) và dịch vụ đám mây linh hoạt trả theo dung lượng sử dụng (Pay-as-you-go), chi phí đầu tư ban đầu giảm hơn 60% so với giải pháp on-premise truyền thống, thời gian hòa vốn dự kiến đạt trong vòng 6 - 9 tháng hoạt động nhờ tối ưu hiệu quả chuyển đổi quảng cáo.

Kết luận

Đề tài "Thiết kế và triển khai hệ thống bảng hiệu điện tử thông minh trên nền tảng đám mây" đã giải quyết trọn vẹn bài toán từ quản lý nội dung đa phương tiện tập trung đến cá nhân hóa quảng cáo bằng trí tuệ nhân tạo tại thiết bị biên. Việc phối hợp linh hoạt giữa ASP.NET Core 8.0, ElectronJS và các mô hình thị giác máy tính on-device không chỉ mang lại hiệu năng cao, độ trễ thấp và bảo mật dữ liệu tối đa mà còn mở ra hướng tiếp cận kinh tế, dễ nhân rộng cho các không gian thương mại và công cộng thông minh trong kỷ nguyên chuyển đổi số.