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.
Showing
1 changed file
with
35 additions
and
25 deletions
... | @@ -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); | ... | ... |
-
Please register or sign in to post a comment