Skip to content

brainfood / videojs-contrib-hls

Go to a project
Toggle navigation
Toggle navigation pinning
31f3e4db by Simeon Bateman Committed by David LaPalomento
Options

fixed conflicts, added aacstream and h264stream elements

1 parent f239b405
Expand all
Inline Side-by-side
Showing 4 changed files with 105 additions and 40 deletions
......@@ -14,7 +14,7 @@
(function(window, videojs, undefined) {
'use strict';
var PacketStream, ParseStream, ProgramStream, Transmuxer, MP2T_PACKET_LENGTH, H264_STREAM_TYPE, ADTS_STREAM_TYPE, mp4;
var PacketStream, ParseStream, ProgramStream, Transmuxer, AacStream, H264Stream, MP2T_PACKET_LENGTH, H264_STREAM_TYPE, ADTS_STREAM_TYPE, mp4;
MP2T_PACKET_LENGTH = 188; // bytes
H264_STREAM_TYPE = 0x1b;
......@@ -273,15 +273,22 @@ ProgramStream = function() {
data: [],
size: 0
},
flushStream = function(stream, type) {
flushStream = function(stream, type, pes) {
var
event = {
type: type,
data: new Uint8Array(stream.size)
data: new Uint8Array(stream.size),
},
i = 0,
fragment;
// move over data from PES into Stream frame
event.pts = pes.pts;
event.dts = pes.dts;
event.pid = pes.pid;
event.dataAlignmentIndicator = pes.dataAlignmentIndicator;
event.payloadUnitStartIndicator = pes.payloadUnitStartIndicator
// do nothing if there is no buffered data
if (!stream.data.length) {
return;
......@@ -323,7 +330,7 @@ ProgramStream = function() {
// if a new packet is starting, we can flush the completed
// packet
if (data.payloadUnitStartIndicator) {
flushStream(stream, streamType);
flushStream(stream, streamType, data);
}
// buffer this fragment until we are sure we've received the
......@@ -369,28 +376,69 @@ ProgramStream = function() {
* will flush the buffered packets.
*/
this.end = function() {
debugger
flushStream(video, 'video');
flushStream(audio, 'audio');
};
};
ProgramStream.prototype = new videojs.Hls.Stream();
/*
* Accepts a ProgramStream and emits data events with parsed
* AAC Audio Frames of the individual packets.
*/
AacStream = function() {
var self;
AacStream.prototype.init.call(this);
self = this;
this.push = function(packet) {
if (packet.type == "audio") {
console.log('AAC Stream Push!');
this.trigger('data', packet);
}
};
};
AacStream.prototype = new videojs.Hls.Stream();
/**
* Accepts a ProgramStream and emits data events with parsed
* AAC Audio Frames of the individual packets.
*/
H264Stream = function() {
var self;
H264Stream.prototype.init.call(this);
self = this;
this.push = function(packet) {
if (packet.type == "video") {
console.log('h264 Stream Push!');
this.trigger('data', packet);
}
};
};
H264Stream.prototype = new videojs.Hls.Stream();
Transmuxer = function() {
var self = this, packetStream, parseStream, programStream;
var self = this, packetStream, parseStream, programStream, aacStream, h264Stream;
Transmuxer.prototype.init.call(this);
// set up the parsing pipeline
packetStream = new PacketStream();
parseStream = new ParseStream();
programStream = new ProgramStream();
aacStream = new AacStream();
h264Stream = new H264Stream();
packetStream.pipe(parseStream);
parseStream.pipe(programStream);
programStream.pipe(aacStream);
// generate an init segment
this.initSegment = mp4.initSegment();
programStream.on('data', function(data) {
aacStream.on('data', function(data) {
self.trigger('data', data);
});
......@@ -411,6 +459,8 @@ window.videojs.mp2t = {
PacketStream: PacketStream,
ParseStream: ParseStream,
ProgramStream: ProgramStream,
Transmuxer: Transmuxer
Transmuxer: Transmuxer,
AacStream: AacStream,
H264Stream: H264Stream
};
})(window, window.videojs);
......
......@@ -63,8 +63,7 @@
</div>
<div class="result-wrapper">
<h3>Working</h3>
<pre class="working-boxes">
</pre>
<pre class="working-boxes"></pre>
</div>
</section>
<section>
......@@ -107,6 +106,8 @@
<script src="../../src/stream.js"></script>
<script src="../../src/mp4-generator.js"></script>
<script src="../../src/transmuxer.js"></script>
<script src="../../src/flv-tag.js"></script>
<script src="../../src/exp-golomb.js"></script>
<script src="js/mp4-inspector.js"></script>
<script src="../../src/bin-utils.js"></script>
......@@ -123,6 +124,7 @@
video = document.createElement('video'),
mediaSource = new MediaSource(),
FlvTag = videojs.Hls.FlvTag;
logevent = function(event) {
console.log(event.type);
......@@ -150,13 +152,17 @@
videojs.log = console.log.bind(console);
original.addEventListener('change', function() {
var reader = new FileReader();
var reader = new FileReader(),
videoSegments= [],
audioSegments = [],
videoBuffer = [],
audioBuffer = [];
reader.addEventListener('loadend', function() {
var segment = new Uint8Array(reader.result),
transmuxer = new videojs.mp2t.Transmuxer(),
hex = '';
transmuxer.on('data', function(data) {
if (data) {
console.log(data);
......@@ -182,6 +188,8 @@
var hex = '',
bytes = new Uint8Array(reader.result);
console.log("boxes", videojs.inspectMp4(bytes));
// clear old box info
workingBoxes.innerHTML = JSON.stringify(videojs.inspectMp4(bytes), null, ' ');
......
......@@ -14,7 +14,15 @@
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="min-m4s.js"></script>
<script>
window.videojs = window.videojs || {
Hls: {}
};
</script>
<!--<script src="min-m4s.js"></script>-->
<script src="./js/mdat.js"></script>
<script src="../../src/mp4-generator.js"></script>
</head>
<body>
<!--[if lt IE 7]>
......@@ -50,57 +58,56 @@
</footer>
</div>
<script>
var ms,
sourceBuffer,
video;
function closed() {
console.log("MediaSource Closed.");
}
var done = false;
function loadFragment() {
if (done) {
return;
}
console.log("LOAD FRAGMENT");
/*
var req = new XMLHttpRequest();
req.responseType = "arraybuffer";
req.open("GET", "../fixtures/dash/1-avc1.42c00d.m4s", true);
*/
if (done) {
return;
}
console.log("LOAD FRAGMENT");
var moov = videojs.mp4.moov(100, 600, 300, "video");
var moof = videojs.mp4.moof([{trackId: 1}]);
var frag = Array.prototype.slice.call(moov);
frag = frag.concat(Array.prototype.slice.call(moof));
frag = frag.concat(Array.prototype.slice.call(mdat));
//req.onload = function () {
console.log("FRAGMENT DONE LOADING");
sourceBuffer.appendBuffer(new Uint8Array(m4s));
sourceBuffer.appendBuffer( new Uint8Array( frag ) );
done = true;
//};
/*
req.onerror = function () {
window.alert("Could not load fragment.");
};
}
function loadMdat(){
console.log('mdat', mdat);
setTimeout( function(){
sourceBuffer.appendBuffer(new Uint8Amdat);
},0);
req.send();
*/
}
function loadInit() {
console.log("LOAD INIT");
var req = new XMLHttpRequest();
req.responseType = "arraybuffer";
req.open("GET", "../fixtures/dash/init.mp4", true);
req.open("GET", "./ts2/Header.m4s", true);
req.onload = function () {
req.onload = function() {
console.log("INIT DONE LOADING");
sourceBuffer.appendBuffer(new Uint8Array(req.response));
sourceBuffer.addEventListener('update', loadFragment);
......@@ -111,11 +118,11 @@
};
req.send();
}
function opened() {
console.log("OPENED");
sourceBuffer = ms.addSourceBuffer('video/mp4;codecs="avc1.42c00d"');
......