IoTLabs

Nghiên cứu, Sáng tạo và Thử nghiệm

Series ESP-WebRTC: Cài SDK và Build Demo Đầu Tiên Trên ESP32-P4

Danh mục:

Bài này đi thẳng vào thực hành: clone repo, cài dependencies, build và flash demo WebRTC đầu tiên lên ESP32-P4. Sau bài này bạn sẽ có ESP32-P4 stream video về browser.

Yêu Cầu

Phần cứng:

  • ESP32-P4-Function-EV-Board (có camera, màn hình, mic)
  • Cable USB-C

Phần mềm:

  • ESP-IDF v5.3 trở lên (bắt buộc — esp-webrtc không chạy trên IDF cũ)
  • Python 3.8+
  • Git

Cài ESP-IDF v5.3

Nếu đã có ESP-IDF cũ, kiểm tra version:

idf.py --version
# Cần: ESP-IDF v5.3.x hoặc mới hơn

Cài mới hoặc nâng cấp:

# Clone ESP-IDF
git clone --recursive https://github.com/espressif/esp-idf.git ~/esp/esp-idf
cd ~/esp/esp-idf
git checkout v5.3

# Cài tools
./install.sh esp32p4

# Load environment
. ./export.sh

Sau bước này idf.py đã sẵn sàng dùng với ESP32-P4.

Clone esp-webrtc-solution

git clone --recursive https://github.com/espressif/esp-webrtc-solution.git
cd esp-webrtc-solution

Cấu trúc repo quan trọng:

esp-webrtc-solution/
├── components/
│   ├── esp_webrtc/        ← WebRTC core (ICE, DTLS, RTP)
│   ├── esp_capture/       ← Audio/video capture pipeline
│   └── av_render/         ← Playback pipeline
└── solutions/
    ├── video_doorbell/    ← Demo chuông cửa video
    ├── two_way_video/     ← Demo gọi 2 chiều
    ├── whip_client/       ← Demo WHIP streaming
    └── usb_camera_bridge/ ← Demo USB camera

Cấu Hình Demo: twowayvideo

Demo twowayvideo phù hợp nhất để bắt đầu — cho phép gọi video 2 chiều giữa ESP32-P4 và browser.

cd solutions/two_way_video

Mở menuconfig để cấu hình Wi-Fi và signaling:

idf.py set-target esp32p4
idf.py menuconfig

Điều hướng vào ESP WebRTC Demo Config:

SettingGiá Trị
WiFi SSIDTên Wi-Fi nhà bạn
WiFi PasswordMật khẩu Wi-Fi
Signaling URLURL của AppRTC hoặc WHIP server
STUN Serverstun.l.google.com:19302 (mặc định)

Nếu chưa có signaling server, bài 07 hướng dẫn deploy WHIP server riêng. Tạm thời có thể dùng demo server AppRTC để test nhanh.

Build và Flash

# Build (lần đầu ~5-10 phút)
idf.py build

# Flash lên ESP32-P4
idf.py -p /dev/ttyACM0 flash monitor

Nếu không biết port:

# Linux/macOS
ls /dev/tty*

# Windows
# Tìm trong Device Manager → Ports (COM & LPT)

Kiểm Tra Log Khởi Động

Sau khi flash thành công, monitor hiển thị log:

I (1234) webrtc_demo: Connecting to WiFi: MyNetwork
I (2345) webrtc_demo: WiFi connected, IP: 192.168.1.105
I (2346) webrtc_demo: Connecting to signaling server...
I (3456) webrtc_demo: Signaling connected
I (3457) webrtc_demo: Waiting for call...

Đây là trạng thái bình thường — ESP32-P4 đang chờ browser gọi vào.

📷 [Hình minh hoạ: Screenshot serial monitor hiển thị log khởi động thành công]

Gọi Từ Browser

Mở browser (Chrome hoặc Firefox, không dùng Safari vì hạn chế WebRTC):

  1. Truy cập URL signaling server (tùy loại server bạn dùng)
  2. Nhập Room ID hoặc Session ID tương ứng với ESP32
  3. Click Call / Connect

Nếu kết nối thành công, browser hiển thị video từ camera ESP32-P4. Log trên ESP32 sẽ in:

I (5678) webrtc_demo: ICE connection state: connected
I (5679) webrtc_demo: DTLS handshake complete
I (5680) webrtc_demo: Streaming started: H264 720p @ 25fps

Xử Lý Lỗi Thường Gặp

Lỗi build esp_webrtc not found:

# Cập nhật submodules
git submodule update --init --recursive

ESP32-P4 không nhận được IP: Kiểm tra Wi-Fi SSID/password trong menuconfig. ESP32-P4 chỉ hỗ trợ 2.4GHz.

ICE connection state: failed:

  • STUN server không truy cập được (kiểm tra kết nối internet từ ESP32)
  • Cần TURN server nếu ở sau symmetric NAT (xem bài 08)

Camera không khởi động: Kiểm tra jumper kết nối camera trên EV Board đã đúng vị trí chưa.

Cấu Trúc Code Demo

Để hiểu code hoạt động thế nào, mở main/app_main.c:

void app_main(void) {
    // 1. Khởi tạo Wi-Fi
    wifi_init_sta();

    // 2. Khởi tạo WebRTC
    esp_webrtc_cfg_t cfg = {
        .signaling_url = CONFIG_SIGNALING_URL,
        .stun_server   = CONFIG_STUN_SERVER,
        .audio_codec   = ESP_WEBRTC_AUDIO_CODEC_OPUS,
        .video_codec   = ESP_WEBRTC_VIDEO_CODEC_H264,
    };
    esp_webrtc_handle_t handle;
    esp_webrtc_init(&cfg, &handle);

    // 3. Đăng ký callback khi có call đến
    esp_webrtc_register_event_handler(handle, on_webrtc_event, NULL);

    // 4. Start - bắt đầu kết nối signaling và chờ
    esp_webrtc_start(handle);
}

Bài tiếp theo: ESP32-P4 vs ESP32-S3 Korvo — Chọn Board Nào Cho WebRTC?

More posts