html5_rtsp_player教程,GitHub - L1129433134/html5_rtsp_player: html5 player for rtsp stream

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

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 transpired in ECMAScript5 using Babel.

* HLS player link

* Here you can find HLS player over websocket https://github.com/SpecForge/html5_hls_player

Live test stream

Link to server running with websock_rtsp_proxy and test page http://specforge.com/html5playerstream/index.html

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

Browser side

Attach HTML Video with RTSP URL

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_logger bp_statemachine

> webpack --config webpack.config.js

Include compiled script into your HTML:

Server side

Install websocket proxy

For Debian-based systems (tested on Ubuntu 16.04):

wget -O - http://repo.tom.ru/deb/specforge.gpg.key | sudo apt-key add -

wget http://repo.tom.ru/deb/pool/non-free/w/ws-rtsp-repo/ws-rtsp-repo_1.3_all.deb

dpkg -i ./ws-rtsp-repo_1.3_all.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

Note that this package depends on systemd and gcc5+ runtime so it can be installed

only on recent distribution versions.

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 \r\n

port \r\n\r\n

s>c:

INIT \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 \r\n\r\n

s>c:

INIT \r\n\r\n

conection_id = -1 means error

RTP channel should send interleaved data with 4 byte header ($). Separate RTP is not supported at this moment

Have any suggestions to improve our player?

Feel free to leave comments or ideas specforge@gmail.com