RTSP WS Tunnel Client (supported since version 1.8.4)

For whom this solution will be convenient.
- Who has video cameras in the local network, but there is no global IP address to access the cameras from the global network.
- Who does not have the opportunity to open the necessary ports on routers and firewalls hidden behind routers.
- If the company has a remote warehouse or several offices and production premises located in different places of the city. The ability to encrypt the channel (wss tunnel) will allow scramble your cameras.

WebSocket RTSP Tunnel Client can be installed:
- to any computer on the local network,
- to one of the most popular boards, for example, RasperiPi or OrangePi,
- flash directly into your router (using an alternative firmware).

Distribution scheme for data

Configuration for Nginx

server {
    listen 80;
    server_name <domain name>;

    location / {
	root /srv/proxy/;
	index index.html;
    }

    location = /ws/ {
	proxy_pass http://localhost:8080/ws/;
    }

    location = /tunnel/ {
	proxy_pass http://localhost:4000/tunnel/;
    }
}
	

libssl

For running in raspberry may need library "libssl1.0.0" or 1.0.1 To install it insert this line in "/etc/apt/sources.list":

deb http://archive.raspbian.org/raspbian stretch main contrib non-free

sudo apt update
sudo apt install libssl1.0.0

Controll

Commands to control the tunnel client service

systemctl start rtsp_ws_tunnel_client
systemctl stop rtsp_ws_tunnel_client

Config file /etc/rtsp_ws_tunnel_client.ini

before work need setup config parameters /etc/rtsp_ws_tunnel_client.ini

systemctl stop rtsp_ws_tunnel_client

[General]
//RTSP WS tunnel client client id
client_id=RTSP WS tunnel client

//websocket proxy access token - should be the same as on your proxy side
proxy_token=OWJlN2FiMDMtZGEyMC00NGM1LTg5ZDItOGVlMjM

// websocket proxy address - should look to your ws://
//if wss:// - set up "ssl=on" below
proxy_url=ws://192.168.1.180:8088/tunnel/

// RTSP WS tunnel client plugin dir
plugin_path=/usr/lib/rwtc/

// wss connection off - for ws:// | on - for wss://
ssl=off

[CAMERAS] - list your rtsp sources - should be TCP type
url=rtsp://192.168.1.185:554/h264 example rtsp url
url=rtsp://192.168.1.186:554/h264 example rtsp url
url=rtsp://192.168.1.187:554/h264 example rtsp url
url=rtsp://192.168.1.188:554/h264 example rtsp url
url=rtsp://192.168.1.189:554/h264 example rtsp url

systemctl start rtsp_ws_tunnel_client

Multiple licenses using

        # path to license file
        license_path=C:\Users\Public\Documents\Streamedian\WS RTSP Proxy Server\wsp.lic
        license_path=C:\Users\Public\Documents\Streamedian\WS RTSP Proxy Server\wsp_two.lic
        license_path=C:\Users\Public\Documents\Streamedian\WS RTSP Proxy Server\wsp_three.lic
    

Video playback delay where web page is inactive in the chrome browser

        // Tab switching and window minimization processing 
        // for browsers that use the chrome rendering engine.
        if (!!window.chrome) {
            document.addEventListener('visibilitychange', function() {
                if(document.visibilityState === 'hidden') {
                    nativePlayer.pause()
                } else {
                    nativePlayer.play();

                    // Automatic jump to buffer end for view live video when returning to the web page. 
                    setTimeout(function() {
                        nativePlayer.currentTime = nativePlayer.buffered.end(0)
                    }, 3000); // Delay for a few seconds is required for the player has time to update the timeline.
                }
            });
        }
    

Machine Learning object recognition (ml5.js library integration)

ml5.js integration based on HTML5 RTSP player test page

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
    

<div style="position: relative;">
    <video id="test_video" width="720" height="360" muted autoplay style="position: absolute;"></video>
    <canvas id="test_canvas" style="position: absolute;"></canvas>
</div>
    

let yolo;
let ctx;
let width;
let height;

function initObjectsDetection(playerId, canvasId, rtspLink) {
    const updateTime = 3000; // Interval in millis between image capture for objects detection
    const video = document.getElementById(playerId);
    const canvas = document.getElementById(canvasId);
    ctx = canvas.getContext('2d');
    width = video.offsetWidth;
    height = video.offsetHeight;

    // Resize canvas
    canvas.width = width;
    canvas.height = height;

    // Load Yolo model
    const ml = new ml5.YOLO(video);
    ml.loadModel().then(function(model) {
        yolo = model;

        // Start RTSP link playback
        setPlayerSource(rtspLink);

        // Set interval for objects detection
        setInterval(objectDetect, updateTime);
    });
}

function objectDetect() {
    yolo.detect(function(err, results) {
        if (results !== undefined) {
            // Draw results on canvas
            draw(results);
        }
    });
}

function draw(results) {
    ctx.clearRect(0, 0, width, height);
    ctx.font = "24px helvetica";
    ctx.textBaseline = "top";

    for (let i = 0; i < results.length; i++) { //Iterating through all results
        // Bounding box drawing
        ctx.strokeStyle = "#2fff00";
        ctx.lineWidth = 1;
        ctx.strokeRect(results[i].x * width, results[i].y * height, results[i].w * width, results[i].h * height);


        // Text drawing last to ensure it's on top
        const textWidth = ctx.measureText(results[i].label).width;
        const textHeight = parseInt("24px helvetica", 10);
        ctx.fillStyle = "#000000";
        ctx.fillText(results[i].label, results[i].x * width, results[i].y * height - 5);
    }
}

    

var player = Streamedian.player('test_video', playerOptions);
var nativePlayer = document.getElementById('test_video');
var statusText = document.getElementById('statusText');

initObjectsDetection("test_video", "test_canvas", 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov');
    

Demo: PLAYER FREE & ml5.js ML

More about ml5.js

License activation web API

{"error": "NoErrors", "message": "User authentication successfully"}

{"error": "EmailOrPasswordIsMismatch", "message": "Incorrect email or password."}

{"error": 'UserIsNotActive', 'message':'User account is not activated'}

{"error": "NoErrors", "message": "Key assigned successfully"}

{"error": 'FormatError', 'message': 'Key does not match the format'}

{"error": "NoKeyError", "message": "Key not found"}

{"error": "AlreadyError", "message": "Key already assigned another user"}

{
    "error": "NoErrors", 
    "message": "User authentication successfully", 
    "licenses": [
        {
            "licese_id": "eeec5567-bd7c-48dc-bd84-28d265b8d361", 
            "license_connections": 2, 
            "license_expire": "2020-09-29T09:10:50.005Z", 
            "machine_id": "", 
            "activation_count": 0, 
            "license_status": false, 
            "version": "1.8.3", 
            "domains": [], 
            "attempts_remained": 10
        }
    ]
}
                        

{
    "email": "user.email@mail.com", 
    "password": "userpassword",
    "domains": "c3RyZWFtZWRpYW4uY29t",
    "licese_id": "eeec5567-bd7c-48dc-bd84-28d265b8d361", 
    "machine_id": "Nkl1QA85aHF2aX9CYUxsTQxTeFoNXRYHYlprcgspagIKL2JBfhc6RH9SAzQ="
}
                            

{"error": "NoErrors", "message": "Activation successfully", "license": "TMxYDNxgj..."}

{"error": 'AlreadyError', 'message':'License already has an active machine id'}

{"error": 'LimitError', 'message':'Maximum activation amount'}

{"error": 'NoLicenseError', 'message':'User license not found'}

{
    "email": "user.email@mail.com", 
    "password": "userpassword",
    "licese_id": "eeec5567-bd7c-48dc-bd84-28d265b8d361", 
    "machine_id": "Nkl1QA85aHF2aX9CYUxsTQxTeFoNXRYHYlprcgspagIKL2JBfhc6RH9SAzQ="
}
                            

{"error": "NoErrors", "message": "Deactivation successfully"}

{"error": 'AlreadyError', 'message':'machine id already deactivated'}

{"error": 'MachineIdMismatchError', 'message':'Incorrect machine id'}

{"error": 'NoLicenseError', 'message':'User license not found'}

Statistic

Websocket statistic API provides an opportunity to receive information about license status and open connections between HTML5 RTSP player and the websocket proxy server.

Real time statistics

Follow this instruction to start getting real-time statistic about the HTML5 RTSP player connection to the websocket RTSP proxy server.

First step is to connect to the proxy webocket with specifying "statistic" subprotocol

ws://localhost:8088/ws/

Note: The webocket rtsp proxy installer installs configuration files for the NGINX and the Apache also. These configuration files tell webserver to listen 8088 port and forwards requests with the path "/ws/" to the 8080 port that the websocket proxy listens by default. So if you don't use webservers or use your own configuration then specify port 8080 for connecting to the webscoket proxy directly.

Then send the next command to websocket to subscribe to update

WSP/1.1 SUBSCRIBE
Authorization: c3RyZWFtZWRpYW4=
seq: 1

The authorization variable is password in Base64 encoding. The default password is "streamedian". To change password entry new password in the "statistic_password" variable from the ws_rtsp.ini file.

If the password is incorrect you receive message:

WSP/1.1 401 Unauthorized
seq: 1

Now when the HTML5 rtsp player connecting or disconnecting from the websocket rtsp proxy you will receive an information message from the statistic websocket. This message contains:

• connectionTime - Conection time is in epoch timestamp format without millisecond.
• disconnectionTime - Disconection time is in epoch timestamp format without millisecond. If the message reason is the "Connection open" this variable absent.
• reason - Reason for sending the message.
• rtsp - Contains host and port of remote RTSP source.
• session_id - Unique session id for determinate users.
• user - Contains the user address and requested domain.

User address descriprion:
User address is IP of user machine from which the connection request comes.

Requested domain descriprion:
The requested domain is an address that entered into a browser for opening a page with the HTML5 RTSP player. Also the requested domain is an address that is specified during license activating.

Reason message descriprion:

• Connection open - Successful open connection between the HTML5 rtsp player and the websocekt rtsp proxy.
• Connection closed - Connection is closed without error.
• Too many connections - Connection is refused because limit of simultaneous watchers is reached.
• Invalid Domain (credentials) - The requested domain does not match the address specified when activating the license.
• License expired - The license corresponding to this requested domain has expired.
• Error closing connection - An error occurred while the stream initializing.
• Bad handshake - An error occurred while the stream initializing.

Example of real-time statistic message:
Please check out the example

{
    "connectionTime": "1611850234",
    "disconnectionTime": "1611850242",
    "reason": "Connection closed",
    "rtsp": {"host": "demo.<yourdomain>.net", "port": "554"},
    "session_id": "127.0.0.1-6 41",
    "user": {"address": "127.0.0.1", "requestedDomain": "http://127.0.0.1:8088"}
}

A sample code of real-time statistic can be found on the test page.

Detailed statistic information

Follow this instruction to getting detailed statistic about licenses and the HTML5 RTSP player connection to the websocket RTSP proxy server.

First step is to connect to the proxy webocket with specifying "statistic" subprotocol

ws://localhost:8088/ws/

Note: The webocket rtsp proxy installer installs configuration files for the NGINX and the Apache also. These configuration files tell webserver to listen 8088 port and forwards requests with the path "/ws/" to the 8080 port that the websocket proxy listens by default. So if you don't use webservers or use your own configuration then specify port 8080 for connecting to the webscoket proxy directly.

Then send the next command to websocket to get detailed statistic info

WSP/1.1 GET_INFO
Authorization: c3RyZWFtZWRpYW4=
seq: 1

The authorization variable is password in Base64 encoding. The default password is "streamedian". To change password entry new password in the "statistic_password" variable from the ws_rtsp.ini file.

If the password is incorrect you got message:

WSP/1.1 401 Unauthorized
seq: 1

If request is successful you receive array with licenses information. Each element of array contain information about license, open sessions and number of open sessions.

License information contains:

• key - Unique license key. May be empty if proxy satrtup without license.
• expiresAt - License expiration date. After this date, only one session may be opened for this license. May contain "Invalid expiration time" when expiration time reading error from the license file.
• maxWatchers - Maximum number of simultaneously open sessions.

Sessions information contains array. Each element of array contains:

• rtsp - Contains remote rtsp host and port.
• user - Contains the user address and requested domain.
• connectionTime - Conection time is in epoch timestamp format without millisecond.
• session_id - Unique session id for determinate users.

Example response on detailed information request:
Please check out the example

[
    {
        "license": {
            "key": "277f7886-1ca5-4429-9463-e14a063044cb",
            "expiresAt": "Mon Jul 26 07:00:00 2021\n",
            "maxWatchers": "3"
        },
        "sessions": [
            {
            "rtsp":
                "host": "demo.<yourdomain>.net",
                "port": "554"
            },
            "user": {
                "address": "127.0.0.1",
                "requestedDomain": "http://127.0.0.1:8088"
            },
            "connectionTime": "1611942677",
            "session_id": "127.0.0.1-2 18467"
            }
        ],
        "sessionNumber": "1"
    }
]

A sample code of detailed statistic can be found on the test page.

How to save statistics to file

Simple logging examples using python 3 and nodejs

First step is the webscokets library install

pip install websockets

Sample python code to write statistic to file

#!/usr/bin/env python

import asyncio
import websockets
import base64

def write_to_file(path, response):
    with open(path, '+a', encoding='utf-8') as file:
        file.write(response)

async def statistic():
    uri = 'ws://localhost:8088/ws/'
    password = base64.b64encode(b'streamedian').decode('utf-8')
    path = 'ws_proxy_statistic.txt'

    async with websockets.connect(uri, subprotocols=['statistic']) as websocket:
        cmd = 'WSP/1.1 SUBSCRIBE\nAuthorization: {}\nseq: 1\n\n'.format(password)
        await websocket.send(cmd)

        while True:
            response = await websocket.recv()
            write_to_file(path, response)

asyncio.get_event_loop().run_until_complete(statistic())

Sample nodejs code to write statistic to file

const WebSocket = require('ws');
const fs = require('fs');

const stream = fs.createWriteStream("ws_proxy_statistic.txt", {flags:'a'});
const ws = new WebSocket('ws://localhost:8088/ws/', ['statistic']);
const password = Buffer.from('streamedian').toString('base64');

ws.on('open', function open() {
	ws.send(`WSP/1.1 SUBSCRIBE\nAuthorization: ${password}\nseq: 1\n\n`);
});

ws.on('message', function incoming(data) {
	stream.write(data);
 	console.log(data);
});

Multi docker license

This license is suitable for docker users that would like to run many docker images at the same time. Because every time when docker container recreated the machine id of this container changes. And it leads to reactivate the license, but the number of license activation is limited. Multi docker license doesn't binding to machine id. So this license remains valid after container recreation. Also you could create any number of containers with one multi docker license file. This license is supported since websocket rtsp proxy version 1.8.6

Video recording in the HTML5 RTPS player

Recorded video processing and downloading

Before start recording is necessary to setup the callback to receive a recorded video. The callback receives two arguments "data" and "prefix". The "data" is a buffer that contains recorded video and audio in the mp4 container. The "prefix" depending on who made the recording, there may be "continuous" or "event". The callback will be called when the recording is stopped or if the recording time is longer than the file length.

        // Create the html link element. Further we will use it to download the file
        var link = document.createElement('a');

        // Callback to receive and handle recorded video file
        var dataHandler = function(data, prefix) {
            // Create the Blob so we can download the video as a file
            let blob = new Blob([data], {type: "application/mp4"});
            // Create object link and set it to the HTML link element
            link.href = window.URL.createObjectURL(blob);
            // Set file name
            link.download = `${prefix}_${new Date()}.mp4`;
            // Call click method. Like a user clicked on a download link
            link.click();
        }

        // Options for HTML5 RTSP Player
        var playerOptions = {
            socket: "ws://localhost:8088/ws/",
            // Set callback to receove recorded video
            dataHandler: dataHandler,
        };

        // Set the player options to the HTML5 RTSP player
        player = Streamedian.player("VideoElementId", playerOptions);
    

Start recording

        player.continuousRecording.record(true);
        player.eventRecording.record(true);
    

File length settings

The file length value is the time in milliseconds of one file recording. If the recording time is longer than the file length value, then "datahandler" callback will be called with the recorded video fragment. And the recording will continue for the next video fragment recording. Default file length is 3 minutes.

        var playerOptions = {
            socket: "ws://localhost:8088/ws/",
            bufferDuration: 30,
            errorHandler: errHandler,
            infoHandler: infHandler,
            dataHandler: dataHandler,
            continuousFileLength: 180000, // 3 minutes
            eventFileLength: 10000, // 10 seconds
        };
    

        player.continuousRecording.setFileLength(180000); // 3 minutes
        player.eventRecording.setFileLength(10000); // 10 seconds
    

        continuousFileLengthInput.value = player.continuousRecording.fileLength;
        eventFileLengthInput.value = player.eventRecording.fileLength;