RTSP WS Tunnel Client (supported since version 1.8.4)

Who will benefit from this solution?
- The ones who has video cameras in the local network, but there is no global IP address to access the cameras from the global network.
- The ones who don't have an option to open the necessary ports on routers and firewalls hidden behind routers.
- Companies that have 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 you to 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 on raspberry you might 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

Control

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

At the start you need to 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 usage

        # 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 when 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 to watch live video when returning to the web page. 
                    setTimeout(function() {
                        nativePlayer.currentTime = nativePlayer.buffered.end(0)
                    }, 3000); //  Few seconds delay is required so the player would have 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 milliseconds 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 is last to ensure that 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": "3.1", 
            "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 ability 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 HTML5 RTSP player connection to the websocket RTSP proxy server.

First step is to connect to the proxy websocket specifying "statistic" subprotocol

ws://localhost:8088/ws/

Note: The websocket rtsp proxy installer installs configuration files for the NGINX and Apache. These configuration files tell webserver to listen 8088 port and forward requests with the "/ws/" path to 8080 port that 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 websocket proxy directly.

Then send 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 enter new password in the "statistic_password" variable in the ws_rtsp.ini file.

If password is incorrect, then you will receive following message:

WSP/1.1 401 Unauthorized
seq: 1

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

• connectionTime - Connection time is in epoch timestamp format without millisecond.
• disconnectionTime - Disconnection time is in epoch timestamp format without millisecond. If the cause of the message is "Connection open", then this variable is absent.
• reason - Reason for sending the message.
• rtsp - Contains host and port of remote RTSP source.
• session_id - Unique session ID to identify users.
• user - Contains the user address and requested domain.
• videoFormat - Video codec format. h264 or h265.

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

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

Reason message description:

• Connection open - Successful connection opening between the HTML5 rtsp player and the websocket rtsp proxy.
• Connection closed - Connection is closed without errors.
• 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 during license activation.
• License expired - The license corresponding to this requested domain has expired.
• Error closing connection - An error occurred while initializing the stream.
• Bad handshake - An error occurred while initializing the stream.

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"},
    "videoFormat": "h264"
}

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

Detailed statistic information

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

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

ws://localhost:8088/ws/

Note: The websocket 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 websocket 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 startup 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 - Connection time is in epoch timestamp format without millisecond.
• session_id - Unique session id for determinate users.
• videoFormat - Video codec format. h264 or h265.

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",
            "videoFormat": "h264"
            }
        ],
        "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 websockets 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. Separate license is necessary because every time when docker container recreated the machine id of this container changes. And it leads to reactivating the license, but the number of license activation is limited. Multi docker license doesn't bind 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

If you would like to use this custom license, then please contact us at streamedian.player@gmail.com.

Enable H265 support

The H265 feature is available immediately after the websocket rtsp proxy installation. Free license supports 3 simultaneously viewed streams and the test page will work in the local network only. For using of global domain name or your web page from global network it's necessary to activate free or regular license to enable supporting of H265 streaming. Please use the free license first to make sure that our product works successfully with your video stream source before purchasing a license. Note that when counting the number of opened connections (users watching), it does not take into account the type of stream.

Video recording in the HTML5 RTPS player

Recorded video processing and downloading

Before recording start it's 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" depends on who made the recording, it may be "continuous" or "event". The callback will be called when recording is stopped or if recording time is longer than the file length.

        // Create the html link element. We will use it to download the file further down the line
        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 receive 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;