FFmpeg to WASM build setup + Vue app.

.dockerignore

@@ -0,0 +1 @@
+www/node_modules/

.gitignore

@@ -0,0 +1 @@
+dist/

Dockerfile

@@ -0,0 +1,77 @@
+FROM emscripten/emsdk as build
+
+ARG FFMPEG_VERSION=4.3.1
+ARG X264_VERSION=master
+
+ARG PREFIX=/opt/ffmpeg
+ARG MAKEFLAGS="-j4"
+
+RUN apt-get update && apt-get install -y autoconf libtool build-essential
+
+# libx264
+RUN cd /tmp/ && \
+  wget https://code.videolan.org/videolan/x264/-/archive/master/x264-master.tar.gz && \
+  tar zxf x264-${X264_VERSION}.tar.gz
+
+RUN cd /tmp/x264-${X264_VERSION} && \
+  emconfigure ./configure \
+  --prefix=${PREFIX} \
+  --host=i686-gnu \
+  --enable-static \
+  --disable-cli \
+  --disable-asm \
+  --extra-cflags="-s USE_PTHREADS=1"
+
+RUN cd /tmp/x264-${X264_VERSION} && \
+  emmake make install-lib-static -j4
+
+# Get ffmpeg source.
+RUN cd /tmp/ && \
+  wget http://ffmpeg.org/releases/ffmpeg-${FFMPEG_VERSION}.tar.gz && \
+  tar zxf ffmpeg-${FFMPEG_VERSION}.tar.gz && rm ffmpeg-${FFMPEG_VERSION}.tar.gz
+
+ARG CFLAGS="-s USE_PTHREADS -O3 -I${PREFIX}/include"
+ARG LDFLAGS="$CFLAGS -L${PREFIX}/lib -s INITIAL_MEMORY=33554432"
+
+# Compile ffmpeg.
+RUN cd /tmp/ffmpeg-${FFMPEG_VERSION} && \
+  emconfigure ./configure \
+  --prefix=${PREFIX} \
+  --target-os=none \
+  --arch=x86_32 \
+  --enable-cross-compile \
+  --disable-x86asm \
+  --disable-inline-asm \
+  --disable-stripping \
+  --disable-programs \
+  --disable-doc \
+  --enable-gpl \
+  --enable-libx264 \
+  --extra-cflags="$CFLAGS" \
+  --extra-cxxflags="$CFLAGS" \
+  --extra-ldflags="$LDFLAGS" \
+  --nm="llvm-nm -g" \
+  --ar=emar \
+  --as=llvm-as \
+  --ranlib=llvm-ranlib \
+  --cc=emcc \
+  --cxx=em++ \
+  --objcc=emcc \
+  --dep-cc=emcc
+
+RUN cd /tmp/ffmpeg-${FFMPEG_VERSION} && \
+  emmake make -j4 && \
+  emmake make install
+
+# RUN	cd /build && \
+#   emcc -L/opt/ffmpeg/lib -I/opt/ffmpeg/include/ src/main.c \
+# 	-s EXPORTED_FUNCTIONS='["_version", "_openfile"]' \
+# 	-s EXTRA_EXPORTED_RUNTIME_METHODS="[FS, cwrap, ccall, setValue, writeAsciiToMemory]" \
+# 	-s INITIAL_MEMORY=268435456 \
+# 	-lavcodec -lavformat -lavfilter -lavdevice -lswresample -lswscale -lavutil -lm -lx264 -pthread \
+# 	-o ffmpeg-webtools.js
+
+WORKDIR /build
+COPY ./src/main.c /build/src/main.c
+COPY ./Makefile /build/Makefile
+# RUN make

Makefile

@@ -0,0 +1,8 @@
+dist/ffmpeg-webtools.js:
+	mkdir -p dist && \
+	emcc -L/opt/ffmpeg/lib -I/opt/ffmpeg/include/ src/main.c \
+	-s EXPORTED_FUNCTIONS='["_version", "_openfile"]' \
+	-s EXTRA_EXPORTED_RUNTIME_METHODS="[FS, cwrap, ccall, setValue, writeAsciiToMemory]" \
+	-s INITIAL_MEMORY=268435456 \
+	-lavcodec -lavformat -lavfilter -lavdevice -lswresample -lswscale -lavutil -lm -lx264 -pthread \
+	-o $@

docker-compose.yml

@@ -0,0 +1,7 @@
+version: '3'
+
+services:
+  ffmpeg-webtools:
+    build: .
+    volumes:
+      - "./:/build"

src/main.c

@@ -0,0 +1,38 @@
+#include <stdio.h>
+#include <math.h>
+
+#include <libavcodec/avcodec.h>
+#include <libavformat/avformat.h>
+#include <libavutil/avutil.h>
+
+
+void version() {
+    printf("%s\n", AV_STRINGIFY(LIBAVFORMAT_VERSION));
+}
+
+void openfile() {
+    FILE *file = fopen("testingfs", "rb");
+    if (!file) {
+      printf("cannot open file\n");
+    }
+    fclose(file);
+
+    AVFormatContext *pFormatContext = avformat_alloc_context();
+    if (!pFormatContext) {
+      printf("ERROR: could not allocate memory for Format Context\n");
+    }
+
+    printf("opening the input file: %s and loading format (container) header\n", "testingfs");
+
+    // Open the file and read header.
+    int ret;
+    if ((ret = avformat_open_input(&pFormatContext, "testingfs", NULL, NULL)) < 0) {
+        printf("ERROR: could not open the file. Error: %d\n", ret);
+        printf("%s", av_err2str(ret));
+    }
+
+    printf("format: %s, duration: %lld us, bit_rate: %lld\n",
+      pFormatContext->iformat->name,
+      pFormatContext->duration,
+      pFormatContext->bit_rate);
+}

www/.eslintignore

@@ -0,0 +1 @@
+../pkg/

www/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

www/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

www/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "ffmpeg-webtools-viewer",
+  "version": "0.0.1",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "deploy": "npm run build && gh-pages -d dist"
+  },
+  "dependencies": {
+    "bootstrap": "^4.5.2",
+    "bootstrap-vue": "^2.16.0",
+    "core-js": "^3.6.5",
+    "gh-pages": "^3.1.0",
+    "vue": "^2.6.11",
+    "wasm-loader": "^1.3.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@wasm-tool/wasm-pack-plugin": "^1.3.1",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11",
+    "hello": "file:../dist"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

www/public/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script src="ffmpeg-webtools.js"></script>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

www/src/App.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <b-navbar type="dark" variant="dark">
+      <div class="container">
+        <b-navbar-nav>
+          <b-nav-item href="#">
+            FFmpeg WebTools
+          </b-nav-item>
+        </b-navbar-nav>
+      </div>
+    </b-navbar>
+
+    <GitHubCorner />
+
+    <div id="app" class="container">
+      <h3>FFmpeg WebTools</h3>
+      <hr />
+      <File />
+    </div>
+
+    <footer class="container mt-4 text-center">
+      <hr />
+      <div class="text-muted">
+        <ul>
+          <li>{{ name }}-{{ version }}</li>
+          <li><a href="https://github.com/alfg/ffmpeg-webtools">Source</a></li>
+          <li><a href="https://github.com/alfg/ffmpeg-webtools/issues">Report Bugs</a></li>
+        </ul>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { name, version } from '../package.json';
+import GitHubCorner from './components/GitHubCorner.vue';
+import File from './components/File.vue';
+
+export default {
+  name: 'App',
+  components: {
+    File,
+    GitHubCorner,
+  },
+  data() {
+    return {
+      name,
+      version,
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  margin-top: 40px;
+}
+
+footer ul {
+  display: inline-block;
+  padding-left: 0;
+  text-align: left;
+  width: 100%;
+}
+
+footer ul li {
+  display: inline;
+  margin: 0 6px;
+  list-style: none;
+}
+</style>

www/src/components/File.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="file">
+        <b-form-group label="Select a file:" label-for="file">
+          <b-form-file
+              id="file"
+              accept="video/mp4"
+              v-model="file"
+              :state="Boolean(file)"
+              placeholder="Choose a file or drop it here..."
+              drop-placeholder="Drop file here..."
+              @change="onFile"
+          ></b-form-file>
+        </b-form-group>
+
+        <b-progress
+          height="2px"
+          v-if="showProgress"
+          :value="progress"
+          max="100"></b-progress>
+
+        <div v-if="data">
+          <div class="mt-3">Selected file: {{ file ? `${file.name}: ${file.size} bytes` : '' }}</div>
+          <hr />
+          {{ info }}
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'File',
+  components: {
+  },
+  data() {
+    return {
+      file: null,
+      data: null,
+      progress: 0,
+      showProgress: false,
+    }
+  },
+  computed: {
+    info() {
+
+      const data = this.data;
+      console.log('writing data to memfs');
+      window.Module.FS.writeFile('testingfs', new Uint8Array(data));
+      console.log('writing data to memfs done');
+
+      window.Module.ccall('version');
+      // Window.Module.ccall('openfile');
+      return 'info';
+    }
+  },
+  methods: {
+    onFile(event) {
+      this.data = null;
+      this.progress = 0;
+      this.showProgress = true;
+
+      const file = event.dataTransfer ? event.dataTransfer.files[0] : event.target.files[0];
+      const reader = new FileReader();
+
+      // reader.onload = e => this.$emit("load", event.target.result);
+      reader.onload = (event) => {
+        this.progress = 100;
+        this.data = new Uint8Array(event.target.result);
+        setTimeout(() => { this.showProgress = false; }, 2000);
+      }
+      reader.onprogress = (event) => {
+        if (event.lengthComputable) {
+          this.progress = parseInt(((event.loaded / event.total) * 100), 10);
+        }
+      }
+      reader.readAsArrayBuffer(file);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tree-view {
+  overflow: auto;
+  height: 60vh;
+}
+</style>

www/src/components/GitHubCorner.vue

@@ -0,0 +1,74 @@
+<template>
+  <!-- http://tholman.com/github-corners/  -->
+  <a
+    href="https://github.com/alfg/ffmpeg-webtools"
+    class="github-corner"
+    aria-label="View source on GitHub"
+  >
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 250 250"
+      style="fill:rgb(56, 141, 61); color:#fff; position: absolute; top: 0; border: 0; right: 0;"
+      aria-hidden="true"
+    >
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,
+        78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,
+        87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor"
+        style="transform-origin: 130px 106px;"
+        class="octo-arm"
+      />
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,
+        99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,
+        51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,
+        56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,
+        80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,
+        107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,
+        120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor"
+        class="octo-body"
+      />
+    </svg>
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'GitHubCorner',
+};
+</script>
+
+<style>
+.github-corner {
+  z-index: 10;
+}
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
+@media (max-width: 500px) {
+  .github-corner:hover .octo-arm {
+    animation: none;
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+</style>

www/src/main.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import BootstrapVue from 'bootstrap-vue';
+import App from './App.vue'
+
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+
+// import("hello").then(mod => {
+  // Vue.prototype.$mp4 = mod;
+
+
+  Vue.use(BootstrapVue);
+
+  Vue.config.productionTip = false
+
+  new Vue({
+    render: h => h(App),
+  }).$mount('#app')
+// });
+
+

www/vue.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  pages: {
+    index: {
+      entry: 'src/main.js',
+      title: 'FFMpeg WebTools',
+    }
+  },
+  publicPath: process.env.NODE_ENV === 'production'
+    ? '/ffmpeg-webtools/'
+    : '/',
+};

www/webpack.config.js

@@ -0,0 +1,13 @@
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
+
+module.exports = {
+  plugins: [
+
+    new WasmPackPlugin({
+      crateDirectory: path.resolve(__dirname, "crate"),
+      args: "--log-level warn",
+      extraArgs: "--no-typescript",
+    }),
+
+  ]
+};