Windows C++ GUI & Media Toolchain

Slint + C++ Quick Setup Guide:
Seamlessly Integrate OpenCV & FFmpeg

Build modern C++ desktop media and computer vision applications on Windows using Visual Studio Code. Leverage CMake FetchContent for the declarative UI framework Slint, and elegantly integrate FFmpeg & OpenCV via the vcpkg package manager.

Step 1: Core Toolchain Installation

Install the underlying compiler, build system, and modern package manager

VS Code

Main code editor. Requires C/C++, CMake Tools, and official Slint extensions.

Download

MSVC (Build Tools)

Official Windows C++ compiler core. Check 'Desktop development with C++' during installation.

Download

CMake

Cross-platform build system. Select 'Add CMake to the system PATH' during installation.

Download

Rust (rustup)

Core dependency for Slint UI compilation. Rust must be installed globally on your system.

Download

Step 2: Configure vcpkg & Build Media Dependencies

Automate the complex Windows dependency trees of FFmpeg and OpenCV using Microsoft's open-source vcpkg

Initialize and install core libraries (PowerShell)

# 1. Clone vcpkg repo to any directory (e.g., C:\dev\vcpkg)
git clone https://github.com/microsoft/vcpkg.git
cd vcpkg

# 2. Bootstrap the script and integrate globally
.\bootstrap-vcpkg.bat
.\vcpkg integrate install

# 3. Build 64-bit Windows OpenCV and FFmpeg (This may take tens of minutes)
.\vcpkg install opencv ffmpeg --triplet x64-windows

VS Code Tip: When configuring CMake in VS Code, ensure you set CMAKE_TOOLCHAIN_FILE in settings.json or the CMake Tools extension to point to your vcpkg installation (e.g., C:/dev/vcpkg/scripts/buildsystems/vcpkg.cmake), otherwise CMake will fail to resolve find_package dependencies.

Step 3: Project Structure & Build Configuration

Slint UI is processed by a dedicated compiler that dynamically generates C++ headers

Project Structure

SlintMediaApp/
├── CMakeLists.txt
├── src/
│   └── main.cpp
└── ui/
    └── appwindow.slint

CMakeLists.txt

cmake_minimum_required(VERSION 3.21)
project(SlintMediaApp LANGUAGES CXX)

# Force C++ 20 standard
set(CMAKE_CXX_STANDARD 20)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

# Find OpenCV and FFmpeg via vcpkg
find_package(OpenCV REQUIRED)
# FFmpeg package requires specific components in vcpkg
find_package(FFmpeg REQUIRED COMPONENTS avcodec avformat avutil)

# Fetch Slint core dynamically (Official recommendation)
include(FetchContent)
FetchContent_Declare( 
Slint
GIT_REPOSITORY https://github.com/slint-ui/slint.git
GIT_TAG v1.7.0
SOURCE_SUBDIR api/cpp
)
FetchContent_MakeAvailable(Slint)

# Register executable
add_executable(SlintMediaApp src/main.cpp)

# Crucial: Compile Slint view to auto-generate appwindow.h
slint_target_sources(SlintMediaApp ui/appwindow.slint)

# Link all target binaries
target_link_libraries(SlintMediaApp PRIVATE
Slint::Slint
${OpenCV_LIBS}
FFmpeg::avcodec FFmpeg::avformat FFmpeg::avutil
)

Step 4: Code Integration & Verification

Write frontend Slint layout and backend C++ logic to bridge OpenCV and FFmpeg

ui/appwindow.slint

export component AppWindow inherits Window { in property <string> sys_info; width: 600px; height: 400px; title: "Slint Media Hub"; VerticalBox { Text { text: root.sys_info; font-size: 16px; color: #4ade80; horizontal-alignment: center; } } }

src/main.cpp

// Header auto-generated by CMake calling Slint compiler in the background #include "appwindow.h" #include <opencv2/opencv.hpp> extern "C" { #include <libavcodec/avcodec.h> } int main() { auto ui = AppWindow::create(); // 1. Call OpenCV to create a dummy matrix cv::Mat dummy_img = cv::Mat::zeros(100, 100, CV_8UC3); // 2. Call FFmpeg to get Codec version unsigned av_ver = avcodec_version(); // 3. Inject backend data into the UI layer std::string info = "OpenCV Matrix Size: "

+
std::to_string(dummy_img.cols) +

"x"

+ std::to_string(dummy_img.rows) +

"\\nFFmpeg avcodec version: " + std::to_string(av_ver); ui->set_sys_info(info.c_str()); // 4. Start the main event loop ui->run(); return 0; }