Streamedian is a Javascript library which implements RTSP client for watching live streams in your browser
that works directly on top of a standard HTML
It works by muxing RTP H264 and AAC payload into ISO BMFF (MP4) fragments.
Streamedian is written using ECMAScript 2015 standard.
If browser can play that source, player will not be initialized for this element.
Setup player in your js:
import * as streamedian from 'streamedian/player.js';
// import WebsocketTransport from 'wsp/transport/websocket';
// import RTSPClient from 'wsp/client/rtsp/client';
let mediaElement = rtsp.attach(document.getElementById('test_video'));
let player = new streamedian.WSPlayer(mediaElement, {
// url: `${STREAM_URL}`, // overrides mediaElement's sources
modules: [
{
// client module constructor. Should be subclass or BaseClient. RTSPClient by default
// client: RTSPClient,
transport: {
// client module constructor. Should be subclass or BaseTransport. WebsocketTransport by default
// constructor: WebsocketTransport,
options: {
// address of websocket proxy described below. ws${location.protocol=='https:'?'s':''}://${location.host}/ws/ by default
socket: "ws://websocket_proxy_address/ws",
// function called player exceptions
errorHandler (e) {
alert(`Failed to start player: ${e.message}`);
},
// function to get credentials for protected streams
queryCredentials() {
return new Promise((resolve, reject)=>{
let c = prompt('input credentials in format user:password');
if (c) {
this.setCredentials.apply(this, c.split(':'));
resolve();
} else {
reject();
}
});
}
}
}
},
]
});
ES6 Modules support is required. You can use rollup to build this script:
rollup.config.js
import buble from 'rollup-plugin-buble';
import alias from 'rollup-plugin-alias';
const path = require('path');
export default {
entry: path.join(__dirname, 'example.js'),
targets: [
{dest: path.join(__dirname, 'example/streamedian.js'), format: 'es'}
],
sourceMap: true,
plugins: [
// uncomment if you want to transpile into es5
//buble({
//exclude: 'node_modules/**'
//}),
alias({
bp_logger: path.join(__dirname,'node_modules/bp_logger/logger'),
bp_event: path.join(__dirname,'node_modules/bp_event/event'),
bp_statemachine: path.join(__dirname,'node_modules/bp_statemachine/statemachine'),
//jsencrypt: path.join(__dirname,'node_modules/jsencrypt/src/jsencrypt.js'),
streamedian: path.join(__dirname,'src')
})
]
}
Streamedian player support both basic and digest authentication. Authentication type is detected automatically
when you connect to the stream.
You can directly specify user/password in rtsp url in form rtsp://username@password:stream.url/resource/
or pass queryCredentials() function to streamedian.WSPlayer. This function in order
should return promise that call this.setCredentials(user, password).
Player comprises three main modules: transport, client and remuxer.
Transport responsible for data delivery and data queuing. It should fire connected, disconnected and data events.
As soon data received, transport should push it into dataQueue and fire data event. Base class for transports can be found in core/base_transport.
As a default, WebsocketTransport that relies on websocket proxy is implemented.
Client listens for data events, parse it into elementary stream packets and enqueue parsed data into it's own queue. Client can
pass queued buffer to remuxer with samples event. To identify stream track client should fire tracks event. When ready, flush
event can be used to construct media fragment and pass it to video presenter. Base class for transports can be found in core/base_client.
Default client is RTSP client over websocket transport.
Remuxer prepares media fragment for video presenter and push it. There is only video presenter at the moment, based on media source extensions.
Remuxer collects data into mp4 media fragments (moof+mdat) and pass it into source buffer.
How RTSP proxy works?
RTSP player establish connection with proxy with following protocol:
Connect to RTSP channel by connecting websocket with "rtsp" protocol specified and get connection id
RTP channel should send interleaved data with 4 byte header ($<channel><size>). Separate RTP is not supported at this moment
Load balancing
RTSP proxy does not support load balancing itself but can be easily integrated with such load balancers like nginx.
You can start multiple instances of proxy on different sockets and configure nginx upstreams.
Have any suggestions to improve our player?
Feel free to leave comments or ideas [email protected]
请发表评论