Skip to content

Commit 8c02a61

Browse files
victorgrenkevictorgrenke
committed
Added videojs plugins(updated to new version of videojs)
1 parent 68ac0a3 commit 8c02a61

27 files changed

+10550
-26
lines changed

‎.npmignore

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
dist
22
node_modules
3-
example/streamedian.js
3+
examples/test.bundle.js
4+
src/client/hls
5+
src/core/parsers/pes.js
6+
src/core/parsers/ts.js
7+
webpack.config.js

‎README.md

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,23 @@ let player = new streamedian.WSPlayer(mediaElement, {
7676
// constructor: WebsocketTransport,
7777
options: {
7878
// address of websocket proxy described below. ws${location.protocol=='https:'?'s':''}://${location.host}/ws/ by default
79-
socket: "ws://websocket_proxy_address/ws"
79+
socket: "ws://websocket_proxy_address/ws",
80+
// function called player exceptions
81+
errorHandler (e) {
82+
alert(`Failed to start player: ${e.message}`);
83+
},
84+
// function to get credentials for protected streams
85+
queryCredentials() {
86+
return new Promise((resolve, reject)=>{
87+
let c = prompt('input credentials in format user:password');
88+
if (c) {
89+
this.setCredentials.apply(this, c.split(':'));
90+
resolve();
91+
} else {
92+
reject();
93+
}
94+
});
95+
}
8096
}
8197
}
8298
},
@@ -129,6 +145,15 @@ Include compiled script into your HTML:
129145
<script src="streamedian.js"></script>
130146
```
131147

148+
### RTSP Authentication
149+
150+
Streamedian player support both basic and digest authentication. Authentication type is detected automatically
151+
when you connect to the stream.
152+
You can directly specify user/password in rtsp url in form rtsp://username@password:stream.url/resource/
153+
or pass _queryCredentials()_ function to _streamedian.WSPlayer_. This function in order
154+
should return promise that call _this.setCredentials(user, password)_.
155+
156+
132157
### Server side
133158

134159
1. Install websocket proxy
@@ -224,6 +249,12 @@ RTSP player establish connection with proxy with following protocol:
224249
225250
4. RTP channel should send interleaved data with 4 byte header ($\<channel\>\<size\>). Separate RTP is not supported at this moment
226251
252+
253+
### Load balancing
254+
255+
RTSP proxy does not support load balancing itself but can be easily integrated with such load balancers like nginx.
256+
You can start multiple instances of proxy on different sockets and configure nginx upstreams.
257+
227258
![](http://www.specforge.com/static/images/demo/ws_rtsp_proxy.png)
228259
229260

‎example.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@ import {isSafari} from "streamedian/core/util/browser.js";
66

77
setDefaultLogLevel(LogLevel.Debug);
88
getTagged("transport:ws").setLevel(LogLevel.Error);
9-
getTagged("client:rtsp").setLevel(LogLevel.Error);
9+
getTagged("client:rtsp").setLevel(LogLevel.Debug);
10+
getTagged("mse").setLevel(LogLevel.Debug);
1011

1112
let wsTransport = {
1213
constructor: WebsocketTransport,
1314
options: {
1415
socket: "wss://specforge.com/ws/"
16+
// socket: "ws://localhost:8080/ws/"
1517
}
1618
};
1719

@@ -39,3 +41,8 @@ window.StreamedianPlayer = new streamedian.WSPlayer('test_video', {
3941
});
4042
}
4143
});
44+
45+
var setUrl = document.getElementById('set_new_url');
46+
setUrl.onclick = function() {
47+
StreamedianPlayer.setSource(document.getElementById('stream_url').value, streamedian.StreamType.RTSP);
48+
};

‎example/index.html

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,32 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Streamedian player example</title>
5+
<title>Streamedian HTML5 RTSP/HLS player example</title>
66
<style>
77
#test_video {
88
width: 720px;
99
}
1010
</style>
1111
</head>
1212
<body>
13+
<div>
14+
<input id="stream_url">
15+
<button id="set_new_url">Set</button>
16+
</div>
1317
<video id="test_video" controls autoplay>
14-
<source src="rtsp://127.0.0.1:8554/test" type="application/x-rtsp">
15-
<!--<source src="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov" type="application/x-rtsp">-->
18+
<source src="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov" type="application/x-rtsp">
19+
<!--<source src="rtsp://127.0.0.1:8554/test" type="application/x-rtsp">-->
1620
</video>
1721
<script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-beta.2/polyfill.min.js"></script>
1822
<script src="streamedian.min.js"></script>
23+
<!--<script src="test.bundle2.js"></script>-->
24+
<!--<script src="http://45.32.210.71/streamedian.js"></script>-->
25+
1926
<script>
20-
var p = Streamedian.player('test_video', {socket: "wss://specforge.com/ws/"})
27+
if (window.Streamedian) {
28+
// var p = Streamedian.player('test_video', {socket: "ws://45.32.210.71/ws/"})
29+
var p = Streamedian.player('test_video', {socket: "wss://streamedian.com/ws/"})
30+
}
2131
</script>
2232
</body>
23-
</html>
33+
</html>

‎example/test.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {LogLevel, getTagged, setDefaultLogLevel} from 'bp_logger';
2+
import * as wsp from 'wsp/player';
3+
import WebsocketTransport from 'wsp/transport/websocket';
4+
import RTSPClient from 'wsp/client/rtsp/client';
5+
import {isSafari} from "wsp/core/util/browser";
6+
7+
setDefaultLogLevel(LogLevel.Debug);
8+
getTagged("transport:ws").setLevel(LogLevel.Error);
9+
getTagged("client:rtsp").setLevel(LogLevel.Error);
10+
11+
let wsTransport = {
12+
constructor: WebsocketTransport,
13+
options: {
14+
socket: "ws://127.0.0.1:8080/ws/"
15+
}
16+
};
17+
18+
let p = new wsp.WSPlayer('test_video', {
19+
// url: `${STREAM_UNIX}${STREAM_URL}`,
20+
// type: wsp.StreamType.HLS,
21+
modules: [
22+
{
23+
client: RTSPClient,
24+
transport: wsTransport
25+
},
26+
]
27+
});

‎package.json

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,31 @@
33
"version": "0.3.13",
44
"description": "HTML5 MSE RTSP player over websockets",
55
"license": "Apache2",
6+
"private": true,
67
"author": "Streamedian <[email protected]> (http://streamedian.com/)",
7-
"homepage": "http://streamedian.com/",
8+
"homepage": "https://streamedian.com/",
89
"keywords": [
910
"html5",
1011
"rtsp",
1112
"mse",
1213
"streaming"
1314
],
1415
"contributors": [
16+
{
17+
"name": "Victor Grenke",
18+
"email": "[email protected]",
19+
"url": "https://streamedian.com/"
20+
},
21+
{
22+
"name": "Igor Shakirov",
23+
"email": "[email protected]",
24+
"url": "https://specforge.com/"
25+
},
26+
{
27+
"name": "Ruslan Shamunov",
28+
"email": "[email protected]",
29+
"url": "https://specforge.com/"
30+
},
1531
{
1632
"name": "Alexey Gornostaev",
1733
"email": "[email protected]",

‎player.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {LogLevel, getTagged, setDefaultLogLevel} from 'bp_logger';
2+
import * as streamedian from 'streamedian/player.js';
3+
import WebsocketTransport from 'streamedian/transport/websocket.js';
4+
import RTSPClient from 'streamedian/client/rtsp/client.js';
5+
import {isSafari} from "streamedian/core/util/browser.js";
6+
7+
8+
setDefaultLogLevel(LogLevel.Error);
9+
getTagged("transport:ws").setLevel(LogLevel.Error);
10+
getTagged("client:rtsp").setLevel(LogLevel.Debug);
11+
getTagged("mse").setLevel(LogLevel.Debug);
12+
13+
window.Streamedian = {
14+
logger(tag) {
15+
return getTagged(tag)
16+
},
17+
player(node, opts) {
18+
if (!opts.socket) {
19+
throw new Error("socket parameter is not set");
20+
}
21+
22+
let _options = {
23+
modules: [
24+
{
25+
client: RTSPClient,
26+
transport: {
27+
constructor: WebsocketTransport,
28+
options: {
29+
socket: opts.socket
30+
}
31+
}
32+
}
33+
],
34+
errorHandler(e) {
35+
if(opts.onerror) {
36+
opts.onerror(e);
37+
} else {
38+
alert(`Failed to start player: ${e.message}`);
39+
}
40+
},
41+
queryCredentials(client) {
42+
return new Promise((resolve, reject) => {
43+
let c = prompt('input credentials in format user:password');
44+
if (c) {
45+
client.setCredentials.apply(client, c.split(':'));
46+
resolve();
47+
} else {
48+
reject();
49+
}
50+
});
51+
}
52+
};
53+
return new streamedian.WSPlayer(node, _options);
54+
}
55+
};

‎plugins/videojs/example/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Videojs-contrib-hls.js</title>
6+
<link rel="stylesheet" href="../node_modules/video.js/dist/video-js.min.css">
7+
<!--<script src="../node_modules/video.js/dist/video.min.js"></script>-->
8+
<script src="../node_modules/video.js/dist/video.js"></script>
9+
<script src="videojs.streamedian.bundle.js"></script>
10+
</head>
11+
<body>
12+
13+
<video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none" autoplay>
14+
<source src="rtsp://127.0.0.1:8554/test/" type="application/x-rtsp">
15+
<source src="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov" type="application/x-rtsp">
16+
</video>
17+
<script>
18+
var player = videojs('#player',{
19+
rtsp_config:{
20+
websocket_url:"wss://specforge.com/ws/"
21+
}
22+
})
23+
</script>
24+
</body>
25+
</html>

‎plugins/videojs/package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "videojs_streamedian_plugin",
3+
"version": "1.0.1",
4+
"description": "rtsp/hls plugin for videojs",
5+
"main": "/dist/videojs-contrib-hlsjs.js",
6+
"directories": {
7+
"example": "examples"
8+
},
9+
"dependencies": {
10+
"video.js": "^7.2.0"
11+
},
12+
"devDependencies": {
13+
"bp_logger": "^1.1.1",
14+
"rollup": "^0.33.0",
15+
"rollup-plugin-alias": "^1.2.0",
16+
"rollup-plugin-babel": "^2.6.1",
17+
"rollup-plugin-buble": "^0.12.1",
18+
"rollup-plugin-butternut": "^0.1.0",
19+
"rollup-plugin-node-resolve": "^1.7.1"
20+
},
21+
"scripts": {
22+
"test": "echo \"Error: no test specified\" && exit 1"
23+
},
24+
"keywords": [
25+
"hlsjs",
26+
"rtspjs",
27+
"rtsp.js",
28+
"videojs",
29+
"video.js",
30+
"videojsrtsp",
31+
"videojshls"
32+
]
33+
}

‎plugins/videojs/rollup.config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import butternut from 'rollup-plugin-butternut';
2+
3+
export default
4+
{
5+
input: "src/videojs.streamedian.js",
6+
output: {
7+
file: "example/videojs.streamedian.bundle.js"
8+
},
9+
format: "umd",
10+
sourceMap: true,
11+
plugins: [ butternut() ]
12+
}

‎plugins/videojs/src/videojs.streamedian.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import videojs from 'video.js';
2+
import * as streamedian from '../../../src/player';
3+
import WebsocketTransport from '../../../src//transport/websocket';
4+
import RTSPClient from '../../../src//client/rtsp/client';
5+
import HLSClient from '../../../src//client/hls/client';
6+
7+
class StreamedianVideojs{
8+
9+
constructor(source, tech, techOptions){
10+
11+
var player = videojs.getPlayer(techOptions.playerId);
12+
this.playerOptions = player.options_;
13+
this.tech = tech;
14+
15+
this.transport = {
16+
constructor: WebsocketTransport,
17+
options: {
18+
socket: this.playerOptions.rtsp_config.websocket_url
19+
}
20+
};
21+
this.player = new streamedian.WSPlayer(tech.el(), {
22+
modules: [
23+
{
24+
client: RTSPClient,
25+
transport: this.transport
26+
},
27+
{
28+
client: HLSClient,
29+
transport: this.transport
30+
}
31+
]
32+
});
33+
}
34+
}
35+
36+
var StreamedianSourceHandler = {
37+
canHandleSource: function (source) {
38+
return this.canPlayType(source.type);
39+
},
40+
handleSource: function (source, tech, options) {
41+
return new StreamedianVideojs(source, tech, options);
42+
},
43+
canPlayType: function (type) {
44+
var canPlayType = '';
45+
if (streamedian.WSPlayer.canPlayWithModules(type,[
46+
{
47+
client: RTSPClient,
48+
transport: WebsocketTransport
49+
},
50+
{
51+
client: HLSClient,
52+
transport: WebsocketTransport
53+
}
54+
])) {
55+
canPlayType = 'probably';
56+
}
57+
return canPlayType;
58+
}
59+
};
60+
61+
videojs.getTech('Html5').registerSourceHandler(StreamedianSourceHandler, 0);

0 commit comments

Comments
 (0)