Source code ứng dụng hiển thị và quản lý nhiều camera IP đồng thời

CameraWall Example là ứng dụng hiển thị và quản lý nhiều camera IP đồng thời trên một màn hình

Mục lục

  1. Tổng quan
  2. Kiến trúc hệ thống
  3. Yêu cầu hệ thống
  4. Hướng dẫn Build
  5. Hướng dẫn sử dụng
  6. Link GitHub

1. Tổng quan

CameraWallExample là giải pháp hiển thị và quản lý đồng thời nhiều camera IP (RTSP/RTMP) trên cùng một màn hình với hiệu năng cao. Ứng dụng được xây dựng trên nền tảng WPF kết hợp với FFmpeg và Direct3D 11 nhằm mang đến khả năng giải mã và hiển thị video mượt mà ngay cả khi chạy nhiều camera cùng lúc.

Điểm nổi bật

  • Hiệu năng cao nhờ sử dụng hardware decoding (GPU) thông qua FFmpeg.
  • Hiển thị video mượt với Direct3D 11, đạt FPS cao.
  • Mỗi camera hoạt động trên một thread riêng, giúp tăng tính ổn định.
  • Hỗ trợ nhiều kiểu bố cục như 1×1, 2×2, 3×3, 4×4, Wide Layout và Custom Layout.
  • Hỗ trợ kéo thả camera, chụp ảnh, tạm dừng hoặc tiếp tục phát camera.
  • Tự động kết nối lại khi camera bị mất kết nối.

2. Kiến trúc hệ thống

1️⃣ UI Layer (C# – WPF)

MainWindow.xaml/cs: Giao diện chính, quản lý layout selector, camera list, drag & drop
CameraWallController.cs: Business logic, quản lý danh sách camera và cell mapping
CameraWallHost.cs: WinForms control hosting trong WPF để lấy HWND cho D3D11

2️⃣ Interop Layer (C++/CLI)

CameraWallApi.cpp: Bridge giữa managed .NET và native C++ để .NET gọi vào engine C++

3️⃣ Engine Layer (Native C++)

CameraWallEngine: Core engine quản lý tất cả camera sessions và renderer
FFmpegCameraSession: Quản lý từng camera riêng biệt (connect, decode, pause/resume)
D3D11WallRenderer: Render nhiều video streams lên một surface D3D11

Vì sao sử dụng FFmpeg C++?

Thành phần Lợi ích
Hiệu năng Sử dụng Hardware Decode (DXVA2, NVDEC…) giúp GPU đảm nhận việc giải mã video thay cho CPU. Rất quan trọng khi chạy đồng thời từ 9–16 camera HD.
Độ trễ thấp FFmpeg hỗ trợ RTSP với độ trễ thấp, phù hợp cho hệ thống giám sát thời gian thực.
Hỗ trợ codec Hỗ trợ H.264, H.265, MJPEG cùng nhiều định dạng video phổ biến khác mà .NET không hỗ trợ trực tiếp.
Kiểm soát tốt Có thể truy cập trực tiếp AVPacket và AVFrame để tối ưu việc render bằng Direct3D 11.
Quản lý bộ nhớ Native C++ giúp hạn chế Garbage Collection khi xử lý liên tục hàng nghìn frame video.
Hỗ trợ giao thức Hỗ trợ RTSP, RTMP, HTTP(S), UDP và nhiều giao thức truyền hình ảnh khác.

3. Yêu cầu hệ thống

Phần cứng

  • CPU Intel Core i5 hoặc tương đương. Khuyến nghị Intel Core i7 hoặc AMD Ryzen 7 nếu chạy từ 9 camera trở lên.
  • GPU hỗ trợ Direct3D 11 (NVIDIA, AMD hoặc Intel HD Graphics 4000 trở lên).
  • RAM tối thiểu 4 GB, khuyến nghị 8 GB trở lên.
  • Mạng LAN ổn định, tốc độ từ 100 Mbps nếu sử dụng nhiều camera HD.

Phần mềm

  • Windows 10 hoặc Windows 11 (64-bit).
  • Visual Studio 2022.
  • .NET 8 SDK.
  • C++ Desktop Development Workload.
  • Windows SDK 10.0.22621.0 hoặc mới hơn.
  • DirectX 11 Runtime.

Thư viện đi kèm

  • FFmpeg 8.0.1-r3 (đã bao gồm trong thư mục lib/).
  • Toàn bộ DLL cần thiết đã được copy vào thư mục: bin/ffmpeg-8.0.1-r3

4. Hướng dẫn Build

Bước 1. Clone Repository
git clone https://github.com/thigiacmaytinh/CameraWallExample.git

Bước 2. Mở Solution
Mở Visual Studio 2022.
Mở file CameraWallExample.sln.

Bước 3. Build Project
Chọn Configuration: Debug hoặc Release.
Platform: x64
Chọn Build → Build Solution hoặc nhấn Ctrl + Shift + B.

5. Hướng dẫn sử dụng

Bước 1. Chọn Layout

Có thể lựa chọn nhiều bố cục hiển thị khác nhau:

  • 1×1 (1 camera)
  • 2×2 (4 camera)
  • 3×3 (9 camera)
  • 4×4 (16 camera)

Bước 2. Thêm camera bằng đường dẫn RTSP

Ví dụ camera Hikvision:

rtsp://admin:Abc123456@192.168.1.64:554/Streaming/Channels/101

Bước 3. Kéo thả camera vào Camera Wall

  • Kéo camera từ danh sách bên trái.
  • Thả camera vào ô hiển thị mong muốn.
  • Camera sẽ tự động kết nối và bắt đầu phát hình.

Link Github

https://github.com/thigiacmaytinh/CameraWallExample
Chúc các bạn thành công

Leave a Reply