Use WebAssembly, refactoring

- Refactor build process. - Use WebAssembly instead of asm.js. - Bundle using rollup. - Add convenient API that works in browser and Node.js. - Add simple browser example. - Add mediainfo.js Node CLI.
buzz · Mar 19, 2020 · 7759697 · 7759697
1 parent d0df9b6
commit 7759697
Show file tree

Hide file tree

Showing 18 changed files with 389 additions and 116 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,9 +4,7 @@
 ThumbsDB
 \#*#
 .#*
-ZenLib
-MediaInfoLib
-Shared
-mediainfojs.o
-npm-debug.log
 /node_modules
+npm-debug.log
+/build
+/dist
diff --git a/build-deps.sh b/build-deps.sh
diff --git a/build.sh b/build.sh
diff --git a/examples/browser-simple/.eslintrc.js b/examples/browser-simple/.eslintrc.js
@@ -0,0 +1,11 @@
+module.exports = {
+  env: {
+    browser: true,
+  },
+  globals: {
+    MediaInfo: 'readable',
+  },
+  parserOptions: {
+    sourceType: 'script',
+  },
+}
diff --git a/examples/browser-simple/example.js b/examples/browser-simple/example.js
@@ -0,0 +1,34 @@
+const fileinput = document.getElementById('fileinput')
+const output = document.getElementById('output')
+
+const onChangeFile = (mediainfo) => {
+  const file = fileinput.files[0]
+  if (file) {
+    output.value = 'Working…'
+    mediainfo
+      .analyzeData({
+        readData: (chunkSize, offset) =>
+          new Promise((resolve, reject) => {
+            const reader = new FileReader()
+            reader.onload = (event) => {
+              if (event.target.error) {
+                reject(event.target.error)
+              }
+              resolve(new Uint8Array(event.target.result))
+            }
+            reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
+          }),
+        getSize: () => file.size,
+      })
+      .then((result) => {
+        output.value = result
+      })
+      .catch((error) => {
+        output.value = `An error occured:\n${error.stack}`
+      })
+  }
+}
+
+MediaInfo({ format: 'text' }).then((mediainfo) => {
+  fileinput.addEventListener('change', () => onChangeFile(mediainfo))
+})
diff --git a/examples/browser-simple/index.html b/examples/browser-simple/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>mediainfo.js simple demo</title>
+    <style>
+      html, body{
+        margin:0;
+        padding:0;
+      }
+      body * {
+        box-sizing: border-box;
+      }
+      #wrapper {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 8px;
+        position: absolute;
+        width: 100%;
+      }
+      #fileinput {
+        padding-bottom: 8px;
+      }
+      #output {
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="wrapper">
+      <input type="file" id="fileinput" name="fileinput" />
+      <textarea id="output"></textarea>
+    </div>
+    <script type="text/javascript" src="../../dist/mediainfo.js"></script>
+    <script type="text/javascript" src="./example.js"></script>
+  </body>
+</html>
diff --git a/examples/cli.js b/examples/cli.js
@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+const { open } = require('fs').promises
+const MediaInfo = require('../dist/mediainfo.js')
+
+const main = async (filePath) => {
+  let fileHandle
+  let mediainfo
+  try {
+    fileHandle = await open(filePath, 'r')
+    mediainfo = await MediaInfo({ format: 'text' })
+    const result = await mediainfo.analyzeData({
+      readData: async (size, offset) => {
+        const buffer = new Uint8Array(size)
+        await fileHandle.read(buffer, 0, size, offset)
+        return buffer
+      },
+      getSize: async () => (await fileHandle.stat()).size,
+    })
+    console.log(result)
+  } catch (error) {
+    console.error(error)
+  } finally {
+    fileHandle && (await fileHandle.close())
+    mediainfo && mediainfo.close()
+  }
+}
+
+const filePath = process.argv[2]
+if (!filePath) {
+  console.log(`Usage: ${process.argv[1]} FILENAME`)
+} else {
+  main(filePath)
+}
diff --git a/mediainfo.js b/mediainfo.js
diff --git a/mediainfo.js.mem b/mediainfo.js.mem
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.2",
   "description": "Emscripten port of MediaInfoLib displays information about video and audio files.",
   "author": "buzz",
-  "main": "mediainfo.js",
+  "main": "dist/mediainfo.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/buzz/mediainfo.js"
@@ -25,12 +25,17 @@
     "build": "bash scripts/build.sh web",
     "clean": "rimraf build dist vendor"
   },
+  "bin": {
+    "mediainfo.js": "./examples/cli.js"
+  },
   "dependencies": {},
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^11.0.2",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-prettier": "^3.1.2",
     "prettier": "^1.19.1",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "rollup": "^2.1.0"
   }
 }
diff --git a/post.js b/post.js
diff --git a/pre.js b/pre.js
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,12 @@
+import path from 'path'
+import commonjs from '@rollup/plugin-commonjs';
+
+export default {
+  input: path.resolve(__dirname, 'src', 'index.js'),
+  output: {
+    file: path.resolve(__dirname, 'dist', 'mediainfo.js'),
+    format: 'umd',
+    name: 'MediaInfo'
+  },
+  plugins: [commonjs()]
+};