Version

• emcc v1.38.38
• ffmpeg latest version

Compile Script

now version build

##
#JavaScript heap out of memory
--enable-small  \

CPPFLAGS="-D_POSIX_C_SOURCE=200112 -D_XOPEN_SOURCE=600" \
emconfigure ./configure --cc="emcc" \
--prefix=$(pwd)/../dist --enable-cross-compile --target-os=none --arch=x86_64 \
--cpu=generic --disable-ffplay --disable-ffprobe  \
--disable-asm --disable-doc --disable-devices --disable-pthreads \
--disable-w32threads  --disable-hwaccels \
--disable-parsers --disable-bsfs --disable-debug --disable-protocols \
--disable-indevs --disable-outdevs --enable-protocol=file --enable-protocol=rtmp --enable-protocol=pipe \
--enable-network --enable-protocol=tcp --enable-demuxer=rtsp --enable-decoder=h264 --enable-encoder=libx264 \
--enable-demuxer=flv 

emcc -s ASSERTIONS=1 -s VERBOSE=1 -s TOTAL_MEMORY=33554432 \
-s ALLOW_MEMORY_GROWTH=1 -s WASM=1 -O2 -v ffmpeg.bc \
-o ../ffmpeg.js --pre-js ./pre.js --post-js ./post.js

emcc  -s ASSERTIONS=1 -s VERBOSE=1 -s TOTAL_MEMORY=33554432 -s EMTERPRETIFY_WHITELIST='["_main","_ffmpeg_parse_options","_open_files","_open_input_file","_avformat_open_input","_ff_id3v2_read","_id3v2_read_internal","_avio_read","_fill_buffer","_io_read_packet","_ffurl_read","_file_read","_avformat_find_stream_info","_read_frame_internal","_ff_read_packet","_rawvideo_read_packet","_av_get_packet","_append_packet_chunked","_transcode","_av_read_frame"]'  -s EMTERPRETIFY_ASYNC=1  -s BINARYEN_TRAP_MODE=js -s EMTERPRETIFY=1  -s ALLOW_MEMORY_GROWTH=1 -s WASM=1 --js-library ./library.js -O3 -v ffmpeg.bc -o ./ffmpeg.js --pre-js ./ffmpeg_pre.js --post-js ./ffmpeg_worker.js 

# Compile
make 

#

Build FFmpeg to WebAssmbly

git clone https://github.com/juj/emsdk && cd emsdk 
./emsdk install sdk-incoming-64bit binaryen-master-64bit 
./emsdk activate sdk-incoming-64bit binaryen-master-64bit
. ./emsdk_env.sh

https://trac.ffmpeg.org/wiki/CompilationGuide/Centos

# 首先，从github等地方获取ffmpeg的源代码
git clone https://github.com/FFmpeg/FFmpeg
cd FFmpeg

# 开始configure
# 这里的参数参考自videoconverter.js，其中注意需要额外带上下面第一行的CPPFLAGS
# 否则不能在最新的emcripten下编译通过
# 这里通过--cc="emcc"来指定编译器为emcc，emcc会调用clang来将target设置成LLVM
CPPFLAGS="-D_POSIX_C_SOURCE=200112 -D_XOPEN_SOURCE=600" \
emconfigure ./configure --cc="emcc" \
--prefix=$(pwd)/../dist --enable-cross-compile --target-os=none --arch=x86_64 \
--cpu=generic --disable-ffplay --disable-ffprobe --disable-ffserver \
--disable-asm --disable-doc --disable-devices --disable-pthreads \
--disable-w32threads --disable-network --disable-hwaccels \
--disable-parsers --disable-bsfs --disable-debug --disable-protocols \
--disable-indevs --disable-outdevs --enable-protocol=file

https://blog.csdn.net/xueyushenzhou/article/details/82856860

centos 7 gcc Upgrade 7.2

https://www.booolen.com/post/20190403_centos%E4%B8%8Bglibcxx_3.4.20%E7%9A%84%E9%97%AE%E9%A2%98/

install too long...

centos 7 Change gcc Version

https://www.cnblogs.com/dj0325/p/8481092.html

scl --list
scl enable devtoolset-7 bash

[root@localhost lib64]# mv libstdc++.so.6 libstdc++.so.6bck
[root@localhost lib64]# ln -s libstdc++.so.6.0.24 libstdc++.so.6
[root@localhost lib64]# strings /usr/lib64/libstdc++.so.6 | grep GLIBC

Install Cmake

cmake 3.43 or higher version required. https://blog.csdn.net/cloudeagle_bupt/article/details/82498255 http://jotmynotes.blogspot.com/2016/10/updating-cmake-from-2811-to-362-or.html

Start Compile ffmpeg LLVM bitcode

make

possibley get error but It's ok

file ffmpeg_g 

这里放出我最终自己使用pre.js和post.js代码

https://github.com/disoul/videoconverter.js/blob/master/build/ffmpeg_pre.js https://github.com/disoul/videoconverter.js/blob/master/build/ffmpeg_post.js 好啦好啦，扯了这么多，终于万事俱备可以愉快的开始最后一步编译啦

Final Battle Compile LLVM to WebAssmbly

这里使用的命令依旧是emcc，但是注意此时emcc的输入为LLVM bitcode，它将会调用emscriptem来将其编译到js (和第一步emcc的行为不同，因为输入格式不同，target也会不同)

# 这里的ffmpeg是上一步编译输出的LLVM bitcode
cp ffmpeg ffmpeg.bc

# 最终的输出是 -o 指定的，这些 -s 参数的意义可以从emcc的文档中找到
# 这里打开了ALLOW_MEMORY_GROWTH是因为在移动端测试下会遇到内存(wasm/asm.js的虚拟内存)
# 不够的情况，默认内存大小是TOTAL_MEMORY指定的
# 设置WASM=1就会编译到WebAssembly,默认编译到asm.js
emcc -s ASSERTIONS=1 -s VERBOSE=1 -s TOTAL_MEMORY=33554432 \
-s ALLOW_MEMORY_GROWTH=1 -s WASM=1 -O2 -v ffmpeg.bc \
-o ../ffmpeg.js --pre-js ../ffmpeg_pre.js --post-js ../ffmpeg_post.js

emcc ffmpeg.bc -o ffmpeg.html -s TOTAL_MEMORY=33554432 

Open Chrome Experimental WebAssmbly

add some html index.html

<html>
<p>ffmpeg.js</p>
<input id="file-input" type="file" />
</html>
<script>

var worker = new Worker('worker.js');
var inputElement = document.getElementById("file-input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
var fileList = this.files; 
console.log(fileList)
worker.postMessage(fileList);
}
</script>

worker.js

self.importScripts('ffmpeg.js');

onmessage = function(e) {
  console.log('ffmpeg_run', ffmpeg_run);
  var files = e.data;
  console.log(files);
  ffmpeg_run({
   // arguments: ['-i', 'https://gw.alicdn.com/bao/uploaded/LB1l2iXISzqK1RjSZFjXXblCFXa.mp4?file=LB1l2iXISzqK1RjSZFjXXblCFXa.mp4', '-b:v', '64k', '-bufsize', '64k', '-vf', 'showinfo', '-strict', '-2', 'out.mp4'],
  // arguments: ['-i', '/input/' + files[0].name  'out.mp4'],
   arguments: ['-version'],
    //files: files,
  }, function(results) {
    console.log('result',results);
   // self.postMessage(results[0].data, [results[0].data]);
  });

}

enjoy~