New features in the latest release (2.0.15) and how to update

  • - feature requests - added custom exit meeting options, auto end of meeting on scheduled meetings, mirrored local feed;
  • - updates on presence
  • - minor bugs fixing;

In order to apply the new changes update /js, /pages and /dash folders. Update /config/config.json file with the new properties in videoScreen: "localFeedMirrored": false, "exitMeeting": false and "exitMeetingOnTime": false. If you have changes in locales, carefully merge /locales/en_US.json

Features in 2.0.14 release

  • - localization of /dash panel;
  • - new API PHP call for adding rooms;
  • - feature requests - possibility to block certain rooms, to use rooms only from Room list, all the scripts are in the release and not loaded from outside;
  • - minor bugs fixing;

Features in older releases

  • - Possibility to encrypt username and password of the TURNserver;
  • - New grid view. You can now switch views from lines to gallery view. Also when clicking on small video pane, it will be focused in the center;
  • - Possibility to broadcast pre-recorded video. There is a new configuration option - videoScreen.videoFileStream. Supported formats are mp4, webm, mov, ogg. Check the demo here;
  • - Attendees in broadcast can be seen by everybody. Enabled by videoScreen.allowOtherSee;
  • - New Localization section in the dashboard. This eliminates the manual steps to edit your locale files. Also you can add new locales easily;

Installation Manual

LiveSmart can be legally purchased only from CodeCanyon. If you have obtained the software from another source, you face the risk of it not working properly, or to have inclusions that may harm your system.

Installation of LiveSmart is easy and straightforward. You need some basic knowledge on how to connect to your server over terminal and root access, as you need to do some Node.js installations.

1. You need Node.js installed on your server, at least version 8.* and valid SSL certificates;

2. For flawless video sessions you also need to install your own TURN server as described in this tutorial or use a free or commercial one:

For detailed step by step instructions and video manual, please enter your purchase code in the field or contact me at info@new-dev.com:

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.json 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.

Front End Installation and Guide

The front-end file structure is as follows:
- agent.html and agent.php - sample pages showing actual visitors. It can be set behind user/pass and shows the visitors of your site;
- client.html and client.php - sample pages containing the status button, from where your visitors can start video/chat communications with you;
- pages - HTML pages;
- pages/r.html - this is the actual video/chat panel, where the video objects resides;
- config/config.json - 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 for signaling server.
- ws/ssl/ - sample self-signed certificates.
- admin/ - admin panel to be integrated in bigger platforms.
- dash/ - dashboard standalone admin panel for managing rooms/users/agents/recordings/configuration settings and locales.

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.json file.
data-names Optional. Names of the agent. This option can be also defined in the config.json 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.
data-visitor_name Optional. Visitor name can be set with this parameter. Used when the button is for a specific predefined user.
data-datetime Optional. Datetime added in the format YYYY-MM-DDThh:mm:00.000Z in UTC.
data-duration Optional. Duration of the meeting in minutes.
* 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 .
anonVisitor (*) How the anonymous visitor will be seen on your end. If you set Visitor in the chat pane, or in the video preview, you will see the attendee name as Visitor-[some number].
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;
- waitingRoom - true/false, system messages are shown in the video panel, not in the chat. Default is false;
- onlyAgentButtons - true/false, only agent side has action buttons activated. Not visible for visitors. Default is false;
- enableLogs - true/false, if set to true, this will enable logging in the browser console. It is recommended to be false and enabled only for tracking problems. Default is false;
- videoConstraint - JSON ({"width": {"min": 640, "ideal": 640, "max": 640}, "height": {"min": 400, "ideal": 400, "max": 400}, "frameRate": { "max": 30 }, "aspectRatio": {"ideal": 1.7777777778}}), set video quality. Optional, may not present;
- audioConstraint - JSON ({"sampleSize": 16, "channelCount": 2}), set audio quality. Optional, may not present;
- screenConstraint - JSON ({"maxWidth": 1920, "maxHeight": 1080}), set screenshare max width/height quality. Optional, may not present;
- videoContainerStyle - this is a required attribute and is defining the UI of the LiveSmart pane. The default value is 'conference' and is representing a Zoom like UI. If you set 'simple', LiveSmart will use the old look and feel;
- separateScreenShare - true/false. When starting a screen share, its stream is replacing video. By setting this setting to true, the screen sharing will be in a separate stream and will not affect showing the video. Default is false;
- broadcastAttendeeVideo - true/false. When an attendee in the broadcasting session raises a hand, the organizer can grant him permission to speak. He can join with audio if this setting is false and with audio and video if true. Default is false;
- allowOtherSee - true/false. When an attendee in the broadcasting session is granted privilege to broadcast and if this option is enabled, the attendee will be seen/heard by everybody. Default is false;
- localFeedMirrored - true/false. If is true, the local video screen is showing as mirrored. Default is false;
- exitMeeting - String/false. This property is defining the behavior on exit meeting. It can be an URL or JavaScript. Example: https://google.com will redirect to Google on exit. javascript:alert('Your meeting has ended') will popup an alert with sign "Your meeting has ended". Default is false;
- exitMeetingOnTime - true/false. If set to true, when there is a duration set of the meeting, it will pop a notification one minute before the meeting ends and when the meeting finished it will automatically ends it. Default is false;
- videoFileStream - String. Set here a path to video file (supported formats are mp4, webm, mov, ogg);
- primaryCamera - 'user'/'environment'. Defines the default starting camera for mobiles. 'User' is the front camera, 'environment' is the back one. Default or if missing is 'user';
- videoConference - true/false, when the videoContainerStyle is set to 'conference' and this attribute is true, the video screen of the talking attendee will become big. Default is true;
Constraints values can be seen described in this article.
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;
- agentInfo - true/false, gets agent info from the DB, ignoring all the other information - the URL or the button. Default is false;
- token - true/false, agent and user login type. Tokens are defined for each attendee per room. Default is false;
- feedback - true/false, enables feedback facility. Rate and feedback form triggers for visitors once the call is ended. Default is false;
- checkRoom - true/false, If set to true, video is allowed only for enabled rooms from the Database, listed in Room list. 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;
transcribe Configuration settings for voice to text feature:
- enabled - true/false. Default is false;
- language. The language to which voice will be transcribed into text. Available languages are listed here. Default is "en";
- languageTo. If set, this will be the language to which will be translated the specified in language;
- apiKey. Google API key necessary for the translation to work. In this tutorial is described how to get it.;
- direction. This parameter can have three values - both, agent or visitor. When used both, the translation goes in the two directions - from agent to visitor and vice versa. When set to agent, the agent speech will be translated from transcribe.language to transcribe.languageTo in the visitor screen. If direction is visitor, then the visitor speech will be translated from transcribe.languageTo to transcribe.language in the agent screen;
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;
- screen - true/false, if set to true, enables recording of everything. Records are in chunk of one minute long. Default is false;
- oneWay - true/false, if set to true, enables recording only for visitors. Agent is not recorded. Default is false;
- transcode - true/false, if set to true, enables FFmpeg transcoding of the recorded file. It is mandatory FFmpeg to be installed on your system (Ubuntu, CentOS, Debian and Windows) and recroding.saveServer to be true. Default is false;
appWss (*) URL of the signaling server. It should be SSL enabled - WSS.
maxParticipantsAllowed Optional setting, limiting participants in a meeting.
blackList Optional setting, list with rooms, that are banned. Format is [roomId1, roomId2, ...]
iceServers (*) - requirePass - true/false, default is false. For more info on how to encrypt username/password, check in the installation manual;
- 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 agent (the organizer) is in the room, it is now opened for video and chat:


From here users can toggle video and audio, do screenshare and whiteboard, make a snapshot, or start a recording session.
Remember to give permission for the browser to user your camera and/or microphone.

The available buttons here are:

- Toggle video - start/stop video camera;
- Toggle audio;
- Share screen - available only for Chrome, Firefox and Edge;
- Switch camera - if on mobile with back and front cameras, or on computer with more than one camera installed;
- Share screen - available only for Chrome, Firefox and Edge;
- Whiteboard - available only for Chrome, Firefox and Edge;
- Snapshot - take a screen capture of the video.
- Recording - Start/stop a recording of a meeting. Available only for Chrome and Firefox;
- Exit - user can exit from the current meeting.
action buttons

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.json 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.",
...
}
You can skip these manual steps, by using the locale section in the Dashboard panel.

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.json 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 admin or dash panels. Set entryForm.enabled to true, and generate the room with a password from the agent page;
- Make this server side. Set entryForm.enabled, entryForm.showEmail, entryForm.private and serverSide.loginForm to true, check if PHP connection script is properly set and execute SQL dump files 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 lsv_users as is in the SQL dump file, but you can use your own backend facility. Make sure you have added users in the table from the admin panels;

Admin panel

The admin panel has a backend information about the agents, users, rooms, chat history and recordings.
You need PHP >5.6 and MySQL on your server.
Check here with demo/demo. The client page for the demo agent is here. 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