Streamedian is a Javascript library which implements RTSP client for watching live streams in your browser that works directly on top of a standard HTML <video> 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 H264 and AAC payload into ISO BMFF (MP4) fragments.
Streamedian is written using ECMAScript 2015 standard
Not supported in iOS Safari and Internet Explorer.
Only player sources
npm install git://github.com/Streamedian/html5_rtsp_player.git
Attach HTML Video with RTSP URL
<video id="test_video" controls autoplay src="rtsp://your_rtsp_stream/url"></video>
or
<video id="test_video" controls autoplay> <source src="rtsp://your_rtsp_stream/url"> </video>
You can ignore source by passing data-ignore="true":
<video id="test_video" controls autoplay> <source src="natively_supported_video_url" data-ignore="true"> <source src="rtsp://your_rtsp_stream/url"> </video>
If browser can play that source, player will not be initialized for this element.
Include compiled script into your HTML:
<script src="streamedian.js"></script>The "streamedian.js" file is in the "HTML5 RTSP player" archive. Follow the link to download "HTML5 RTSP video player"
Setup player in your js:
if (window.Streamedian) { var playerOptions = { socket: "ws://localhost:8088/ws/", redirectNativeMediaErrors : true, bufferDuration: 30, }; player = Streamedian.player("test_video", playerOptions); }
Player comprises three main modules: transport, client and remuxer.
Transport responsible for data delivery and data queuing. It should fire connected, disconnected and data events. As soon data received, transport should push it into dataQueue and fire data event. Base class for transports can be found in core/base_transport. As a default, WebsocketTransport that relies on websocket proxy is implemented.
Client listens for data events, parse it into elementary stream packets and enqueue parsed data into it's own queue. Client can pass queued buffer to remuxer with samples event. To identify stream track client should fire tracks event. When ready, flush event can be used to construct media fragment and pass it to video presenter. Base class for transports can be found in core/base_client. Default client is RTSP client over websocket transport.
Remuxer prepares media fragment for video presenter and push it. There is only video presenter at the moment, based on media source extensions. Remuxer collects data into mp4 media fragments (moof+mdat) and pass it into source buffer.
You install on your PC the restricted proxy server for streaming RTSP over websockets and the free RTSP Player.
We recommend to use the option "Service + NGINX web server" in the installer for testing of our software. It allows to launch the RTSP Player in your default browser by double-click on the "Streamedian Player URL.lnk" file from your desktop.
Then you can set a RTSP link, for example: rtsp://<your's local PC ip address>:554/h264, and watch RTSP stream in your browser. In text field you can type your own RTSP source url.
If you will change ws_rtsp.ini or wsp.lic files, be sure that you save in UTF8 encoding.
1. Need to turn off your firewall. 2. Find the string "127.0.0.1" in the "index.html" file and replace on an actual IP of PC, where the Proxy server was installed and launched.
Streamedian.player('test_video', {socket:"ws://<your's local PC ip address>:8088/ws/"});
The file is here:
C:\Users\Public\Documents\Streamedian\WS RTSP Player\nginx\html\index.htmlNote: In the example uses webserver Nginx which forwards all requests from port 8088 to websocket proxy server port 8080. To connect the player to websocket server directly change port number in socket address from 8088 to 8080. Also webscoket proxy port maybe changed in "ws_rtsp.ini" file.
Empty license file allows to watch the stream on your computer locally (intranet) only.
To stream into the Global network need to obtain the license file.
After registration on the website personal test key is gave in the personal cabinet.
To activate the key select "online" or "offline" method and follow the steps
C:\Program Files\Streamedian\WS RTSP Proxy Server\activation_app2. Entry number 2 to select offline activation. If the machine info file generated successfully we saw a message with file location
C:\Users\Public\Documents\Streamedian\WS RTSP Proxy Server\wsp.lic11. To restart the service run:
C:\Program Files\Streamedian\WS RTSP Proxy Server\restart_service.batPlease note that you can activate a key a limited number of times. The number of remaining activation attempts can be seen when choosing a license.
C:\Program Files\Streamedian\WS RTSP Proxy Server\activation_app2. Entry number 1 to select online activation
1. Uninstall the previous version of the Streamedian WS RTSP Proxy Server.
2. Download DebugView.zip. Unpack it and launch DbgView.exe. You will need to accept the License Agreement. The DebugView is an application of a wholly owned subsidiary of Microsoft Corporation.
3. Install the new Streamedian WS RTSP Proxy Server.
4. Reproduce an issue.
5. Watch logs on DebugView
You install on your PC the restricted proxy server for streaming RTSP over websockets and the free RTSP Player.
We recommend to use the option "NGINX web server" in the installer for testing of our software. It allows to launch the RTSP Player in your default browser by double-click on the "LauchPlayer" from "/Applications/Streamedian WS RTSP Proxy Server/". Or type "http://127.0.0.1:8088/" in your browser.
Then you can set a RTSP link, for example: rtsp://<your's local PC ip address>:554/h264, and watch RTSP stream in your browser. In text field you can type your own RTSP source url.
The configuration file is placed here:
/Users/Shared/Streamedian/WS RTSP Proxy Server/ws_rtsp.ini
If you will change ws_rtsp.ini or wsp.lic files, be sure that you save in UTF8 encoding.
1. Need to turn off your firewall. 2. Find the string "127.0.0.1" in the "index.html" file and replace on an actual IP of PC, where the Proxy server was installed and launched.
Streamedian.player('test_video', {socket:"ws://<your's local PC ip address>:8088/ws/"});
The file is here:
/Library/Application Support/Streamedian/WS RTSP Proxy Server/index.htmlNote: In the example uses webserver Nginx which forwards all requests from port 8088 to websocket proxy server port 8080. To connect the player to websocket server directly change port number in socket address from 8088 to 8080. Also webscoket proxy port maybe changed in "ws_rtsp.ini" file.
Empty license file allows to watch the stream on your computer locally (intranet) only.
To stream into the Global network need to obtain the license file.
After registration on the website personal test key is gave in the personal cabinet.
To activate the key select "online" or "offline" method and follow the steps
/Library/Application Support/Streamedian/WS RTSP Proxy Server/activation_app2. Entry number 2 to select offline activation. If the machine info file generated successfully we saw a message with file location
/Users/Shared/Streamedian/WS RTSP Proxy Server/wsp.lic11. To restart the service run:
/Library/Application Support/Streamedian/WS RTSP Proxy Server/restart_service.shPlease note that you can activate a key a limited number of times. The number of remaining activation attempts can be seen when choosing a license.
/Library/Application Support/Streamedian/WS RTSP Proxy Server/activation_app2. Entry number 1 to select online activation
You install on your PC the restricted proxy server for streaming RTSP over websockets and the free RTSP Player. The current package installs configuration files for the NGINX and the Apache web servers.
We recommend to install the NGINX web server for most easy testing of our software. To install the NGINX web server, please type in the Terminal:
sudo apt install nginx
It allows to launch and test the RTSP Player in your default browser by typing "localhost:8088" (without quotes).
Then you can set a RTSP link, for example: rtsp://<your's local PC ip address>:554/h264, and watch RTSP stream in your browser. In text field you can type your own RTSP source url.
The configuration file is placed here:
/etc/ws_rtsp.ini
If you will change ws_rtsp.ini or wsp.lic files, be sure that you save in UTF8 encoding.
If you would like to use the Apache web server for testing, just type in your browser "localhost:8088" (without quotes). If you have installed the Apache web server after this package, please type in the Terminal:
sudo a2enconf ws_rtsp_proxy_stream.conf sudo service apache2 reload
1. Need to turn off your firewall. 2. Find the string "127.0.0.1" in the "index.html" file and replace on an actual IP of PC, where the Proxy server was installed and launched.
Streamedian.player('test_video', {socket:"ws://<your's local PC ip address>:8088/ws/"});
The file is here:
/var/www/ws_rtsp_proxy/index.htmlNote: In the example uses webserver Nginx which forwards all requests from port 8088 to websocket proxy server port 8080. To connect the player to websocket server directly change port number in socket address from 8088 to 8080. Also webscoket proxy port maybe changed in "ws_rtsp.ini" file.
Empty license file allows to watch the stream on your computer locally (intranet) only.
To stream into the Global network need to obtain the license file.
After registration on the website personal test key is gave in the personal cabinet.
To activate the key select "online" or "offline" method and follow the steps
/usr/bin/wsp/activation_app2. Entry number 2 to select offline activation. If the machine info file generated successfully we saw a message with file location
/usr/share/wsp/wsp.lic11. To restart the service run:
/usr/share/wsp/restart_service.shPlease note that you can activate a key a limited number of times. The number of remaining activation attempts can be seen when choosing a license.
/usr/bin/wsp/activation_app2. Entry number 1 to select online activation
You install on your PC the restricted proxy server for streaming RTSP over websockets and the free RTSP Player.
If you would like to test our software in the simplest way, then we advice you to use the following way:
1. Run the script /usr/share/wsp/nginx/nginx_setup.sh. It will install the NGINX web server and setup your environment.
2. Open a web browser on some PC in your local subnet. And type "IP_ADDRESS:8088", where 'IP_ADDRESS' is the IP of PC, where the proxy server was installed.
3. Then you can set a RTSP link, for example: rtsp://<your's local PC ip address>:554/h264, and watch a RTSP stream in your browser. In the text field you can type your own RTSP source url.
The configuration file is placed here:
/etc/ws_rtsp.ini
If you will change ws_rtsp.ini or wsp.lic files, be sure that you save in UTF8 encoding.
If you would like to use the Apache web server for testing, just type in your browser "localhost:8088" (without quotes). If you have installed the Apache web server after this package, please type in the Terminal:
sudo a2enconf ws_rtsp_proxy_stream.conf sudo service apache2 reload
1. Need to turn off your firewall. 2. Find the string "127.0.0.1" in the "index.html" file and replace on an actual IP of PC, where the Proxy server was installed and launched.
Streamedian.player('test_video', {socket:"ws://<your's local PC ip address>:8088/ws/"});
The file is here:
/var/www/ws_rtsp_proxy/index.htmlNote: In the example uses webserver Nginx which forwards all requests from port 8088 to websocket proxy server port 8080. To connect the player to websocket server directly change port number in socket address from 8088 to 8080. Also webscoket proxy port maybe changed in "ws_rtsp.ini" file.
Empty license file allows to watch the stream on your computer locally (intranet) only.
To stream into the Global network need to obtain the license file.
After registration on the website personal test key is gave in the personal cabinet.
To activate the key select "online" or "offline" method and follow the steps
/usr/bin/wsp/activation_app2. Entry number 2 to select offline activation. If the machine info file generated successfully we saw a message with file location
/usr/share/wsp/wsp.lic11. To restart the service run:
/usr/share/wsp/restart_service.shPlease note that you can activate a key a limited number of times. The number of remaining activation attempts can be seen when choosing a license.
/usr/bin/wsp/activation_app2. Entry number 1 to select online activation
tar -xvf ./ws-rtsp-proxy_1.8.5.tar.gzMove "wsp" folder to "/usr/share":
sudo mv wsp /usr/share/Install the Docker:
sudo apt-get install docker.ioLoad websocket rtsp proxy image to docker in your server:
sudo docker load -i ./ws-rtsp-proxy_1.8-5Run docker container based on websocket rtsp proxy image:
sudo docker run -d --name ws-rtsp -p 8080:8080 --mount src="/usr/share/wsp/",target=/usr/share/wsp/,type=bind ws-rtsp-proxy:1.8-5Command parameters explanation:
"-d" parameter run docker container in daemon mode "--name ws-rtsp" parameter specifies name "ws-rtsp" for container "-p 8080:8080" parameter is proxing an in/out connection between host server port 8080 and container port 8080 "--mount" parameter gives the container access to the folder "/usr/share/wsp". So when we placing a license file in "/usr/share/wso" folder, it's will be available for the websocket proxy in the container.For container manipulation is necessary to know container name. To get information about running containers and container name use follows command:
sudo docker ps -aWe can see the websocket rtsp proxy logs using docker "logs" command with specifying the container name:
sudo docker logs ws-rtsp
sudo docker network create streamedian-network2) Run ws-rtsp docker container with parameters:
sudo docker run -d --name ws-rtsp --network streamedian-network --mount src="/usr/share/wsp/",target=/usr/share/wsp/,type=bind ws-rtsp-proxy:1.8-53) Download HTML5 RTSP video player from streamdian.com and extract archive:
unzip ./streamedian_1.8.5.2.zip4) Create directory "config" for Nginx configuration file:
mkdir config5) Create Nginx configuration file:
touch ./config/nginx.confAnd write follow settings to Nginx configuration file:
server { listen 8088; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; } location = /ws/ { proxy_pass http://ws-rtsp:8080/ws/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; proxy_connect_timeout 90s; } }6) After that run docker container with nginx (nginx image will be pulled from the docker repository):
sudo docker run --name test-page --network streamedian-network -p 0.0.0.0:80:8088 --mount src=/home/user/streamedian,target=/usr/share/nginx/html,type=bind --mount src=/home/user/config,target=/etc/nginx/conf.d,type=bind -d nginx7) Open test page in web browser and start player:
http://localhost:8088
sudo ./getMachineId.sh ws-rtsp2. Go to the personal cabinet(www.stremedian.com/cabinet) 3. Choose "Offline activation" tab
/usr/share/wsp/wsp.lic10. After that we generate and download license place license file to "/usr/share/wsp" and restart container with following commands:
sudo docker stop ws-rtsp
sudo docker start ws-rtspPlease note that you can activate a key a limited number of times. The number of remaining activation attempts can be seen when choosing a license.
sudo ./getMachineId.sh ws-rtsp2. Download activation application from streamedian.com
tar -xvf ./activation_app_1.8.5.tar.gz4. Run activation application with path to machine_info.bin:
./activation_app --m ./machine_info.bin5. Entry number 1 to select online activation
/usr/share/wsp/wsp.lic10. After that we generate and download license place license file to "/usr/share/wsp" and restart container with following commands:
sudo docker stop ws-rtsp
sudo docker start ws-rtsp
RTSP player establish connection with proxy with following protocol:
c>s: WSP/1.1 INIT\r\n seq: <sequence_id for response tracking> host: <RTSP stream host>\r\n port: <RTSP stream port>\r\n\r\n s>c: WSP/1.1 200 OK\r\n seq: <sequence_id for response tracking> channel: <channel_id>\r\n\r\n Error codes >= 400 means error
c>s: WSP/1.1 JOIN\r\n seq: <sequence_id for response tracking>\r\n channel: <channel_id achieved from RTSP socket initialization>\r\n\r\n s>c: WSP/1.1 200 OK\r\n seq: <sequence_id for response tracking>\r\n\r\n Error codes >= 400 means error
c>s: WSP/1.1 WRAP\r\n seq: <sequence_id for response tracking>\r\n \r\n <RTSP_PROTOCOL_DATA> s>c: WSP/1.1 200 OK\r\n channel: <channel_id>\r\n \r\n <RTSP_PROTOCOL_RESPONSE> Error codes >= 400 means error
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).
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/; } }
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-freeThen run following command in respberry terminal:
sudo apt update sudo apt install libssl1.0.0
Commands to control the tunnel client service
systemctl start rtsp_ws_tunnel_client systemctl stop rtsp_ws_tunnel_client
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 urlyou will see this list on the test page when the page makes the first connection to the proxy after changing the ini file need restart tunnel client service
systemctl start rtsp_ws_tunnel_client
# 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
// 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. } }); }Remove this javascript code from the test page to disable automatic jump to buffer end for view live video.
<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>Canvas adding to test page for bounding boxes displaying
<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>Javascript code for object detection and bounding bosxes drawing
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); } }Object detection initialization calling after streamedian player initialized
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');
Use this POST request to verify a user credentials:
URL: https://streamedian.com/account/api/login/
Data: {"email": "user.email@mail.com", "password": "userpassword"}
Email and password is the same as the user was registered on the website
{"error": "NoErrors", "message": "User authentication successfully"}If user email or password incorrect the response will be error code 403 and the response:
{"error": "EmailOrPasswordIsMismatch", "message": "Incorrect email or password."}If the user account is not active the response will be:
{"error": 'UserIsNotActive', 'message':'User account is not activated'}
Use this POST request for the activation key assigning to user account:
URL: https://streamedian.com/account/api/assign_activation_key/
Data: {"email": "user.email@mail.com", "password": "userpassword", activation_key: "YWN0aXZhdGlvb***iBrZXk="}
Email and password is the same as the user was registered on the website
The activation key should be encoded to base64 string!!!
{"error": "NoErrors", "message": "Key assigned successfully"}If the activation key format is incorrect the response will be error code 403 and the response:
{"error": 'FormatError', 'message': 'Key does not match the format'}If the activation key is not available the response will be error code 403 and the response:
{"error": "NoKeyError", "message": "Key not found"}If the activation key already assigned another user the response will be error code 403 and the response:
{"error": "AlreadyError", "message": "Key already assigned another user"}
Use this POST request to get the available license list:
URL: https://streamedian.com/account/api/licenses/
Data: {"email": "user.email@mail.com", "password": "userpassword"}
Email and password is the same as the user was registered on the website
{ "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 } ] }
Use this POST request for license activation:
URL: https://streamedian.com/account/api/activate/
Data:
{ "email": "user.email@mail.com", "password": "userpassword", "domains": "c3RyZWFtZWRpYW4uY29t", "licese_id": "eeec5567-bd7c-48dc-bd84-28d265b8d361", "machine_id": "Nkl1QA85aHF2aX9CYUxsTQxTeFoNXRYHYlprcgspagIKL2JBfhc6RH9SAzQ=" }Email and password is the same as the user was registered on the website
{"error": "NoErrors", "message": "Activation successfully", "license": "TMxYDNxgj..."}If the license already activated error code will be 403 and response:
{"error": 'AlreadyError', 'message':'License already has an active machine id'}If the activation attempt limit is reached error code will be 403 and response:
{"error": 'LimitError', 'message':'Maximum activation amount'}If the license with specified license id is not available error code will be 404 and response:
{"error": 'NoLicenseError', 'message':'User license not found'}
Use this POST request for license deactivation:
URL: https://streamedian.com/account/api/deactivate/
Data:
{ "email": "user.email@mail.com", "password": "userpassword", "licese_id": "eeec5567-bd7c-48dc-bd84-28d265b8d361", "machine_id": "Nkl1QA85aHF2aX9CYUxsTQxTeFoNXRYHYlprcgspagIKL2JBfhc6RH9SAzQ=" }Email and password is the same as user registered on the website
{"error": "NoErrors", "message": "Deactivation successfully"}If the license already deactivated error code will be 403 and response:
{"error": 'AlreadyError', 'message':'machine id already deactivated'}If machine id is not specified error code will be 403 and response:
{"error": 'MachineIdMismatchError', 'message':'Incorrect machine id'}If the license with specified license id is not available error code will be 404 and response:
{"error": 'NoLicenseError', 'message':'User license not found'}