编译WebAssembly版本的FFmpeg（ffmpeg.wasm）：（5）ffmpeg.wasm v0.3 - pre.js与实时音视频流

var logger = function(){}

Module['setLogger'] = function(_logger) { logger = _logger; };
Module['print'] = function(message) { logger(message, 'stdout'); };
Module['printErr'] = function(message) { logger(message, 'stderr'); };

#!/bin/bash -x

set -e -o pipefail

BUILD_DIR=$PWD/build

build_x264() {
  cd third_party/x264
  emconfigure ./configure \
    --disable-asm \
    --disable-thread \
    --prefix=$BUILD_DIR
  emmake make install-lib-static
  cd -
}

configure_ffmpeg() {
  emconfigure ./configure \
    --enable-gpl \
    --enable-libx264 \
    --disable-pthreads \
    --disable-x86asm \
    --disable-inline-asm \
    --disable-doc \
    --disable-stripping \
    --disable-ffprobe \
    --disable-ffplay \
    --disable-ffmpeg \
    --prefix=$BUILD_DIR \
    --extra-cflags="-I$BUILD_DIR/include" \
    --extra-cxxflags="-I$BUILD_DIR/include" \
    --extra-ldflags="-L$BUILD_DIR/lib" \
    --nm="llvm-nm -g" \
    --ar=emar \
    --cc=emcc \
    --cxx=em++ \
    --objcc=emcc \
    --dep-cc=emcc
}

make_ffmpeg() {
  NPROC=$(grep -c ^processor /proc/cpuinfo)
  emmake make -j${NPROC}
}

build_ffmpegjs() {
  emcc \
    -I. -I./fftools -I$BUILD_DIR/include \
    -Llibavcodec -Llibavdevice -Llibavfilter -Llibavformat -Llibavresample -Llibavutil -Llibpostproc -Llibswscale -Llibswresample -Llibpostproc -L${BUILD_DIR}/lib \
    -Qunused-arguments -Oz \
    -o dist/ffmpeg-core.js fftools/ffmpeg_opt.c fftools/ffmpeg_filter.c fftools/ffmpeg_hw.c fftools/cmdutils.c fftools/ffmpeg.c \
    -lavdevice -lavfilter -lavformat -lavcodec -lswresample -lswscale -lavutil -lpostproc -lm -lx264 \
    --closure 1 \
    --pre-js javascript/prepend.js \    # add HERE
    -s USE_SDL=2 \
    -s MODULARIZE=1 \
    -s SINGLE_FILE=1 \
    -s EXPORTED_FUNCTIONS="[_ffmpeg]" \
    -s EXTRA_EXPORTED_RUNTIME_METHODS="[cwrap, FS, getValue, setValue]" \
    -s TOTAL_MEMORY=33554432 \
    -s ALLOW_MEMORY_GROWTH=1
}

main() {
  build_x264
  configure_ffmpeg
  make_ffmpeg
  build_ffmpegjs
}

main "$@"
view rawbuild_ffmpeg-core.js-v0.3.sh hosted with ❤ by GitHub

/**
 * This script is loaded by ffmpegwasm-v0.2.js
 */

let Module = null;
let ffmpeg = null;

const load = () => {
  global.importScripts('./ffmpeg-core.js');
  global.Module()
    .then((_Module) => {
      Module = _Module;
      Module.setLogger(m => console.log(m));
      ffmpeg = Module.cwrap('ffmpeg', 'number', ['number', 'number']);
      postMessage({ action: 'load', payload: { loaded: true } });
    });
};
 
const transcode = ({ data: _data, outputExt }) => {
  /* When an array received from postMessage,
   * its format will change to an "ArrayLike" object,
   * we need to transform it back to array
   */
  const data = Uint8Array.from({ ..._data, length: Object.keys(_data).length });
  const args = ['./ffmpeg', '-i', 'file:media', `media.${outputExt}`];
  Module.FS.writeFile('media', data);
  ffmpeg(args.length, strList2ptr(args));
  postMessage({
    action: 'transcode',
    payload: {
      data: Module.FS.readFile(`media.${outputExt}`),
    },
  });
};

global.addEventListener('message', ({ action, payload }) => {
  if (action === 'load') {
    load(payload);
  } else if (action === 'transcode') {
    transcode(payload);
  }
});
view rawworker-v0.3.js hosted with ❤ by GitHub

<video id="webcam" width="320px" height="180px"></video>
<script>
const webcam = document.getElementById('webcam');
(async () => {
  webcam.srcObject = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  await webcam.play();
})();
</script>

const startRecording = () => {
  const rec = new MediaRecorder(webcam.srcObject);
  const chunks = [];
  rec.ondataavailable = e => chunks.push(e.data);
  rec.onstop = async () => {
    transcode(new Uint8Array(await (new Blob(chunks)).arrayBuffer()));
  };
  rec.start();
};