Qt6新出了WebAssmebly功能，可以將C++寫的軟件到瀏覽器中運行，最近一段時間正在研究這方便內(nèi)容，普通的控件響應(yīng)都能實現(xiàn)，今天主要為大家分享如何將FFmpeg中的功能應(yīng)用到瀏覽器中。

開發(fā)環(huán)境：window11，Qt6.8.2

功能介紹

（一）編譯FFmpeg

之前使用FFmpeg解碼器時沒有編譯過，想要在WebAssmebly套件環(huán)境中使用FFmpeg時，不能使用dll的方式，所以只能手動編譯，這個步驟對我來說還是有一定難度的，不是不會編譯，而是編譯出來的內(nèi)容，無法在QtCreator中應(yīng)用。

接下來我來詳細講述下如何編譯FFmpeg并使用。

1：下載MSYS2環(huán)境

因為FFmpeg不支持在window環(huán)境下編譯，所以這里借助了MSYS2環(huán)境，具體的安裝包可以從官網(wǎng)上下載就行。MSYS2官網(wǎng)鏈接

安裝的時候默認是C盤，考慮到后期電腦運行狀態(tài)，我選擇安裝到了D盤，不受任何影響的。

?選擇MSYS2 MINGW64方式進行編譯

2：更新MSYS2和MINGW

控制臺輸入以下命令

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

3：安裝GIT

主要是使用git更新代碼的，在這里需要注意的是，即使是在windows環(huán)境下已經(jīng)安裝過git了，在MSYS2中也是無法同步的。我之前就犯過這種錯誤，總覺得是在windows環(huán)境下應(yīng)該是想通的才對，其實不是！

3.1：判斷MSYS2中有沒有安裝git

pacman -Q git

如果能輸出版本號，說明git已經(jīng)被安裝過

3.2：安裝git

pacman -S git

安裝后再次執(zhí)行就能看到git的版本號了。

4：安裝emscripten

為了編譯FFmpeg為WebAssmebly可應(yīng)用版本，需要安裝emscripten

4.1：下載emscripten資源

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

?下載完成后切換到emsdk文件夾中

cd emsdk

這時候只是下載了一個emsdk的框架，因為要匹配Qt6.8.2，根據(jù)QtCreator文檔說明得知，需要搭配emscripten的3.1.56版本，因此在更新安裝時指定安裝版本，這很重要！

4.2：安裝指定版本

./emsdk install 3.1.56

4.4：安裝后激活當(dāng)前版本

./emsdk activate 3.1.56

4.5：激活emscripten環(huán)境

source /emsdk/emsdk_env.sh

4.6：配置環(huán)境變量

為了以后每次啟動時不需要每次都激活emscripten環(huán)境，需要將激活功能放到環(huán)境變量中，方便使用

找到MSYS2中你的用戶下“xx.bashrc”文件，將下面這句話添加到文件末尾。

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

在這里需要寫絕對路徑的

此時，在命令行中輸入

emcc -v

就能看到版本號了，說明安裝成功了。

?5：編譯FFmpeg

最近我發(fā)現(xiàn)deepseek是個好東西，有啥問題都可以用這個咨詢，我使用deepseek搜素了很多方案，以及各種博友的回答，都說使用“emconfigure ./configure”方式，但是，我也不知道是哪里出了問題，一直返回不是win32的有效應(yīng)用程序，我簡直跪了！

后來發(fā)現(xiàn)，直接使用"./configure"方式照樣也能編譯成功。下面是我配置FFmpeg編譯項參數(shù)

第一步：

./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

等待編譯完成就行，會將結(jié)果輸出到“/home/sutong/ffmpeg/build-wasm”我們指定的文件夾中。

以上操作但凡發(fā)現(xiàn)有錯誤后，需要進行清理再次進行編輯

make clean

（二）代碼應(yīng)用

1：創(chuàng)建Qt項目

創(chuàng)建一個套件是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
# 添加以下標(biāo)志以保留未使用的函數(shù)并導(dǎo)出符號
QMAKE_LFLAGS += -s ERROR_ON_UNDEFINED_SYMBOLS=0 -s EXPORT_ALL=1

在這里需要記住，靜態(tài)庫的加載一定是按照這個順序，否則代碼應(yīng)用一直報錯，我已經(jīng)踩坑過了。

3：代碼調(diào)用

在.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() << "調(diào)用<avformat_alloc_output_context2>，失敗，錯誤碼 = " << nErrorCode;
}
else
{qDebug() << "調(diào)用<avformat_alloc_output_context2>，成功，正確碼 = " << nErrorCode;
}

運行代碼，可以在瀏覽器中輸出日志，說明FFmpeg接口調(diào)用成功

總結(jié)

雖然編譯過程很簡答， 主要是環(huán)境配置以及在項目中的兼容程序，之前總是查詢emconfigure的使用，浪費了很長時間，發(fā)現(xiàn)不用調(diào)用“emconfigure”也可以編譯成功。

大家有什么問題可以留言告訴我，我也是第一次嘗試，接下來我會繼續(xù)分享Qt程序在WebAssmebly中使用，畢竟要學(xué)一學(xué)新技術(shù)呀！

我是糯諾諾米團，一名C++程序媛~