Add diffing to the mp4 muxer
Use QUnit's string diff to highlight potential incompatibilities between the transmuxed and expected output.
Showing
2 changed files
with
80 additions
and
5 deletions
... | @@ -400,3 +400,23 @@ form label { | ... | @@ -400,3 +400,23 @@ form label { |
400 | page-break-after: avoid; | 400 | page-break-after: avoid; |
401 | } | 401 | } |
402 | } | 402 | } |
403 | |||
404 | /** | ||
405 | * Diff styling | ||
406 | */ | ||
407 | #comparison { | ||
408 | white-space: pre; | ||
409 | } | ||
410 | #comparison p { | ||
411 | white-space: normal; | ||
412 | } | ||
413 | ins, del { | ||
414 | text-decoration: none; | ||
415 | } | ||
416 | ins { | ||
417 | background-color: #C6E746; | ||
418 | } | ||
419 | |||
420 | del { | ||
421 | background-color: #EE5757 | ||
422 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -55,7 +55,15 @@ | ... | @@ -55,7 +55,15 @@ |
55 | </form> | 55 | </form> |
56 | </section> | 56 | </section> |
57 | <section> | 57 | <section> |
58 | <h2>Comparison</h2> | 58 | <h2>Comparision</h2> |
59 | <div id="comparison"> | ||
60 | A diff of the structure of the two MP4s will appear here | ||
61 | once you've specified an input TS file and a known working | ||
62 | MP4. | ||
63 | </div> | ||
64 | </section> | ||
65 | <section> | ||
66 | <h2>Structure</h2> | ||
59 | <div class="result-wrapper"> | 67 | <div class="result-wrapper"> |
60 | <h3>videojs-contrib-hls</h3> | 68 | <h3>videojs-contrib-hls</h3> |
61 | <pre class="vjs-boxes"> | 69 | <pre class="vjs-boxes"> |
... | @@ -111,11 +119,21 @@ | ... | @@ -111,11 +119,21 @@ |
111 | <script src="js/mp4-inspector.js"></script> | 119 | <script src="js/mp4-inspector.js"></script> |
112 | 120 | ||
113 | <script src="../../src/bin-utils.js"></script> | 121 | <script src="../../src/bin-utils.js"></script> |
122 | |||
123 | <!-- Include QUnit for object diffs --> | ||
124 | <script src="../../node_modules/qunitjs/qunit/qunit.js"></script> | ||
114 | <script> | 125 | <script> |
115 | var inputs = document.getElementById('inputs'), | 126 | var inputs = document.getElementById('inputs'), |
116 | original = document.getElementById('original'), | 127 | original = document.getElementById('original'), |
117 | working = document.getElementById('working'), | 128 | working = document.getElementById('working'), |
118 | 129 | ||
130 | // customize JSON.stringify for more readable TypedArrays | ||
131 | stringify, | ||
132 | |||
133 | vjsParsed, | ||
134 | workingParsed, | ||
135 | diffParsed, | ||
136 | |||
119 | vjsBoxes = document.querySelector('.vjs-boxes'), | 137 | vjsBoxes = document.querySelector('.vjs-boxes'), |
120 | workingBoxes = document.querySelector('.working-boxes'), | 138 | workingBoxes = document.querySelector('.working-boxes'), |
121 | 139 | ||
... | @@ -130,6 +148,37 @@ | ... | @@ -130,6 +148,37 @@ |
130 | console.log(event.type); | 148 | console.log(event.type); |
131 | }; | 149 | }; |
132 | 150 | ||
151 | |||
152 | stringify = function(object) { | ||
153 | return JSON.stringify(object, function(s, o) { | ||
154 | if (o instanceof Uint8Array) { | ||
155 | return Array.prototype.slice.call(o).map(function(byte) { | ||
156 | return ('00' + byte.toString(16)).slice(-2); | ||
157 | }); | ||
158 | } else if (o instanceof Uint32Array) { | ||
159 | return Array.prototype.slice.call(o).map(function(byte) { | ||
160 | return ('00000000' + byte.toString(16)).slice(-8); | ||
161 | }); | ||
162 | } | ||
163 | return o; | ||
164 | }, ' '); | ||
165 | }; | ||
166 | |||
167 | // output a diff of the two parsed MP4s | ||
168 | diffParsed = function() { | ||
169 | var comparison; | ||
170 | if (vjsParsed && workingParsed) { | ||
171 | comparison = document.querySelector('#comparison') | ||
172 | comparison.innerHTML = '<p>A <del>red background</del> indicates ' + | ||
173 | 'properties present in the transmuxed file but missing from the ' + | ||
174 | 'working version. A <ins>green background</ins> indicates ' + | ||
175 | 'properties present in the working version but missing in the ' + | ||
176 | 'transmuxed output.</p>' + | ||
177 | QUnit.diff(stringify(vjsParsed, null, ' '), | ||
178 | stringify(workingParsed, null, ' ')); | ||
179 | } | ||
180 | }; | ||
181 | |||
133 | mediaSource.addEventListener('sourceopen', function() { | 182 | mediaSource.addEventListener('sourceopen', function() { |
134 | var | 183 | var |
135 | buffer = mediaSource.addSourceBuffer('video/mp4;codecs=avc1.4d400d'), | 184 | buffer = mediaSource.addSourceBuffer('video/mp4;codecs=avc1.4d400d'), |
... | @@ -177,9 +226,12 @@ | ... | @@ -177,9 +226,12 @@ |
177 | bytes.set(events[0]); | 226 | bytes.set(events[0]); |
178 | bytes.set(events[1], events[0].byteLength); | 227 | bytes.set(events[1], events[0].byteLength); |
179 | 228 | ||
180 | console.log('transmuxed', videojs.inspectMp4(bytes)) | 229 | vjsParsed = videojs.inspectMp4(bytes); |
230 | console.log('transmuxed', vjsParsed); | ||
231 | diffParsed(); | ||
232 | |||
181 | // clear old box info | 233 | // clear old box info |
182 | vjsBoxes.innerHTML = JSON.stringify(videojs.inspectMp4(bytes), null, ' '); | 234 | vjsBoxes.innerHTML = stringify(vjsParsed, null, ' '); |
183 | 235 | ||
184 | // write out the result | 236 | // write out the result |
185 | hex += '<pre>'; | 237 | hex += '<pre>'; |
... | @@ -197,9 +249,12 @@ | ... | @@ -197,9 +249,12 @@ |
197 | bytes = new Uint8Array(reader.result); | 249 | bytes = new Uint8Array(reader.result); |
198 | 250 | ||
199 | 251 | ||
200 | console.log("boxes", videojs.inspectMp4(bytes)); | 252 | workingParsed = videojs.inspectMp4(bytes); |
253 | console.log('working', workingParsed); | ||
254 | diffParsed(); | ||
255 | |||
201 | // clear old box info | 256 | // clear old box info |
202 | workingBoxes.innerHTML = JSON.stringify(videojs.inspectMp4(bytes), null, ' '); | 257 | workingBoxes.innerHTML = stringify(workingParsed, null, ' '); |
203 | 258 | ||
204 | // output the hex dump | 259 | // output the hex dump |
205 | hex += '<pre>'; | 260 | hex += '<pre>'; | ... | ... |
-
Please register or sign in to post a comment