31f3e4db by Simeon Bateman Committed by David LaPalomento

fixed conflicts, added aacstream and h264stream elements

1 parent f239b405
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
14 (function(window, videojs, undefined) { 14 (function(window, videojs, undefined) {
15 'use strict'; 15 'use strict';
16 16
17 var PacketStream, ParseStream, ProgramStream, Transmuxer, MP2T_PACKET_LENGTH, H264_STREAM_TYPE, ADTS_STREAM_TYPE, mp4; 17 var PacketStream, ParseStream, ProgramStream, Transmuxer, AacStream, H264Stream, MP2T_PACKET_LENGTH, H264_STREAM_TYPE, ADTS_STREAM_TYPE, mp4;
18 18
19 MP2T_PACKET_LENGTH = 188; // bytes 19 MP2T_PACKET_LENGTH = 188; // bytes
20 H264_STREAM_TYPE = 0x1b; 20 H264_STREAM_TYPE = 0x1b;
...@@ -273,15 +273,22 @@ ProgramStream = function() { ...@@ -273,15 +273,22 @@ ProgramStream = function() {
273 data: [], 273 data: [],
274 size: 0 274 size: 0
275 }, 275 },
276 flushStream = function(stream, type) { 276 flushStream = function(stream, type, pes) {
277 var 277 var
278 event = { 278 event = {
279 type: type, 279 type: type,
280 data: new Uint8Array(stream.size) 280 data: new Uint8Array(stream.size),
281 }, 281 },
282 i = 0, 282 i = 0,
283 fragment; 283 fragment;
284 284
285 // move over data from PES into Stream frame
286 event.pts = pes.pts;
287 event.dts = pes.dts;
288 event.pid = pes.pid;
289 event.dataAlignmentIndicator = pes.dataAlignmentIndicator;
290 event.payloadUnitStartIndicator = pes.payloadUnitStartIndicator
291
285 // do nothing if there is no buffered data 292 // do nothing if there is no buffered data
286 if (!stream.data.length) { 293 if (!stream.data.length) {
287 return; 294 return;
...@@ -323,7 +330,7 @@ ProgramStream = function() { ...@@ -323,7 +330,7 @@ ProgramStream = function() {
323 // if a new packet is starting, we can flush the completed 330 // if a new packet is starting, we can flush the completed
324 // packet 331 // packet
325 if (data.payloadUnitStartIndicator) { 332 if (data.payloadUnitStartIndicator) {
326 flushStream(stream, streamType); 333 flushStream(stream, streamType, data);
327 } 334 }
328 335
329 // buffer this fragment until we are sure we've received the 336 // buffer this fragment until we are sure we've received the
...@@ -369,28 +376,69 @@ ProgramStream = function() { ...@@ -369,28 +376,69 @@ ProgramStream = function() {
369 * will flush the buffered packets. 376 * will flush the buffered packets.
370 */ 377 */
371 this.end = function() { 378 this.end = function() {
379 debugger
372 flushStream(video, 'video'); 380 flushStream(video, 'video');
373 flushStream(audio, 'audio'); 381 flushStream(audio, 'audio');
374 }; 382 };
375 }; 383 };
376 ProgramStream.prototype = new videojs.Hls.Stream(); 384 ProgramStream.prototype = new videojs.Hls.Stream();
377 385
386 /*
387 * Accepts a ProgramStream and emits data events with parsed
388 * AAC Audio Frames of the individual packets.
389 */
390 AacStream = function() {
391 var self;
392 AacStream.prototype.init.call(this);
393 self = this;
394
395 this.push = function(packet) {
396 if (packet.type == "audio") {
397 console.log('AAC Stream Push!');
398 this.trigger('data', packet);
399 }
400 };
401 };
402 AacStream.prototype = new videojs.Hls.Stream();
403
404 /**
405 * Accepts a ProgramStream and emits data events with parsed
406 * AAC Audio Frames of the individual packets.
407 */
408 H264Stream = function() {
409 var self;
410 H264Stream.prototype.init.call(this);
411 self = this;
412
413 this.push = function(packet) {
414 if (packet.type == "video") {
415 console.log('h264 Stream Push!');
416 this.trigger('data', packet);
417 }
418 };
419 };
420 H264Stream.prototype = new videojs.Hls.Stream();
421
422
378 Transmuxer = function() { 423 Transmuxer = function() {
379 var self = this, packetStream, parseStream, programStream; 424 var self = this, packetStream, parseStream, programStream, aacStream, h264Stream;
380 Transmuxer.prototype.init.call(this); 425 Transmuxer.prototype.init.call(this);
381 426
382 // set up the parsing pipeline 427 // set up the parsing pipeline
383 packetStream = new PacketStream(); 428 packetStream = new PacketStream();
384 parseStream = new ParseStream(); 429 parseStream = new ParseStream();
385 programStream = new ProgramStream(); 430 programStream = new ProgramStream();
431 aacStream = new AacStream();
432 h264Stream = new H264Stream();
386 433
387 packetStream.pipe(parseStream); 434 packetStream.pipe(parseStream);
388 parseStream.pipe(programStream); 435 parseStream.pipe(programStream);
436 programStream.pipe(aacStream);
389 437
390 // generate an init segment 438 // generate an init segment
391 this.initSegment = mp4.initSegment(); 439 this.initSegment = mp4.initSegment();
392 440
393 programStream.on('data', function(data) { 441 aacStream.on('data', function(data) {
394 self.trigger('data', data); 442 self.trigger('data', data);
395 }); 443 });
396 444
...@@ -411,6 +459,8 @@ window.videojs.mp2t = { ...@@ -411,6 +459,8 @@ window.videojs.mp2t = {
411 PacketStream: PacketStream, 459 PacketStream: PacketStream,
412 ParseStream: ParseStream, 460 ParseStream: ParseStream,
413 ProgramStream: ProgramStream, 461 ProgramStream: ProgramStream,
414 Transmuxer: Transmuxer 462 Transmuxer: Transmuxer,
463 AacStream: AacStream,
464 H264Stream: H264Stream
415 }; 465 };
416 })(window, window.videojs); 466 })(window, window.videojs);
......
...@@ -63,8 +63,7 @@ ...@@ -63,8 +63,7 @@
63 </div> 63 </div>
64 <div class="result-wrapper"> 64 <div class="result-wrapper">
65 <h3>Working</h3> 65 <h3>Working</h3>
66 <pre class="working-boxes"> 66 <pre class="working-boxes"></pre>
67 </pre>
68 </div> 67 </div>
69 </section> 68 </section>
70 <section> 69 <section>
...@@ -107,6 +106,8 @@ ...@@ -107,6 +106,8 @@
107 <script src="../../src/stream.js"></script> 106 <script src="../../src/stream.js"></script>
108 <script src="../../src/mp4-generator.js"></script> 107 <script src="../../src/mp4-generator.js"></script>
109 <script src="../../src/transmuxer.js"></script> 108 <script src="../../src/transmuxer.js"></script>
109 <script src="../../src/flv-tag.js"></script>
110 <script src="../../src/exp-golomb.js"></script>
110 <script src="js/mp4-inspector.js"></script> 111 <script src="js/mp4-inspector.js"></script>
111 112
112 <script src="../../src/bin-utils.js"></script> 113 <script src="../../src/bin-utils.js"></script>
...@@ -123,6 +124,7 @@ ...@@ -123,6 +124,7 @@
123 124
124 video = document.createElement('video'), 125 video = document.createElement('video'),
125 mediaSource = new MediaSource(), 126 mediaSource = new MediaSource(),
127 FlvTag = videojs.Hls.FlvTag;
126 128
127 logevent = function(event) { 129 logevent = function(event) {
128 console.log(event.type); 130 console.log(event.type);
...@@ -150,13 +152,17 @@ ...@@ -150,13 +152,17 @@
150 videojs.log = console.log.bind(console); 152 videojs.log = console.log.bind(console);
151 153
152 original.addEventListener('change', function() { 154 original.addEventListener('change', function() {
153 var reader = new FileReader(); 155 var reader = new FileReader(),
156 videoSegments= [],
157 audioSegments = [],
158 videoBuffer = [],
159 audioBuffer = [];
160
154 reader.addEventListener('loadend', function() { 161 reader.addEventListener('loadend', function() {
155 var segment = new Uint8Array(reader.result), 162 var segment = new Uint8Array(reader.result),
156 transmuxer = new videojs.mp2t.Transmuxer(), 163 transmuxer = new videojs.mp2t.Transmuxer(),
157 hex = ''; 164 hex = '';
158 165
159
160 transmuxer.on('data', function(data) { 166 transmuxer.on('data', function(data) {
161 if (data) { 167 if (data) {
162 console.log(data); 168 console.log(data);
...@@ -182,6 +188,8 @@ ...@@ -182,6 +188,8 @@
182 var hex = '', 188 var hex = '',
183 bytes = new Uint8Array(reader.result); 189 bytes = new Uint8Array(reader.result);
184 190
191
192 console.log("boxes", videojs.inspectMp4(bytes));
185 // clear old box info 193 // clear old box info
186 workingBoxes.innerHTML = JSON.stringify(videojs.inspectMp4(bytes), null, ' '); 194 workingBoxes.innerHTML = JSON.stringify(videojs.inspectMp4(bytes), null, ' ');
187 195
......
...@@ -14,7 +14,15 @@ ...@@ -14,7 +14,15 @@
14 <link rel="stylesheet" href="css/main.css"> 14 <link rel="stylesheet" href="css/main.css">
15 15
16 <script src="js/vendor/modernizr-2.6.2.min.js"></script> 16 <script src="js/vendor/modernizr-2.6.2.min.js"></script>
17 <script src="min-m4s.js"></script> 17
18 <script>
19 window.videojs = window.videojs || {
20 Hls: {}
21 };
22 </script>
23 <!--<script src="min-m4s.js"></script>-->
24 <script src="./js/mdat.js"></script>
25 <script src="../../src/mp4-generator.js"></script>
18 </head> 26 </head>
19 <body> 27 <body>
20 <!--[if lt IE 7]> 28 <!--[if lt IE 7]>
...@@ -59,7 +67,6 @@ ...@@ -59,7 +67,6 @@
59 sourceBuffer, 67 sourceBuffer,
60 video; 68 video;
61 69
62
63 function closed() { 70 function closed() {
64 console.log("MediaSource Closed."); 71 console.log("MediaSource Closed.");
65 } 72 }
...@@ -69,38 +76,38 @@ ...@@ -69,38 +76,38 @@
69 if (done) { 76 if (done) {
70 return; 77 return;
71 } 78 }
79
72 console.log("LOAD FRAGMENT"); 80 console.log("LOAD FRAGMENT");
73 /*
74 var req = new XMLHttpRequest();
75 req.responseType = "arraybuffer";
76 req.open("GET", "../fixtures/dash/1-avc1.42c00d.m4s", true);
77 */
78 81
82 var moov = videojs.mp4.moov(100, 600, 300, "video");
83 var moof = videojs.mp4.moof([{trackId: 1}]);
84 var frag = Array.prototype.slice.call(moov);
85 frag = frag.concat(Array.prototype.slice.call(moof));
86 frag = frag.concat(Array.prototype.slice.call(mdat));
79 87
80 //req.onload = function () {
81 console.log("FRAGMENT DONE LOADING");
82 88
83 sourceBuffer.appendBuffer(new Uint8Array(m4s)); 89
90 sourceBuffer.appendBuffer( new Uint8Array( frag ) );
91
84 done = true; 92 done = true;
85 //};
86 93
87 /* 94 }
88 req.onerror = function () { 95
89 window.alert("Could not load fragment."); 96 function loadMdat(){
90 }; 97 console.log('mdat', mdat);
98 setTimeout( function(){
99 sourceBuffer.appendBuffer(new Uint8Amdat);
100 },0);
91 101
92 req.send();
93 */
94 } 102 }
95 103
96 function loadInit() { 104 function loadInit() {
97
98 console.log("LOAD INIT"); 105 console.log("LOAD INIT");
99 var req = new XMLHttpRequest(); 106 var req = new XMLHttpRequest();
100 req.responseType = "arraybuffer"; 107 req.responseType = "arraybuffer";
101 req.open("GET", "../fixtures/dash/init.mp4", true); 108 req.open("GET", "./ts2/Header.m4s", true);
102 109
103 req.onload = function () { 110 req.onload = function() {
104 console.log("INIT DONE LOADING"); 111 console.log("INIT DONE LOADING");
105 sourceBuffer.appendBuffer(new Uint8Array(req.response)); 112 sourceBuffer.appendBuffer(new Uint8Array(req.response));
106 sourceBuffer.addEventListener('update', loadFragment); 113 sourceBuffer.addEventListener('update', loadFragment);
......