Overview
html5_rtsp_player.js is a Javascript library which implements RTSP client for watching live streams in your browser that works directly on top of a standard HTML element. It requires support of HTML5 Video with Media Sources Extensions for playback. Also player relies on server-side websocket proxy for retransmitting RTSP streams to browser.
It works by muxing RTP h.264 and MP4A-LATM payload into ISO BMFF (MP4) fragments.
html5_rtsp_player.js is written in ECMAScript6, and transpiled in ECMAScript5 using Babel.
Live test stream
Link to server running with websock_rtsp_proxy and test page http://specforge.com/html5playerstream/index.html
Browser support:
- Firefox v.42+
- Chrome v.23+
- OSX Safari v.8+
- MS Edge v.13+
- Opera v.15+
- Android browser v.5.0+
- IE Mobile v.11+
Not supported in iOS Safari and Internet Explorer
Install
npm install git://github.com/SpecForge/html5_rtsp_player.git
Usage
Browser side
Attach HTML Video with RTSP URL
<video id="test_video" controls autoplay src="rtsp://your_rtsp_stream/url"></video>
Setup player in your js:
import * as rtsp from 'rtsp_player';
rtsp.RTSP_CONFIG['websocket.url'] = "ws://websocket_proxy_address/ws"; // You should specify address of proxy described below
let player = rtsp.attach(document.getElementById('test_video'));
ES6 Modules support is required. You can use webpack with babel loader to build this script:
webpack.config.js
const PATHS = {
src: {
test: path.join(__dirname, 'test.js')
},
dist: __dirname
};
module.exports = {
entry: PATHS.src,
output: {
path: PATHS.dist,
filename: '[name].bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-3', 'stage-2', 'stage-1', 'stage-0']
}
}
]
},
resolve: {
alias: {
rtsp: path.join(__dirname,'node_modules/html5_rtsp/src')
}
}
};
> npm install bp_event bp_log bp_statemachine
> webpack --config webpack.config.js
Include compiled script into your HTML:
<script src="test.bundle.js"></script>
Server side
-
Install websocket proxy
For Debian-based systems:
wget http://repo.tom.ru/deb/debian/non-free/all/ws-rtsp-repo-1.2.deb dpkg -i ./ws-rtsp-repo-1.2.deb apt update apt install ws-rtsp-proxy # Debian-based systems
or Fedora:
dnf install http://repo.tom.ru/rpm/websock_rtsp_repo-1-0.noarch.rpm dnf install websock_rtsp_proxy
-
Configure port in /etc/ws_rtsp.ini
This port should be open in your firewall. Also you can pass request to this port from your proxy. (for example: http://nginx.org/en/docs/http/websocket.html)
-
Run it
> service ws_rtsp start
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
c>s: WSP 1.0 INIT\r\n host <RTSP stream host>\r\n port <RTSP stream port>\r\n\r\n s>c: INIT <connection_id>\r\n\r\n conection_id = -1 means error
-
Connect to RTP channel by connecting websocket with "rtp" protocol
c>s: WSP 1.0 INIT\r\n RTSP <connection_id achieved from RTSP socket initialization>\r\n\r\n s>c: INIT <connection_id>\r\n\r\n conection_id = -1 means error
-
RTP channel should send interleaved data with 4 byte header ($<channel><size>). Separate RTP is not supported at this moment
Have any suggestions for improving work of our player? Feel free to leave comments or ideas specforge@gmail.com