Add more bindings for AVFormatContext data. Add Overview page in Vue. Add required CORS headers for supporting SharedArrayBuffer in Firefox.

www/src/components/File.vue

@@ -20,19 +20,25 @@
 
         <div v-if="data">
           <div class="mt-3">Selected file: {{ file ? `${file.name}: ${file.size} bytes` : '' }}</div>
-          <hr />
-          {{ info }}
 
-          avformat_version: {{ avformat_version }}
+          <b-tabs class="mt-4">
+            <b-tab title="Overview" class="mt-2">
+              <div v-if="data">
+                <Overview :info="info" />
+              </div>
+            </b-tab>
+          </b-tabs>
         </div>
-
     </div>
 </template>
 
 <script>
+import Overview from './Overview.vue';
+
 export default {
   name: 'File',
   components: {
+    Overview,
   },
   data() {
     return {
@@ -44,18 +50,10 @@ export default {
   },
   computed: {
     avformat_version() {
-      // return window.Module.ccall('c_avformat_version', 'string');
       return window.Module.c_avformat_version();
     },
     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';
+      return this.data && window.Module.get_file_info();
     }
   },
   methods: {
@@ -71,6 +69,7 @@ export default {
       reader.onload = (event) => {
         this.progress = 100;
         this.data = new Uint8Array(event.target.result);
+        window.Module.FS.writeFile('file', new Uint8Array(this.data));
         setTimeout(() => { this.showProgress = false; }, 2000);
       }
       reader.onprogress = (event) => {

www/src/components/Overview.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h4>AVContext Info</h4>
+    <b-table stacked :items="items"></b-table>
+
+    <h4>AVContext Streams</h4>
+    <b-table striped hover :items="streams"></b-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Overview',
+  props: ['info'],
+  computed: {
+      streams() {
+          const s = [];
+          for (let i = 0; i < this.info.streams.size(); i++) {
+              s.push(this.info.streams.get(i));
+          }
+          return s;
+      }
+  },
+  data() {
+    return {
+      items: [
+        {
+          name: this.info.name,
+          duration: this.info.duration,
+          bit_rate: this.info.bit_rate,
+          url: this.info.url,
+          nb_streams: this.info.nb_streams,
+          flags: this.info.flags,
+        },
+      ]
+    }
+  }
+}
+</script>

www/vue.config.js

@@ -8,4 +8,12 @@ module.exports = {
   publicPath: process.env.NODE_ENV === 'production'
     ? '/ffmpeg-webtools/'
     : '/',
+  configureWebpack: {
+    devServer: {
+      headers: {
+        'Cross-Origin-Opener-Policy': 'same-origin',
+        'Cross-Origin-Embedder-Policy': 'require-corp',
+      }
+    }
+  }, 
 };