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
Inline Side-by-side
Showing 4 changed files with 106 additions and 488 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"');
......
[
{
"majorBrand": "iso5",
"minorVersion": 1,
"compatibleBrands": [
1769172845,
1769172789,
1684108136
],
"size": 28,
"type": "ftyp"
},
{
"data": {
"0": 73,
"1": 115,
"2": 111,
"3": 77,
"4": 101,
"5": 100,
"6": 105,
"7": 97,
"8": 32,
"9": 70,
"10": 105,
"11": 108,
"12": 101,
"13": 32,
"14": 80,
"15": 114,
"16": 111,
"17": 100,
"18": 117,
"19": 99,
"20": 101,
"21": 100,
"22": 32,
"23": 119,
"24": 105,
"25": 116,
"26": 104,
"27": 32,
"28": 71,
"29": 80,
"30": 65,
"31": 67,
"32": 32,
"33": 48,
"34": 46,
"35": 53,
"36": 46,
"37": 49,
"38": 45,
"39": 68,
"40": 69,
"41": 86,
"42": 45,
"43": 114,
"44": 101,
"45": 118,
"46": 52,
"47": 49,
"48": 57,
"49": 57,
"50": 0
},
"size": 59,
"type": "free"
},
{
"boxes": [
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 0
},
"creationTime": "2012-10-23T11:14:28.000Z",
"modificationTime": "2012-10-23T11:14:28.000Z",
"timescale": 600,
"duration": 0,
"rate": 1,
"volume": 1,
"matrix": {
"0": 0,
"1": 1,
"2": 0,
"3": 0,
"4": 0,
"5": 0,
"6": 0,
"7": 0,
"8": 0,
"9": 0,
"10": 0,
"11": 0,
"12": 0,
"13": 0,
"14": 0,
"15": 0,
"16": 0,
"17": 1,
"18": 0,
"19": 0,
"20": 0,
"21": 0,
"22": 0,
"23": 0,
"24": 0,
"25": 0,
"26": 0,
"27": 0,
"28": 0,
"29": 0,
"30": 0,
"31": 0,
"32": 64,
"33": 0,
"34": 0,
"35": 0
},
"nextTrackId": 2,
"size": 108,
"type": "mvhd"
},
{
"boxes": [
{
"data": {
"0": 0,
"1": 0,
"2": 0,
"3": 0,
"4": 0,
"5": 0,
"6": 0,
"7": 0
},
"size": 16,
"type": "mehd"
},
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 0
},
"trackId": 1,
"defaultSampleDescriptionIndex": 1,
"defaultSampleDuration": 1000,
"defaultSampleSize": 0,
"sampleDependsOn": 0,
"sampleIsDependedOn": 0,
"sampleHasRedundancy": 0,
"samplePaddingValue": 0,
"sampleIsDifferenceSample": true,
"sampleDegradationPriority": 0,
"size": 32,
"type": "trex"
}
],
"size": 56,
"type": "mvex"
},
{
"boxes": [
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 1
},
"creationTime": "2012-02-14T00:07:31.000Z",
"modificationTime": "2012-10-23T11:14:29.000Z",
"trackId": 1,
"duration": 0,
"layer": 0,
"alternateGroup": 0,
"volume": 0,
"matrix": {
"0": 0,
"1": 1,
"2": 0,
"3": 0,
"4": 0,
"5": 0,
"6": 0,
"7": 0,
"8": 0,
"9": 0,
"10": 0,
"11": 0,
"12": 0,
"13": 0,
"14": 0,
"15": 0,
"16": 0,
"17": 1,
"18": 0,
"19": 0,
"20": 0,
"21": 0,
"22": 0,
"23": 0,
"24": 0,
"25": 0,
"26": 0,
"27": 0,
"28": 0,
"29": 0,
"30": 0,
"31": 0,
"32": 64,
"33": 0,
"34": 0,
"35": 0
},
"width": 320,
"height": 180,
"size": 92,
"type": "tkhd"
},
{
"boxes": [
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 0
},
"language": "und",
"creationTime": "2012-02-14T00:07:31.000Z",
"modificationTime": "2012-02-14T00:07:33.000Z",
"timescale": 25000,
"duration": 0,
"size": 32,
"type": "mdhd"
},
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 0
},
"handlerType": "vide",
"name": "counter-10mn_I25_320x180_48kbps_baseline.264:dur=600 - Imported with GPAC 0.4.6-DEV-rev3915",
"size": 124,
"type": "hdlr"
},
{
"boxes": [
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 1
},
"graphicsmode": 0,
"opcolor": {
"0": 0,
"1": 0,
"2": 0
},
"size": 20,
"type": "vmhd"
},
{
"boxes": [
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 0
},
"dataReferences": [
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 1
},
"size": 12,
"type": "url "
}
],
"size": 28,
"type": "dref"
}
],
"size": 36,
"type": "dinf"
},
{
"boxes": [
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 0
},
"sampleDescriptions": [
{
"dataReferenceIndex": 1,
"width": 320,
"height": 180,
"horizresolution": 72,
"vertresolution": 72,
"frameCount": 1,
"depth": 24,
"config": [
{
"configurationVersion": 1,
"avcProfileIndication": 66,
"profileCompatibility": 192,
"avcLevelIndication": 13,
"lengthSizeMinusOne": 3,
"sps": [
{
"0": 103,
"1": 66,
"2": 192,
"3": 13,
"4": 217,
"5": 1,
"6": 65,
"7": 159,
"8": 158,
"9": 16,
"10": 0,
"11": 0,
"12": 3,
"13": 0,
"14": 16,
"15": 0,
"16": 0,
"17": 3,
"18": 3,
"19": 32,
"20": 241,
"21": 66,
"22": 164,
"23": 128
},
{
"0": 103,
"1": 66,
"2": 192,
"3": 30,
"4": 37,
"5": 144,
"6": 10,
"7": 2,
"8": 255,
"9": 150,
"10": 16,
"11": 0,
"12": 0,
"13": 3,
"14": 0,
"15": 16,
"16": 0,
"17": 0,
"18": 3,
"19": 3,
"20": 32,
"21": 241,
"22": 98,
"23": 228,
"24": 128
},
{
"0": 103,
"1": 66,
"2": 192,
"3": 31,
"4": 53,
"5": 144,
"6": 5,
"7": 0,
"8": 91,
"9": 161,
"10": 0,
"11": 0,
"12": 3,
"13": 0,
"14": 1,
"15": 0,
"16": 0,
"17": 3,
"18": 0,
"19": 50,
"20": 15,
"21": 24,
"22": 50,
"23": 72
},
{
"0": 103,
"1": 66,
"2": 192,
"3": 40,
"4": 17,
"5": 100,
"6": 1,
"7": 224,
"8": 8,
"9": 159,
"10": 150,
"11": 16,
"12": 0,
"13": 0,
"14": 3,
"15": 0,
"16": 16,
"17": 0,
"18": 0,
"19": 3,
"20": 3,
"21": 32,
"22": 241,
"23": 131,
"24": 36,
"25": 128
}
],
"pps": [
{
"0": 104,
"1": 203,
"2": 140,
"3": 178
},
{
"0": 104,
"1": 33,
"2": 11,
"3": 140,
"4": 178
},
{
"0": 104,
"1": 49,
"2": 139,
"3": 140,
"4": 178
},
{
"0": 104,
"1": 16,
"2": 32,
"3": 184,
"4": 203,
"5": 32
}
],
"size": 150,
"type": "avcC"
},
{
"bufferSizeDB": 3978,
"maxBitrate": 85216,
"avgBitrate": 49120,
"size": 20,
"type": "btrt"
}
],
"size": 256,
"type": "avc1"
}
],
"size": 272,
"type": "stsd"
},
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 0
},
"timeToSamples": [],
"size": 16,
"type": "stts"
},
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 0
},
"sampleToChunks": [],
"size": 16,
"type": "stsc"
},
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 0
},
"sampleSize": 0,
"entries": [],
"size": 20,
"type": "stsz"
},
{
"version": 0,
"flags": {
"0": 0,
"1": 0,
"2": 0
},
"chunkOffsets": [],
"size": 16,
"type": "stco"
}
],
"size": 348,
"type": "stbl"
}
],
"size": 412,
"type": "minf"
}
],
"size": 576,
"type": "mdia"
}
],
"size": 676,
"type": "trak"
}
],
"size": 848,
"type": "moov"
}
]
\ No newline at end of file
......