Skip to content
This repository has been archived by the owner on Nov 11, 2017. It is now read-only.

Build as a library that can be used externally #15

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
/.idea
/node_modules
/bower_components
9 changes: 8 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,11 @@ Can I use it in Node.js?

What license is it issued under?
--------------------------------
It's regular [MIT license](MIT-license.txt).
It's regular [MIT license](MIT-license.txt).

Running locally and building as a library
--------------------------------
* Install development dependencies using `npm install`
* Install runtime dependencies using `bower install`
* Build the the library and open the demo by simply running `gulp`
* For an example of using the library, see index-lib.html
26 changes: 26 additions & 0 deletions bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"name": "mpegts_to_mp4",
"version": "1.0.1",
"homepage": "https://github.com/RReverser/mpegts",
"authors": [
"Ingvar Stepanyan <[email protected]> (http://rreverser.com/)"
],
"main": "dist/hlsplayer.js",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jbinary": "~2.1.2",
"jdataview": "~2.5.0",
"async": "~0.9.2"
},
"devDependencies": {
"requirejs": "~2.1.16",
"almond": "~0.3.1"
}
}
2 changes: 1 addition & 1 deletion browser.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
// preconfiguration using <script>'s data-attributes values
var scripts = document.getElementsByTagName('script'),
script = scripts[scripts.length - 1],
worker = new Worker('worker.js'),
worker = new Worker('worker-main.js'),
nextIndex = 0,
sentVideos = 0,
currentVideo = null,
Expand Down
167 changes: 167 additions & 0 deletions dist/hlsplayer.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/worker.js

Large diffs are not rendered by default.

50 changes: 50 additions & 0 deletions gulpfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
var gulp = require("gulp");
var rename = require("gulp-rename");
var umd = require("gulp-umd");
var server = require("gulp-server-livereload");
var fileInsert = require("gulp-file-insert");
var stripDebug = require('gulp-strip-debug');
var requirejs = require('requirejs');

gulp.task("build", function(){
// build the worker as a self-contained module
var config = {
baseUrl: ".",
name: "bower_components/almond/almond",
include: ["worker"],
mainConfigFile: "require-config.js",
preserveLicenseComments: false,
out: "dist/worker.js"
};
requirejs.optimize(config,
function (output){ },
function(err) { console.log(err); }
);

// insert the source code of the worker into the library
gulp.src('./worker-lib.js')
.pipe(fileInsert({
"/* WORKER_SOURCE_GOES_HERE */": config.out,
}))
.pipe(rename("hlsplayer.js"))
.pipe(stripDebug())
.pipe(umd({
exports: function(file) { return "HLSPlayer" },
namespace: function(file) { return "HLSPlayer" }
}))
.pipe(gulp.dest("./dist/"));
});


gulp.task("webserver", function() {
gulp.src(".")
.pipe(server({
host: "0.0.0.0",
defaultFile: "index.html",
livereload: true,
open: true
}));
});


gulp.task("default", ["build","webserver"]);
30 changes: 30 additions & 0 deletions index-lib.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>HLS converter and player demo</title>
<script src="dist/hlsplayer.js"></script>
</head>
<body >
<canvas id="canvas"></canvas>

<div>
<button onclick="canvas.play()">Play</button>
<button onclick="canvas.pause()">Pause</button>
<button onclick="canvas.stop()">Stop</button>
</div>

<script type="text/javascript">

var canvas = document.getElementById("canvas");
var url = "http://d3sporhxbkob1v.cloudfront.net/bill/vod/sample-video/400k.m3u8";

new HLSPlayer(canvas, url, {
autoplay: true,
canplay: function() {
console.log("ready to play first segment!")
}
});

</script>
</body>
</html>
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ <h1>HTTP Live Streaming<br />JavaScript converter and player demo</h1>

<h3>Works best in Chrome (stable branch), having lags when switching videos but still working in latest Firefox and IE10+.</h3>

<h3><a href="index-lib.html">Check out the demo as an external library</a></h3>
<p id="comments">Please note that demo uses 3rd-party <a href="http://www.mediamotiononline.com/">HLS demo source</a> and service <a href="http://www.corsproxy.com/">http://www.corsproxy.com/</a> for proxying it with needed Cross-Origin-Request headers, so it may be unstable.</p>

<script src="browser.js" data-canvas="canvas" data-hls="//d3sporhxbkob1v.cloudfront.net/bill/vod/sample-video/400k.m3u8">
Expand Down
Loading