New features in the current release (1.0.16) and how to update

  • - Chat history. Execute the additions_1.0.16.sql dump file in /server folder so chat table be created. To enable chat history set serverSide.chatHistory to true in config/config.ini
  • - Chat view to be always present in video, whiteboard and broadcasting panes. Can be enabled from config/config.ini to true;
  • - Improved multi user video conferencing
  • - Improved multi user screen sharing
  • All folders except /ws have to be updated. Please merge with care config/config.ini and the files in the root - agent/client HTML and PHP pages and demo.htaccess

Quick Start Guide

  1. Make sure you have HTTPS on your web server with SSL enabled certificate;
  2. For your back-end you need Node.js 4.5+ or PHP 5.6+;
  3. Now you can start with installation process. Copy all the files to your destination folder;
  4. (optional) Move ws folder outsite the public one;
  5. Check here how to install on Node.js and here on PHP. Also you can check the video tutorial;
  6. After you have your signaling server installed, open config/config.ini file and edit YOUR_DOMAIN with your server;
  7. Edit the sample HTML page in the root of your folder, agent.html and client.html. Change YOUR_DOMAIN with your server too;
  8. When done you can check if this is working. Open agent page and click on Generate Link button. It will open a new page in a popup and put in the clipboard the corresponding link, that you can open in a new browser or device. The other option is to open client.html and click on the button to open the popup from there;
  9. Follow this tutorial in order to install own STUN/TURN server;
  10. If you need the broadcasting feature, check here;

Detailed instructions are below. LiveSmart Web Chat signaling part can be done over Node.js or PHP.

Backend Signaling Using Node.js (recommended)

First you need to unpack the ws folder in a non public folder of your webserver. You have to change PATH_TO_CERTIFICATE_KEY and PATH_TO_CERTIFICATE_CERT to your actual certificates. For test purposes you may use the self-singed certificates in the /ws/ssl folder. If you are using the test certificate and key, remember to set passphrase of 123456789
After you are sure you have at least Node 4.0 installed run
npm install
in the /ws folder.
The following packages should be installed:
"ws", "express", "https" and "fs".
After the installation process finishes, you can open /ws/bin and run
node server

In order to run in the background, you may need process manager, for example pm2. You can install it with
npm install pm2 -g

To add a process use
pm2 start server.js

To list the processes:
pm2 list

You can stop it using
pm2 stop server

Backend Signaling Using PHP

If you use PHP for websocket communication, you need WSS. Please read this thread and this in order to set it correctly

Configuring Web Servers

Nginx web server
In order to use websockets over SSL (wss) you need to enable proxy on your webserver. Here are tutorials for Nginx web server and how to set
Remember that the location should be as in the configuration file. Our example is with comm, so the same should be in the location:
location /comm/ {
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_read_timeout 86400;

Apache web server
You can check this tutorial on how to set webscokets.

The PHP is using the Ratchet library for websockets. In order to install the necessary packages, use composer ( tutorial on how to install composer ):
php ~/composer.phar require cboden/ratchet
After the installation process finishes, you may run:
php server.php
In order to run in the background:
nohup php server.php &
List the processes:
ps aux | grep server
Stop the process
kill -9 id
Where id is the ID of the process.


SmartVideo Video platform offers all customers an advanced video real-time communications solution through all audio/video/screen/data streams are transmitted. Generally, it has to be deployed over a public Internet so any user must connect and send media fragments over RTP (Real-time Transport Protocol) ports without specific network issues.
However, sometimes this is not enough. Some users try to connect through different IP networks where Firewalls and NATs (Network Address Translators) could include specific policies that do not allow any kind of RTC communications. ICE (Interactive Connectivity Establishment) protocol is used to find the best connection solution. It defines a systematic way of finding possible communication options between a peer and the Video Gateway (WebRTC).

What is a STUN Server?

Sometimes, you can use a protocol called STUN (Session Traversal Utilities for NAT) that allows clients to discover their public IP address and the type of NAT they are behind. This information is used to establish the media connection. In most cases, a STUN server is only used during the connection setup and once that session has been established, media will flow directly between the peer and the Video Gateway (WebRTC).

What is a TURN Server?

However, even if we setup properly a STUN server, there are very restrictive corporate networks (e.g: UDP traffic forbidden, only 443 TCP allowed…), which will require clients to use a TURN (Traversal Using Relays around NAT) server to relay traffic if direct (peer to Video Gateway) connection fails. In these cases, you can install our TURN server (in another instance) to solve these issues.
The TURN server is really easy to add for all your RTC developments, including it as another ICE server within the Video Gateway (WebRTC).

Installing COTURN server

coturn is open-source TURN/STUN solution available at We recommend installing and running this server as explained in this great tutorial.
When installed, you need to update /config/config.ini with the relevant URLs.

The following diagram depicts the signaling process:

Server Side User Login

You may use server side scripts to enable login for your visitors. The /server folder contains two PHP files and a sample SQL dump for users table. connect.php contains necessary information for DB connection and the script.php is performing the connection logic. The sample users table contains only two fields - username and MD5 encrypted password, but it can be enhanced to adapt for your own system.


If you need the broadcasting tool, you have to install the included broadcasting server. This can be done in the same host where signaling part is.
Go to /ws/broadcast and run
npm install
Then change accordingly the settings in /ws/broadcast/config.json file with isUseHTTPs to be true, set the correct path to certificates (you may use same certificate and key paths as for the signaling), user logs, etc. The other place that needs update is broadcastUrl in the config/config.ini where you set the correct URL for the broadcasting server, usually with the same domain as the signaling, but with port 9001 if not set different.
After that run in /ws/broadcast folder
pm2 start broadcast.js
Please have in mind that broadcast server can not operate without running the signaling server.

Front End Installation and Guide

The front-end file structure is as follows:
- agent.html - sample page showing actual visitors. It can be set behind user/pass and shows the visitors of your site;
- client.html - sample page page containing the status button, from where your visitors can start video/chat communications with you;
- pages - HTML pages;
- pages/room.html - this is the actual video/chat panel, where the video objects resides;
- config/config.ini - configuration JS file;
- js/bundle.js - bundled JavaScript code, responsible for loading the button and agent.
- js/bundle-client.js - bundled JavaScript that is included in the video popup window.
- css/ - CSS files. button_*.css - all the button styles.
- extensions/screenshare/chrome/ - Chrome extension necessary for screen sharing.
- locales/ - internationalization JSON file.
- media/ - ringtones.
- server/ - server side PHP scripts and SQL dump file. Used for server side user login and saving the recorded video file.
- ws/ - composer and package JSON files.
- ws/bin/ - executable JS and PHP files.
- ws/broadcast/ - broadcasting server configuration and executable JS files.
- ws/ssl/ - sample self-signed certificates.

Status Button

Add the following code snippet to your site, so you are able to track and communicate with your visitors:

<div id="nd-widget-container" class="nd-widget-container"></div>
<script id="newdev-embed-script" data-message="Start Video Chat" data-source_path="YOUR_DOMAIN" src="YOUR_DOMAIN/js/widget.js" async></script>

The script accepts some data attributes, so you can personalize it:

Data attribute Description
data-source_path (*) The website your button resides. It should be HTTPS
data-button-css Optional. The CSS of the button itself. The default style is located at /css/button.css. There are six prefefined styles that are listed below
data-message Optional. The label on the button. Default is "Start Video Chat"
data-avatar Optional. Image of the agent. It can be PNG, JPG, CSV. This can be also defined in the config.ini file.
data-names Optional. Names of the agent. This option can be also defined in the config.ini file
data-room_id Optional. If you need the button to open only specific room.
data-agent_id Optional. Defining specific agent scope that only agent with the same ID in the agent dashboard will be notified of client presence.
data-iframe_id Optional. ID of target iframe. If you want the video window to open in an iframe and not in popup. Make sure the "allow" attribute with values "camera, microphone" is included;
data-intab Optional. If this is set to true, the video window will open in a new tab, not in popup window.
data-offline_email Optional. Contact email when you are not available and the button is offline. By clicking on the button a contact form will open and the visitor can add his inquiry there.
data-offline_page Optional. URL of the contact page. If set, when the visitor clicks on the offline button, he will be redirected to the specified contact page.
* Mandatory data attribute

Config file properties:

Property Description
agentName Optional. Name of the agent/owner. This can be set also in the code snippet of the button.
agentAvatar Optional. Avatar, image of the agent/owner. This can be set also in the code snippet of the button.
chromePluginId (*) Id of the Chrome screen sharing plugin. Do not change unless you have own plugin installed.
smartVideoLanguage (*) Language of the application. If you need it translated, you have to set locale file with the same structure in the /locales folder. If you set smartVideoLanguage: es_ES you must have es_ES.json file with the same structure as en_US.json .
entryForm Optional. It has additional sub parameters:
- enabled - true/false, default is false;
- required - true/false, the form is mandatory. Default is false;
- private - true/false, set the form to have password field. If the admin has set a pass for this room, the pass field is mandatory. Default is false;
- showEmail - true/false, show or not email field. Default is false;
- showAvatar - true/false, show or not field for inputing avatar URL. Default is false;
videoScreen It has one additional sub parameter:
- chat - true/false, show or not chat pane in the right of video session, whiteboard or broadcast. Default is false;
serverSide Optional. Enabling server side login check with PHP and MySQL scripting. For now has only one sub parameter:
- loginForm - true/false, enables server side user login. Check PHP scripts and SQL dump file in /server folder. Default is false;
- chatHistory - true/false, enables saving of chat history. Check PHP connect and script PHP files and SQL dump in /server folder. Default is false;
whiteboard Configuration settings for whiteboard feature:
- enabled - true/false. Default is false;
- allowAnonymous - true/false. If true, all the attendees in the conference can draw. Default is false;
recording Optional. It has additional sub parameters:
- enabled - true/false, default is false;
- download - true/false, if set to true, right after the recording or meeting ends, the record file will be downloaded. Otherwise a link for preview will be shown. Default is false;
- saveServer - true/false, if set to true, the recorded file will be send to backend for saving. Check /server/saverecord.php. Default is false;
- autoStart - true/false, if set to true, the recorded will start automatically the moment call is established. Default is false;
appWss (*) URL of the signaling server. It should be SSL enabled - WSS.
broadcastUrl URL of the broadcasting server. You should have first installed and run it. It has usually the same domain as signaling server but is on another port - 9001.
iceServers (*) STUN/TURN servers. Defaults are to Google STUN. If you have enabled own STUN/TURN server, you need to set it here.
* Mandatory fields

Predefined button styling

CSS File Button

Video and Chat Page

After the visitor clicks on the status button and if the owner is online (the agent.html page is opened) or if he has the private room URL a popup with the chat view is opened

From here the user can chat or send a file to the remote party, start a video or audio only call.
Remember to give permission for the browser to user your camera and/or microphone.
If a video/audio session is started the popup is expanded and the following page is visible:

The available buttons here are:

- Toggle video - start/stop video camera;
- Toggle audio;
- Share screen - available only for Chrome, Firefox and Edge;
- Recording - Start/stop a recording of a meeting. Available only for Chrome and Firefox;
- Switch camera - if on mobile with back and front cameras, or on computer with more than one camera installed;
- Chat screen - the user can swipe back to chat screen by clicking this button or simply by swiping the screen if on mobile.


LiveSmart Video Chat supports internationalization. The locale strings are in locale JSON file in /locales folder. If you need to translate to Spanish, you have to add es_ES.json file to /locales folder with the same structure as en_US.json file and set language in the /config/config.ini smartVideoLanguage: es_ES
The key->value pairs should be as follows
"Cancel" : "Sesion finalizada.",
"waitingToConnect" : "Conectándose",
"callWithVideo" : "Llama a través del servicio de video llamada.",
"callWithAudio" : "Comunícate a través del servicio de llamada.",

Screen Sharing

Screen sharing is available for Chrome 72+, Firefox 52+ and MS Edge 17+ browsers without additional installations. If you use an older Chrome browser, we have a multi domain ScreenShare plugin specially done for LiveSmart Video Chat.
Also the /extension/chrome folder contains JS code for enabling screen sharing on Chrome browser. Screen sharing on Firefox and Edge is pluginless.
In order to enable screen sharing plugin for older Chrome browsers you have the following options:

- download the plugin from Google Webstore or if it is not installed and you click on the Share button, you will be redirected to it.
- change the chromePluginId in /config/config.ini and icon.png in /extension/chrome. Then zip the files and publish the extension to Google Developer Dashboard;
- publish the extension locally. Open chrome://extensions in your Chrome, check Developer mode in the upper right corner, click on Load unpacked and point to where is you chrome extension folder.

Private Access

If you need to make access to your rooms private behind a password, you can do it two ways:
- from the agent.html page. Set entryForm.enabled and entryForm.private to true, and generate the room with a password from the agent page;
- Make this server side. Set serverSide.loginForm to true, check the PHP scripts and SQL dump file in /server folder. The PHP file connect.php is used to make the connection to the DB and script.php is doing the actual job. We assume that the table is users as is in the SQL dump file, but you can use your own backend facility;

Agent page

This is a simple list with visitors of your site. If a visitor opens the chat from the status button, the agent sees Enter room link, from where he can start interaction with the visitor. Also the agent can generate a random private room and send it to start video chat.
From here you can also generate a custom visitor room and/or define private access for it.

In order to save the room information in a DB, you need to make the same steps as in Private Access.
Short URLs are a convenient way to represent your rooms and that can be easily shared and send. You need mod_rewrite enabled. If you have already .htaccess in the folder where LiveSmart is, check demo.htaccess and add the new lines to your .htaccess, otherwise use demo.htaccess and rename it to .htaccess
Check here how agent page and relevant client page work.

Video Tutorials

Installation process Front-end tutorial