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
控制臺輸入以下命令
pacman --sync --refresh --refresh
pacman --sync --sysupgrade3：安裝GIT
主要是使用git更新代碼的，在這里需要注意的是，即使是在windows環境下已經安裝過git了，在MSYS2中也是無法同步的。我之前就犯過這種錯誤，總覺得是在windows環境下應該是想通的才對，其實不是！
3.1：判斷MSYS2中有沒有安裝git
pacman -Q git如果能輸出版本號，說明git已經被安裝過
3.2：安裝git
pacman -S git安裝后再次執行就能看到git的版本號了。
4：安裝emscripten
為了編譯FFmpeg為WebAssmebly可應用版本，需要安裝emscripten
4.1：下載emscripten資源
git clone https://github.com/emscripten-core/emsdk.git?下載完成后切換到emsdk文件夾中
cd emsdk這時候只是下載了一個emsdk的框架，因為要匹配Qt6.8.2，根據QtCreator文檔說明得知，需要搭配emscripten的3.1.56版本，因此在更新安裝時指定安裝版本，這很重要！
4.2：安裝指定版本
./emsdk install 3.1.564.4：安裝后激活當前版本
./emsdk activate 3.1.564.5：激活emscripten環境
source /emsdk/emsdk_env.sh4.6：配置環境變量
為了以后每次啟動時不需要每次都激活emscripten環境，需要將激活功能放到環境變量中，方便使用
找到MSYS2中你的用戶下“xx.bashrc”文件，將下面這句話添加到文件末尾。
source /D/msys64/home/sutong/emsdk/emsdk_env.sh在這里需要寫絕對路徑的
此時，在命令行中輸入
emcc -v就能看到版本號了，說明安裝成功了。
?5：編譯FFmpeg
最近我發現deepseek是個好東西，有啥問題都可以用這個咨詢，我使用deepseek搜素了很多方案，以及各種博友的回答，都說使用“emconfigure ./configure”方式，但是，我也不知道是哪里出了問題，一直返回不是win32的有效應用程序，我簡直跪了！
后來發現，直接使用"./configure"方式照樣也能編譯成功。下面是我配置FFmpeg編譯項參數
第一步：
./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第二步：
emmake make第三步
emmake make install等待編譯完成就行，會將結果輸出到“/home/sutong/ffmpeg/build-wasm”我們指定的文件夾中。
以上操作但凡發現有錯誤后，需要進行清理再次進行編輯
make clean（二）代碼應用
1：創建Qt項目
創建一個套件是WebAssmebly的項目，在這里我選擇的是多線程
?2：將編譯好的FFmpeg資源添加到項目中
# 添加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中
extern "C"{
#include "libavformat/avformat.h"
#include "libavcodec/avcodec.h"}在.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++程序媛~
