基于ImGui+FFmpeg实现播放器
演示：
ImGui播放器
继续研究FFmpeg，之前做了一个SDL的播放器，发现SDL的可视化UI界面的功能稍微差了点，所以今天我们换了一个新的工具，也就是ImGui。
ImGui官方文档：https://github.com/ocornut/imgui
接下来讲解一下播放器的主要功能，以及实现的方案
播放页面
播放页面是基于OpenGL渲染，ImGui实现UI界面完成的。
实现流程如下：
- FFmpeg解析视频文件，将每一帧写入数组中
- 根据帧率计算每一帧的播放时间
- 循环渲染每一帧
frame = frame_vector.at(current_index).frame;
render_image(frame);
ImGui::Image((ImTextureID)(intptr_t)texture_ids[0],ImVec2(codec_ctx->width, codec_ctx->height));
暂停/快进功能
暂停和快进功能相对比较简单
定义一个 is_pause变量控制视频播放
定义一个 delay变量控制播放速度
/**播放线程*/
int play_thread(void* arg) {for (;;) {while (!is_pause && current_index < frame_vector.size()) {SDL_Delay((Uint32) delay);current_index ++;// 从头播放if (current_index == frame_vector.size() -1) {current_index = 0;}}}return 1;
}
帧解析
帧解析就是将数组中的每一帧展示出来，程序对帧的类型进行了区分，使用不同的颜色来区分 I帧，P帧，B帧。
ImGui::BeginGroup();
ImGui::BeginChild("ScrollArea", ImVec2(0, codec_ctx->height), true, ImGuiWindowFlags_HorizontalScrollbar);
for(int i=0;i<frame_vector.size();i++) {if (frame_vector.at(i).frame->pict_type == AV_PICTURE_TYPE_I) {ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.5f, 0.0f, 0.0f, 1.0f));}else if (frame_vector.at(i).frame->pict_type == AV_PICTURE_TYPE_P) {ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.0f, 0.5f, 0.0f, 1.0f));}else {ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.0f, 0.0f, 0.5f, 1.0f));}if (ImGui::Button(get_frame_title(i))) {current_index = i;}// 恢复样式ImGui::PopStyleColor();
}
ImGui::EndChild();
ImGui::EndGroup();
宏块解析
根据鼠标的位置，找到对应的宏块 16*16，必将对应的字节打印出来，方便我们进行逐个宏块的分析。
源代码
//
// main.cpp
// analyser
//
// Created by chenhuaiyi on 2025/4/3.
//#include <SDL.h>
#include "imgui.h" // ImGui核心
#include "imgui_impl_sdl2.h" // SDL2后端
#include "imgui_impl_opengl3.h" // OpenGL渲染器
#include "iostream"
#include "glew.h"
#include <vector>
#include "string.h"
#include <iomanip> // 包含格式控制函数
#include <cstdint>// ffmpeg
extern "C" {
#include "libavcodec/avcodec.h"
#include "libswresample/swresample.h"
#include "libavformat/avformat.h"
#include "libswscale/swscale.h"
#include "libavutil/imgutils.h"
#include "libavutil/time.h"
#include "libavutil/channel_layout.h"
#include "libavutil/log.h"
}#define Y_SIZE 256
#define U_SIZE 64
#define V_SIZE 64typedef struct Frame {AVFrame* frame;int64_t pts; // pts 播放相关int64_t duration; // durationAVPictureType pict_type; // 帧类型
}Frame;/**单个宏块的定义 16*16 个字节y 256 byteu 64 bytev 64 byte*/
typedef struct MircoBlock{uint8_t y[Y_SIZE];uint8_t u[U_SIZE];uint8_t v[V_SIZE];
} MircoBlock;// 窗口尺寸
const int WIDTH = 1600;
const int HEIGHT = 1200;GLuint texture_ids[2];std::vector<Frame> frame_vector;
int current_index = 0;const char* file = "//Users/chenhuaiyi/workspace/ffmpeg/files/恋爱_重编码.mp4";
AVFormatContext* format_ctx = avformat_alloc_context();
int video_stream = -1;
const AVCodec* codec = NULL;
AVCodecContext* codec_ctx;
double delay; // 延迟单位ms
int is_pause = 0;char* get_frame_title(int num) {// 为最大整数长度（含符号和结束符）分配空间char buffer[32];// 将整数写入缓冲区snprintf(buffer, sizeof(buffer), "frame:%d", num);// 复制到动态内存char* str = strdup(buffer);return str;
}/**获取当前帧的时间戳*/
double getCurrentTimeStamp() {AVFrame* frame = frame_vector.at(current_index).frame;double tag = av_q2d(format_ctx->streams[video_stream]->time_base);return frame->pts * tag;
}/**播放线程*/
int play_thread(void* arg) {for (;;) {while (!is_pause && current_index < frame_vector.size()) {SDL_Delay((Uint32) delay);current_index ++;// 从头播放if (current_index == frame_vector.size() -1) {current_index = 0;}}}return 1;
}/**宏块渲染*/
void render_block(float x, float y, AVFrame* frame, uint8_t* src[]) {src[0] = static_cast<uint8_t*>(av_malloc(Y_SIZE));src[1] = static_cast<uint8_t*>(av_malloc(U_SIZE));src[2] = static_cast<uint8_t*>(av_malloc(V_SIZE));int x_int = static_cast<int>(x);int y_int = static_cast<int>(y);// 计算当前坐标是哪个宏块int block_x = x / 16;int block_y = y / 16;int cb_block_x = block_x / 2;int cb_block_y = block_y / 2;// yuint8_t* y_start = frame->data[0] +(block_y * 16) * frame->linesize[0] + // 行偏移(block_x * 16); // 列偏移for (int row = 0; row < 16; row++) {const uint8_t* src_row = y_start + row * frame->linesize[0];std::memcpy(src[0] + (row * 16), src_row, 16);}// === 提取 Cb 分量 ===uint8_t* cb_start = frame->data[1] +(cb_block_y * 8) * frame->linesize[1] + // 行偏移(cb_block_x * 8); // 列偏移for (int row = 0; row < 8; row++) {const uint8_t* src_row = cb_start + row * frame->linesize[1];std::memcpy(src[1] + (row * 8), src_row, 8);}// === 提取 Cr 分量 ===uint8_t* cr_start = frame->data[2] +(cb_block_y * 8) * frame->linesize[2] + // 行偏移(cb_block_x * 8); // 列偏移for (int row = 0; row < 8; row++) {const uint8_t* src_row = cr_start + row * frame->linesize[2];std::memcpy(src[2] + (row * 8), src_row, 8);}// 渲染当前宏块到图像struct SwsContext* sws_ctx;sws_ctx = sws_getContext(16,16,AV_PIX_FMT_YUV420P,16,16,AV_PIX_FMT_RGBA,SWS_BILINEAR,NULL, NULL, NULL);/**初始数据分配*/int linesize[3] = {16, 8, 8};AVFrame* frame2 = av_frame_alloc();frame2->width = 16;frame2->height = 16;frame2->format = AV_PIX_FMT_RGBA;av_frame_get_buffer(frame2, 0);sws_scale(sws_ctx,(uint8_t const **)src,linesize,0,frame2->height,frame2->data,frame2->linesize);sws_freeContext(sws_ctx);glBindTexture(GL_TEXTURE_2D, texture_ids[1]);glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA,16,16,0,GL_RGBA,GL_UNSIGNED_BYTE,frame2->data[0]);av_free(frame2);
}/**帧渲染*/
void render_image(AVFrame* frame) {AVFrame* frame2 = av_frame_alloc();struct SwsContext* sws_ctx;sws_ctx = sws_getContext(frame->width,frame->height,(AVPixelFormat)frame->format,frame->width,frame->height,AV_PIX_FMT_RGBA,SWS_BILINEAR,NULL, NULL, NULL);if (sws_ctx == NULL) {av_log(NULL, AV_LOG_ERROR, "sws context init error\n");return;}frame2->width = frame->width;frame2->height = frame->height;frame2->format = AV_PIX_FMT_RGBA;av_frame_get_buffer(frame2, 0);sws_scale(sws_ctx,(uint8_t const **)frame->data,frame->linesize,0,frame2->height,frame2->data,frame2->linesize);sws_freeContext(sws_ctx);glBindTexture(GL_TEXTURE_2D, texture_ids[0]);glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA,frame2->width,frame2->height,0,GL_RGBA,GL_UNSIGNED_BYTE,frame2->data[0]);av_free(frame2);}int main(int argc, char* argv[]) {int ret = -1;ret = avformat_open_input(&format_ctx, file, NULL, NULL);if (ret < 0) {av_log(NULL, AV_LOG_ERROR, "Format open error: %s\n", av_err2str(ret));return -1;}if (avformat_find_stream_info(format_ctx, NULL) < 0) {printf("文件探测流信息失败");}video_stream = av_find_best_stream(format_ctx, AVMEDIA_TYPE_VIDEO, -1, -1, &codec, 0);if (video_stream == -1) {av_log(NULL, AV_LOG_ERROR, "do not find video stream\n");return -1;}codec = avcodec_find_decoder(format_ctx->streams[video_stream]->codecpar->codec_id);if (codec == NULL) {av_log(NULL, AV_LOG_ERROR, "do not find encoder\n");return -1;}codec_ctx = avcodec_alloc_context3(codec);ret = avcodec_parameters_to_context(codec_ctx, format_ctx->streams[video_stream]->codecpar);if (ret < 0) {av_log(NULL, AV_LOG_ERROR, "codec context init error: %s\n", av_err2str(ret));return -1;}ret = avcodec_open2(codec_ctx, codec, NULL);if (ret < 0) {av_log(NULL, AV_LOG_ERROR, "encoder open error: %s\n", av_err2str(ret));return -1;}AVFrame* frame = av_frame_alloc();AVPacket packet;while (!av_read_frame(format_ctx, &packet)) {if (packet.stream_index == video_stream) {ret = avcodec_send_packet(codec_ctx, &packet);if (ret < 0) {av_log(NULL, AV_LOG_ERROR, "packet send error: %s\n", av_err2str(ret));}while (!avcodec_receive_frame(codec_ctx, frame)) {struct Frame frame_node;AVFrame* cpy_frame = av_frame_alloc();cpy_frame->width = codec_ctx->width;cpy_frame->height = codec_ctx->height;cpy_frame->format = codec_ctx->pix_fmt;av_frame_get_buffer(cpy_frame, 0);ret = av_frame_copy_props(cpy_frame, frame);ret = av_frame_copy(cpy_frame, frame);if (ret < 0) {av_log(NULL, AV_LOG_ERROR, "frame copy error:%s\n", av_err2str(ret));}frame_node.frame = cpy_frame;frame_node.duration = frame->duration;frame_node.pts = frame->pts;frame_node.pict_type = frame->pict_type;frame_vector.push_back(frame_node);}}av_packet_unref(&packet);}// 1. 初始化SDLif (SDL_Init(SDL_INIT_VIDEO | SDL_INIT_AUDIO | SDL_INIT_TIMER) != 0) {SDL_Log("SDL Initialization Failed! %s", SDL_GetError());return -1;}// 2. 创建窗口SDL_Window* window = SDL_CreateWindow("ImGui + SDL2 Example",SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED,WIDTH, HEIGHT,SDL_WINDOW_OPENGL | SDL_WINDOW_RESIZABLE);if (!window) {SDL_Log("Window Creation Failed! %s", SDL_GetError());return -1;}// 3. 创建OpenGL上下文SDL_GLContext gl_context = SDL_GL_CreateContext(window);if (!gl_context) {SDL_Log("OpenGL Context Creation Failed! %s", SDL_GetError());return -1;}// 4. 初始化ImGuiIMGUI_CHECKVERSION();ImGui::CreateContext();ImGuiIO& io = ImGui::GetIO();io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;// 5. 设置ImGui风格和主题ImGui::StyleColorsDark();// 6. 初始化 ImGui的SDL和OpenGL后端ImGui_ImplSDL2_InitForOpenGL(window, gl_context);ImGui_ImplOpenGL3_Init("#version 120"); // 根据OpenGL版本调整// 初始化纹理glGenTextures(1, texture_ids);for (int i=0; i<2; i++) {glBindTexture(GL_TEXTURE_2D, texture_ids[i]);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);}// 计算每一帧的延迟delay = 1/av_q2d(format_ctx->streams[video_stream]->avg_frame_rate)*1000;SDL_CreateThread(play_thread, "play_thread", NULL);// 7. 主循环bool is_running = true;while (is_running) {SDL_Event event;while (SDL_PollEvent(&event)) {ImGui_ImplSDL2_ProcessEvent(&event);if (event.type == SDL_QUIT)is_running = false;if (event.type == SDL_KEYDOWN) {}}// 开始 ImGui帧ImGui_ImplOpenGL3_NewFrame();ImGui_ImplSDL2_NewFrame();ImGui::NewFrame();// ---------------// 在此处编写UI逻辑：ImGui::Begin("Hello, World!"); // 开始窗口ImGui::BeginGroup();frame = frame_vector.at(current_index).frame;render_image(frame);ImGui::Image((ImTextureID)(intptr_t)texture_ids[0],ImVec2(codec_ctx->width, codec_ctx->height));// 获取 Image 的矩形区域ImVec2 img_min = ImGui::GetItemRectMin(); // 左上角坐标（全局坐标）ImVec2 img_max = ImGui::GetItemRectMax(); // 右下角坐标（全局坐标）ImVec2 mouse_global = ImGui::GetMousePos();if (ImGui::IsItemHovered()) {// 计算局部坐标ImVec2 local_mouse = ImVec2(mouse_global.x - img_min.x,mouse_global.y - img_min.y);// 显示坐标（归一化到纹理比例）float normalized_x = local_mouse.x / codec_ctx->width;float normalized_y = local_mouse.y / codec_ctx->height;uint8_t* src[3];render_block(local_mouse.x, local_mouse.y, frame, src);// 打印YUV数据ImGui::SameLine();ImGui::BeginGroup();std::string y_str;for (int i=0; i<16; i++) {for (int j=0; j<16; j++) {char buffer[3];snprintf(buffer, sizeof(buffer), "%02X", *(src[0] + i*16+j));y_str += buffer;}y_str.append("\n");}ImGui::Text(y_str.c_str());std::string u_str;for (int i=0; i<8; i++) {for (int j=0; j<8; j++) {char buffer[3];snprintf(buffer, sizeof(buffer), "%02X", *(src[1] + i*8+j));u_str += buffer;}u_str.append("\n");}ImGui::Text(u_str.c_str());std::string v_str;for (int i=0; i<8; i++) {for (int j=0; j<8; j++) {char buffer[3];snprintf(buffer, sizeof(buffer), "%02X", *(src[2] + i*8+j));v_str += buffer;}v_str.append("\n");}ImGui::Text(v_str.c_str());for (int i=0; i<3; i++) {av_free(src[i]);}ImGui::EndGroup();ImGui::Text("Relative Coordinates: %.2f, %.2f", local_mouse.x, local_mouse.y);ImGui::Text("Normalized: %.2f, %.2f", normalized_x, normalized_y);ImGui::Image((ImTextureID)(intptr_t)texture_ids[1],ImVec2(16, 16));// 鼠标宏块显示int block_x = local_mouse.x / 16;int block_y = local_mouse.y / 16;ImVec2 rect_min(img_min.x + block_x * 16, img_min.y + block_y * 16);ImVec2 rect_max(rect_min.x + 16, rect_min.y + 16);ImGui::GetWindowDrawList()->AddRect(rect_min,rect_max,ImGui::GetColorU32(ImGuiCol_Header), // 红色0.0f,0,4.0f // 线宽);}ImGui::BeginGroup();if (ImGui::Button("<<")) {delay*=2;}ImGui::SameLine();if (ImGui::Button("stop")) {is_pause = !is_pause;}ImGui::SameLine();if (ImGui::Button(">>")) {delay/=2;}ImGui::EndGroup();ImGui::BeginGroup();ImGui::Text("decoder&encoder");ImGui::Text("decoder: %s", codec->name);ImGui::Text("time_base: %f", av_q2d(format_ctx->streams[video_stream]->time_base));ImGui::Text("frame_rate: %.2f", av_q2d(format_ctx->streams[video_stream]->avg_frame_rate));ImGui::Text("frame_size: %lld", format_ctx->streams[video_stream]->nb_frames);ImGui::Text("bit_rate: %lld", codec_ctx->bit_rate);ImGui::Text("duration: %lld", format_ctx->duration);ImGui::EndGroup();ImGui::SameLine();ImGui::BeginGroup();ImGui::Text("SPS&PPS");ImGui::Text("profile_idc: %d", codec_ctx->profile);ImGui::Text("profile_name: %s", av_get_profile_name(codec, codec_ctx->profile));ImGui::Text("level_idc: %d", codec_ctx->level);ImGui::Text("frame_cropping_flag: %d", codec_ctx->apply_cropping);ImGui::Text("gop_size: %d", codec_ctx->gop_size);ImGui::EndGroup();ImGui::SameLine();ImGui::BeginGroup();ImGui::Text("frame detail");ImGui::Text("pts: %lld", frame->pts);ImGui::Text("duration: %lld", frame->duration);ImGui::Text("pict_type: %c", av_get_picture_type_char(frame->pict_type));ImGui::Text("format: %d", frame->format);ImGui::Text("pkt_size: %d", frame->pkt_size);ImGui::Text("pkt_pos: %d", frame->pkt_pos);ImGui::Text("pkt_dts: %lld", frame->pkt_dts);ImGui::Text("play_timestamp: %.2f", getCurrentTimeStamp());ImGui::EndGroup();ImGui::SameLine();ImGui::EndGroup();ImGui::SameLine();ImGui::BeginGroup();ImGui::BeginChild("ScrollArea", ImVec2(0, codec_ctx->height), true, ImGuiWindowFlags_HorizontalScrollbar);for(int i=0;i<frame_vector.size();i++) {if (frame_vector.at(i).frame->pict_type == AV_PICTURE_TYPE_I) {ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.5f, 0.0f, 0.0f, 1.0f));}else if (frame_vector.at(i).frame->pict_type == AV_PICTURE_TYPE_P) {ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.0f, 0.5f, 0.0f, 1.0f));}else {ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.0f, 0.0f, 0.5f, 1.0f));}if (ImGui::Button(get_frame_title(i))) {current_index = i;}// 恢复样式ImGui::PopStyleColor();}ImGui::EndChild();ImGui::EndGroup();ImGui::End();// ---------------// 渲染ImGui::Render();glViewport(0, 0, WIDTH, HEIGHT);glClearColor(0.2f, 0.2f, 0.2f, 1.0f);glClear(GL_COLOR_BUFFER_BIT);ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());// 切换缓冲区SDL_GL_SwapWindow(window);}// 8. 清理和退出av_packet_unref(&packet);for(Frame f : frame_vector) {av_free(f.frame);}avcodec_free_context(&codec_ctx);avformat_free_context(format_ctx);ImGui_ImplOpenGL3_Shutdown();ImGui_ImplSDL2_Shutdown();ImGui::DestroyContext();SDL_GL_DeleteContext(gl_context);SDL_DestroyWindow(window);SDL_Quit();return 0;
}