Hardware Portfolio | HTML5 RTSP Player

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.

HTML5 Player update test page We've added such feature which supports Local Fast Playback mode up to 2 minutes duration. In this mode, you can view the video at a speed of x0,5 to x5.

If you want activate this mode, click on timeline.

To return to normal playback rate, press «live». This mode is useful to see what you missed.

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

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>

Install websocket proxy
For Debian-based systems:

curl -o- http://repo.tom.ru/rpm/websockrtsprepo-1-0.deb | dpkg --install
apt install websockrtspproxy # 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
```

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