Add diffing to the mp4 muxer

Use QUnit's string diff to highlight potential incompatibilities between the transmuxed and expected output.

@@ -399,4 +399,24 @@ form label {
     h3 {
     h3 {
         page-break-after: avoid;
         page-break-after: avoid;
     }
     }
+}
+
+/**
+ * Diff styling
+ */
+#comparison {
+  white-space: pre;
+}
+#comparison p {
+  white-space: normal;
+}
+ins, del {
+  text-decoration: none;
+}
+ins {
+  background-color: #C6E746;
+}
+
+del {
+  background-color: #EE5757
 }
 }
\ No newline at end of file

@@ -55,7 +55,15 @@
           </form>
           </form>
         </section>
         </section>
         <section>
         <section>
-          <h2>Comparison</h2>
+          <h2>Comparision</h2>
+          <div id="comparison">
+            A diff of the structure of the two MP4s will appear here
+            once you've specified an input TS file and a known working
+            MP4.
+          </div>
+        </section>
+        <section>
+          <h2>Structure</h2>
           <div class="result-wrapper">
           <div class="result-wrapper">
             <h3>videojs-contrib-hls</h3>
             <h3>videojs-contrib-hls</h3>
             <pre class="vjs-boxes">
             <pre class="vjs-boxes">
@@ -111,11 +119,21 @@
   <script src="js/mp4-inspector.js"></script>
   <script src="js/mp4-inspector.js"></script>
 
 
   <script src="../../src/bin-utils.js"></script>
   <script src="../../src/bin-utils.js"></script>
+
+  <!-- Include QUnit for object diffs -->
+  <script src="../../node_modules/qunitjs/qunit/qunit.js"></script>
   <script>
   <script>
     var inputs = document.getElementById('inputs'),
     var inputs = document.getElementById('inputs'),
         original = document.getElementById('original'),
         original = document.getElementById('original'),
         working = document.getElementById('working'),
         working = document.getElementById('working'),
 
 
+        // customize JSON.stringify for more readable TypedArrays
+        stringify,
+
+        vjsParsed,
+        workingParsed,
+        diffParsed,
+
         vjsBoxes = document.querySelector('.vjs-boxes'),
         vjsBoxes = document.querySelector('.vjs-boxes'),
         workingBoxes = document.querySelector('.working-boxes'),
         workingBoxes = document.querySelector('.working-boxes'),
 
 
@@ -130,6 +148,37 @@
           console.log(event.type);
           console.log(event.type);
         };
         };
 
 
+
+    stringify = function(object) {
+      return JSON.stringify(object, function(s, o) {
+        if (o instanceof Uint8Array) {
+          return Array.prototype.slice.call(o).map(function(byte) {
+            return ('00' + byte.toString(16)).slice(-2);
+          });
+        } else if (o instanceof Uint32Array) {
+          return Array.prototype.slice.call(o).map(function(byte) {
+            return ('00000000' + byte.toString(16)).slice(-8);
+          });
+        }
+        return o;
+      }, ' ');
+    };
+
+    // output a diff of the two parsed MP4s
+    diffParsed = function() {
+      var comparison;
+      if (vjsParsed && workingParsed) {
+        comparison = document.querySelector('#comparison')
+        comparison.innerHTML = '<p>A <del>red background</del> indicates ' +
+          'properties present in the transmuxed file but missing from the ' +
+          'working version. A <ins>green background</ins> indicates ' +
+          'properties present in the working version but missing in the ' +
+          'transmuxed output.</p>' +
+          QUnit.diff(stringify(vjsParsed, null, ' '),
+                     stringify(workingParsed, null, ' '));
+      }
+    };
+
     mediaSource.addEventListener('sourceopen', function() {
     mediaSource.addEventListener('sourceopen', function() {
       var
       var
         buffer = mediaSource.addSourceBuffer('video/mp4;codecs=avc1.4d400d'),
         buffer = mediaSource.addSourceBuffer('video/mp4;codecs=avc1.4d400d'),
@@ -177,9 +226,12 @@
         bytes.set(events[0]);
         bytes.set(events[0]);
         bytes.set(events[1], events[0].byteLength);
         bytes.set(events[1], events[0].byteLength);
 
 
-        console.log('transmuxed', videojs.inspectMp4(bytes))
+        vjsParsed = videojs.inspectMp4(bytes);
+        console.log('transmuxed', vjsParsed);
+        diffParsed();
+
         // clear old box info
         // clear old box info
-        vjsBoxes.innerHTML = JSON.stringify(videojs.inspectMp4(bytes), null, ' ');
+        vjsBoxes.innerHTML = stringify(vjsParsed, null, ' ');
 
 
         // write out the result
         // write out the result
         hex += '<pre>';
         hex += '<pre>';
@@ -197,9 +249,12 @@
             bytes = new Uint8Array(reader.result);
             bytes = new Uint8Array(reader.result);
 
 
 
 
-        console.log("boxes", videojs.inspectMp4(bytes));
+        workingParsed = videojs.inspectMp4(bytes);
+        console.log('working', workingParsed);
+        diffParsed();
+
         // clear old box info
         // clear old box info
-        workingBoxes.innerHTML = JSON.stringify(videojs.inspectMp4(bytes), null, ' ');
+        workingBoxes.innerHTML = stringify(workingParsed, null, ' ');
 
 
         // output the hex dump
         // output the hex dump
         hex += '<pre>';
         hex += '<pre>';