Qt6.8.2创建WebAssmebly项目使用FFmpeg资源

Qt6新出了WebAssmebly功能，可以将C++写的软件到浏览器中运行，最近一段时间正在研究这方便内容，普通的控件响应都能实现，今天主要为大家分享如何将FFmpeg中的功能应用到浏览器中。

开发环境：window11，Qt6.8.2

功能介绍

（一）编译FFmpeg

之前使用FFmpeg解码器时没有编译过，想要在WebAssmebly套件环境中使用FFmpeg时，不能使用dll的方式，所以只能手动编译，这个步骤对我来说还是有一定难度的，不是不会编译，而是编译出来的内容，无法在QtCreator中应用。

接下来我来详细讲述下如何编译FFmpeg并使用。

1：下载MSYS2环境

因为FFmpeg不支持在window环境下编译，所以这里借助了MSYS2环境，具体的安装包可以从官网上下载就行。MSYS2官网链接

安装的时候默认是C盘，考虑到后期电脑运行状态，我选择安装到了D盘，不受任何影响的。

选择MSYS2 MINGW64方式进行编译

2：更新MSYS2和MINGW

控制台输入以下命令

bash 复制代码

pacman --sync --refresh --refresh
pacman --sync --sysupgrade

3：安装GIT

主要是使用git更新代码的，在这里需要注意的是，即使是在windows环境下已经安装过git了，在MSYS2中也是无法同步的。我之前就犯过这种错误，总觉得是在windows环境下应该是想通的才对，其实不是！

3.1：判断MSYS2中有没有安装git

bash 复制代码

pacman -Q git

如果能输出版本号，说明git已经被安装过

3.2：安装git

bash 复制代码

pacman -S git

安装后再次执行就能看到git的版本号了。

4：安装emscripten

为了编译FFmpeg为WebAssmebly可应用版本，需要安装emscripten

4.1：下载emscripten资源

bash 复制代码

git clone https://github.com/emscripten-core/emsdk.git

下载完成后切换到emsdk文件夹中

bash 复制代码

cd emsdk

这时候只是下载了一个emsdk的框架，因为要匹配Qt6.8.2，根据QtCreator文档说明得知，需要搭配emscripten的3.1.56版本，因此在更新安装时指定安装版本，这很重要！

4.2：安装指定版本

bash 复制代码

./emsdk install 3.1.56

4.4：安装后激活当前版本

bash 复制代码

./emsdk activate 3.1.56

4.5：激活emscripten环境

bash 复制代码

source /emsdk/emsdk_env.sh

4.6：配置环境变量

为了以后每次启动时不需要每次都激活emscripten环境，需要将激活功能放到环境变量中，方便使用

找到MSYS2中你的用户下"xx.bashrc"文件，将下面这句话添加到文件末尾。

bash 复制代码

source /D/msys64/home/sutong/emsdk/emsdk_env.sh

在这里需要写绝对路径的

此时，在命令行中输入

bash 复制代码

emcc -v

就能看到版本号了，说明安装成功了。

5：编译FFmpeg

最近我发现deepseek是个好东西，有啥问题都可以用这个咨询，我使用deepseek搜素了很多方案，以及各种博友的回答，都说使用"emconfigure ./configure"方式，但是，我也不知道是哪里出了问题，一直返回不是win32的有效应用程序，我简直跪了！

后来发现，直接使用"./configure"方式照样也能编译成功。下面是我配置FFmpeg编译项参数

第一步：

bash 复制代码

./configure --prefix=/home/sutong/ffmpeg/build-wasm --target-os=none --arch=x86_32 --enable-cross-compile --disable-asm --disable-programs --disable-doc  --cc="emcc" --cxx="em++" --ar="emar" --cpu=generic --disable-avdevice --disable-swresample --disable-postproc --disable-avfilter --disable-logging --enable-small --enable-decoder=h264 --enable-demuxer=mov --enable-network

第二步：

bash 复制代码

emmake make

第三步

bash 复制代码

emmake make install

等待编译完成就行，会将结果输出到"/home/sutong/ffmpeg/build-wasm"我们指定的文件夹中。

以上操作但凡发现有错误后，需要进行清理再次进行编辑

bash 复制代码

make clean

（二）代码应用

1：创建Qt项目

创建一个套件是WebAssmebly的项目，在这里我选择的是多线程

2：将编译好的FFmpeg资源添加到项目中

cpp 复制代码

# 添加FFmpeg头文件路径
INCLUDEPATH += $$PWD/ffmpeg/src
LIBS += -L$$PWD/ffmpeg/lib \
    -lavformat \
    -lavcodec \
    -lswscale \
    -lavutil

#WebAssembly特定配置
QMAKE_CXXFLAGS += -s USE_PTHREADS=0 -s ALLOW_MEMORY_GROWTH=1
# 添加以下标志以保留未使用的函数并导出符号
QMAKE_LFLAGS += -s ERROR_ON_UNDEFINED_SYMBOLS=0 -s EXPORT_ALL=1

在这里需要记住，静态库的加载一定是按照这个顺序，否则代码应用一直报错，我已经踩坑过了。

3：代码调用

在.h中

cpp 复制代码

extern "C"{
#include "libavformat/avformat.h"
#include "libavcodec/avcodec.h"

}

在.cpp中

cpp 复制代码

avformat_network_init();
// 初始化AVFormatContext
AVFormatContext* m_avFormCtx_Out = nullptr;
const char* filename = "F:\\11.mp4";
int nErrorCode = avformat_alloc_output_context2(&m_avFormCtx_Out, nullptr, nullptr, filename);
if(nErrorCode < 0)
{
    qDebug() << "调用<avformat_alloc_output_context2>，失败，错误码 = " << nErrorCode;
}
else
{
    qDebug() << "调用<avformat_alloc_output_context2>，成功，正确码 = " << nErrorCode;
}

运行代码，可以在浏览器中输出日志，说明FFmpeg接口调用成功

总结

虽然编译过程很简答，主要是环境配置以及在项目中的兼容程序，之前总是查询emconfigure的使用，浪费了很长时间，发现不用调用"emconfigure"也可以编译成功。

大家有什么问题可以留言告诉我，我也是第一次尝试，接下来我会继续分享Qt程序在WebAssmebly中使用，毕竟要学一学新技术呀！

我是糯诺诺米团，一名C++程序媛~