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

  • - Pre-call form to configure your video and audio devices;
  • - Private messaging. Possibility to send private messages to a visitor in a conference;
  • - Bug fixes.

In order to apply the new settings update /pages, /css, /img and /locales folders. There is a new config option - videoScreen.greenRoom: true/false, that is enabling the pre-call form.
Pre-call form:
Private messages:


Quick Start Guide

1. You need Node.js at least v4.8.2., SSL certificates and root privileges. Check node -v so you know which version of the node you have.

Edit ws/bin/server.js file so PATH_TO_CERTIFICATE_KEY and PATH_TO_CERTIFICATE_CERT point to your actual certificates, usually the key is in /etc/ssl/private/ and the certificate is in /etc/ssl/certs/ folders in Linux systems:

const pkey = fs.readFileSync('/etc/ssl/private/ACTUAL.key'),
        pcert = fs.readFileSync('/etc/ssl/certs/ACTUAL.crt'),
        options = {key: pkey, cert: pcert, passphrase: ''};

After this, you need to go to /ws folder and run
npm install.
You may install pm2 for better service management with npm install pm2 -g
Go to /ws/bin folder and run pm2 start server.js.
Edit /config/config.ini property appWss YOUR_DOMAIN with your domain – so it become
"appWss": "wss://your_actual_domain:3434/comm".
You need to edit the example files agent.html, agent.php, client.html and client.php – change YOUR_DOMAIN with https://your_actual_domain

2. You have to install TURN server of your own or use a free one from here: https://numb.viagenie.ca/ but it is recommended using your own as described here: https://www.webrtc-experiment.com/docs/TURN-server-installation-guide.html

When you have the TURN installed or set up, change the default one in /config/config.ini file.

3. If you need backend facilities like saving rooms, agent login, user login in the visitor site and URL shortener, make sure you have PHP >5.6 and MySQL.

Open /server/connect.php and edit the file with your credentials, then execute the SQL dumps in the same folder in the following order:
- dump.sql and following additions_1.0.*.sql dumps.
Be careful if you have set table prefix, to set it in the SQL dumps also.
Master agent with admin/admin is created and you can login to the admin panel.

Rename demo.htaccess to .htaccess if you do not have your own .htaccess, otherwise but merge with the existing one.

4. If you have WordPress site you may download and install LiveSmart WordPress plugin from here.

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_pass http://127.0.0.1:8080;
  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 https://getcomposer.org/download/ ):
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.

How to test your environment

You may download this ZIP file with a signaling server and follow the included instructions on how to test if your server will meet the requirements to run LiveSmart Video Chat.

STUN/TURN Servers

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 https://github.com/coturn/coturn. 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.

Broadcasting

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 Defining the video screen UI
- chat - true/false, show or not chat pane in the right of video session, whiteboard or broadcast. Default is false;
- greenRoom - true/false, enables pre-call form, where user can choose available audio and video devices. 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
button_green.css
button_blue.css
button_gray.css
button_lightgray.css
button_lightred.css
button_orange.css

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.

Internationalization

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;

Admin panel

The admin panel has a backend information about the agents, users, rooms and chat history.
You need PHP >5.6 and MySQL on your server. Then in /server/connect.php update the necessary credentials. In order the necessary tables to be created, execute the SQL files one by one: dump.sql, additions_1.0.11.sql, additions_1.0.16.sql and additions_1.0.17.sql
Check here with demo/demo. The client page for the demo agent is here.


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