9756fcae by David LaPalomento

Only show relevant boxes in mp4 diff

On the mp4 transmux analyzer page, only present the media segment diff if a working media segment is provided. Similarly, only diff the init segments if a working init segment is provided. This cuts down on output that will always vary because TS files do not have the notion of a separate init segment.
1 parent def510ae
...@@ -166,17 +166,27 @@ ...@@ -166,17 +166,27 @@
166 166
167 // output a diff of the two parsed MP4s 167 // output a diff of the two parsed MP4s
168 diffParsed = function() { 168 diffParsed = function() {
169 var comparison; 169 var comparison, diff, transmuxed;
170 if (vjsParsed && workingParsed) { 170 if (!vjsParsed || !workingParsed) {
171 comparison = document.querySelector('#comparison') 171 // wait until both inputs have been provided
172 comparison.innerHTML = '<p>A <del>red background</del> indicates ' + 172 return;
173 }
174 comparison = document.querySelector('#comparison');
175 if (workingParsed[0].type === 'moof') {
176 diff = '<h3>Media Segment Comparision</h3>';
177 transmuxed = vjsParsed.slice(2);
178 } else {
179 diff = '<h3>Init Segment Comparision</h3>';
180 transmuxed = vjsParsed.slice(0, 2);
181 }
182 diff += '<p>A <del>red background</del> indicates ' +
173 'properties present in the transmuxed file but missing from the ' + 183 'properties present in the transmuxed file but missing from the ' +
174 'working version. A <ins>green background</ins> indicates ' + 184 'working version. A <ins>green background</ins> indicates ' +
175 'properties present in the working version but missing in the ' + 185 'properties present in the working version but missing in the ' +
176 'transmuxed output.</p>' + 186 'transmuxed output.</p>';
177 QUnit.diff(stringify(vjsParsed, null, ' '), 187 diff += QUnit.diff(stringify(transmuxed, null, ' '),
178 stringify(workingParsed, null, ' ')); 188 stringify(workingParsed, null, ' '));
179 } 189 comparison.innerHTML = diff;
180 }; 190 };
181 191
182 mediaSource.addEventListener('sourceopen', function() { 192 mediaSource.addEventListener('sourceopen', function() {
...@@ -211,49 +221,49 @@ ...@@ -211,49 +221,49 @@
211 var segment = new Uint8Array(reader.result), 221 var segment = new Uint8Array(reader.result),
212 transmuxer = new videojs.mp2t.Transmuxer(), 222 transmuxer = new videojs.mp2t.Transmuxer(),
213 events = [], 223 events = [],
214 i = 0,
215 bytesLength = 0, 224 bytesLength = 0,
216 init = false, 225 done = false,
217 bytes, 226 bytes,
227 i, j,
218 hex = ''; 228 hex = '';
219 229
220 transmuxer.on('data', function(data) { 230 transmuxer.on('data', function(data) {
221 if (data && data.type === 'audio') { 231 if (data && data.type === 'audio') {
222 events.push(data.data); 232 events.push(data.data);
223 bytesLength += data.data.byteLength; 233 bytesLength += data.data.byteLength;
224
225 // XXX Media Sources Testing
226 if (!init) {
227 vjsParsed = videojs.inspectMp4(data.data);
228 console.log('appended tmuxed output');
229 window.vjsSourceBuffer.appendBuffer(data.data);
230 init = true;
231 }
232 } 234 }
233 }); 235 });
234 transmuxer.push(segment); 236 transmuxer.push(segment);
235 transmuxer.end(); 237 transmuxer.end();
236 238
237 bytes = new Uint8Array(bytesLength); 239 bytes = new Uint8Array(bytesLength);
238 i = 0; 240 for (j = 0, i = 0; j < events.length; j++) {
239 while (events.length) { 241 bytes.set(events[j], i);
240 bytes.set(events[0], i); 242 i += events[j].byteLength;
241 i += events[0].byteLength;
242 events.shift();
243 } 243 }
244 244
245 // vjsParsed = videojs.inspectMp4(bytes); 245 vjsParsed = videojs.inspectMp4(bytes);
246 console.log('transmuxed', videojs.inspectMp4(bytes)); 246 console.log('transmuxed', vjsParsed);
247 diffParsed(); 247 diffParsed();
248 248
249 // clear old box info 249 // clear old box info
250 vjsBoxes.innerHTML = stringify(videojs.inspectMp4(bytes), null, ' '); 250 vjsBoxes.innerHTML = stringify(vjsParsed, null, ' ');
251 251
252 // write out the result 252 // write out the result
253 hex += '<pre>'; 253 hex += '<pre>';
254 hex += 'nothing to see here'; 254 hex += 'nothing to see here';
255 hex += '</pre>'; 255 hex += '</pre>';
256 vjsOutput.innerHTML = hex; 256 vjsOutput.innerHTML = hex;
257
258 // XXX Media Sources Testing
259 window.vjsSourceBuffer.addEventListener('updateend', function() {
260 if (!done) {
261 window.vjsSourceBuffer.appendBuffer(events[1]);
262 console.log('appended tmuxed output');
263 done = true;
264 }
265 });
266 window.vjsSourceBuffer.appendBuffer(events[0]);
257 }); 267 });
258 reader.readAsArrayBuffer(this.files[0]); 268 reader.readAsArrayBuffer(this.files[0]);
259 }, false); 269 }, false);
......