為了工作上的需要,試著把FFMpeg放入Browser中,雖然成功了,但是效果沒想像的好,尤其是在Mobile Browsers上。 不過這也是WebAssembly打算改善的問題,目前只有Edge跟Firefox支援Asm.js程度比較高。 在FFmpeg這項目吃盡苦頭,寫個筆記紀錄怎麼認真玩Emscripten。 我是參考audioconverter.js 不過用他的Script無法使用。只好自行摸索出適合的方式。
我的目標市 FFmpeg + fdk_aac ,接下來的教學就是如何做出一個包涵這兩樣的 Javascript
Build FDK AAC 這個跟一般的玩Emscripten玩法沒差太多
1 2 3 4 5 6 7 8 9 10 11 $ git clone https://github.com/mstorsjo/fdk-aacsed -i 's/gcc/emcc/g' config.mak $ cd fdk-aac $ ./autogen.sh $ emconfigure ./configure --prefix=/home/hm/local $ emmake make $ make install ```sed -i 's/gcc/emcc/g' config.makdd ### Build FFMpeg 這才是花了很多時間在Try and Error上,照AudioConvert.JS那樣寫對我來說就是沒用 因為原先emconfigure的方式無法抓到 libfdk_aac,只好手動用原先的方式來作
$ cd ffmpeg $ PKG_CONFIG_PATH=/home/hm/local/lib/pkgconfig/ ./configure –disable-asm –disable-outdevs –disable-indevs –disable-filters –disable-bsfs –disable-decoders –enable-decoder=mp3,h264 –disable-demuxers –enable-demuxer=mpegts –disable-muxers –enable-muxer=mpegts –disable-protocols –enable-protocol=file –enable-libfdk-aac –disable-encoders –enable-encoder=libfdk_aac –enable-filter=aresample –disable-parsers –disable-doc –disable-stripping –disable-protocol=rtp,tcp,udp,http –disable-pthreads –disable-debug –disable-network –enable-parser=h264 –disable-filter=crop –extra-cflags=-I/home/hm/local/include
$ sed -i ‘s/gcc/emcc/g’ config.mak $ sed -i ‘s/g++/emcc/g’ config.mak $ sed -i ‘s/VALGRIND_H 1/VALGRIND_H 0/g’ config.h $ make
1 如果沒意外的話彙編出**不能動**的ffmpeg,不過在意料之中,編譯過程中也會告訴你沒有找到`fdk-aac`,這都無所謂,畢竟這只是中間產物,要進行最後的動作才行。
$ mv ffmpeg ffmpeg.bc $ emcc -O2 ffmpeg.bc /home/hm/local/lib/libfdk-aac.a -o ffmpeg.js
$ node ffmpeg.js ffmpeg version 3.1.1 Copyright (c) 2000-2016 the FFmpeg developers
1 2 3 4 成功了,不過還是不能在網頁上用 ### Runs inside browsers 參考AudioConvert.js的方式,將`ffmpeg-pre.js`和`ffmpeg-post.js`複製出來 進行編譯
$ emcc -g4 -Os –memory-init-file 0 ffmpeg.bc /home/hm/local/lib/libfdk-aac.a -o ffmpeg.js –pre-js ffmpeg_pre.js –post-js ffmpeg_post.js
``` 然後將ffmpeg.js複製到audioconvert.js
中的測試網頁中,就能看到他能夠動作了
Conclusion emcc的表現真的有夠怪異,如果在網頁版的編譯加上-g3
以上等級的debuger info,編出來的東西跟本部能用。 編譯的過程更是痛苦連連,效果也不如想像中的好 希望WebAssembly可以彌補這一塊