Home

[LiveSmart Team]

This is a demo page, where you can see how LiveSmart Video Chat with social login form works.

1. Open the organizer link;
You will see the initial entry form. By providing a common name, you can enter the room as room owner.

2. Click this attendee link to copy it in the clipboard and send it to a new device or open in incognito tab.

3. You can continue to video meeting after login with your Facebook or Google account. Recording feature is available for Chrome or Firefox browser. When the call is established, you can click on the Recording icon to start record the meeting. Once you stop the recording, a preview link is available.

WARNING! Please note that you have to allow your browser to access camera and/or microphone in order the video chat to work.

In order to reduce the echo if you are on the same machine, you can mute microphone or lower the volume. For optimal demo results it is good to use two different devices.

If you see “Waiting for the other party to join” label, make sure both links are opened.

If you need assistance or facing problems with the demo, please do check the contact options or visit our support forum.

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.

[LiveSmart Team]

In this demo you will see how admission facility works. Also the meeting is scheduled to end in 4 minutes after the meeting starts.
If you need assistance or facing problems with the demo, please do check the contact options or visit our support forum.

1. Open this organizer link;
You will see the initial entry form. By providing a common name, you can enter the room as room owner.

2. Click this attendee link to copy it in the clipboard and send it to a new device or open in incognito tab.

3. After the visitor enters the room, the agent will be prompted to admit the visitor in the room. Meeting duration is set to 4 minutes.

WARNING! Please note that you have to allow your browser to access camera and/or microphone in order the video chat to work.

In order to reduce the echo if you are on the same machine, you can mute microphone or lower the volume. For optimal demo results it is good to use two different devices.

If you see “Waiting for the other party to join” label, make sure both links are opened.

If you need assistance or facing problems with the demo, please do check the contact options or visit our support forum.

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.

[LiveSmart Team]

New features in the latest (2.0.37) release

• WoWonder v.4.1.1 and PlayTube 2.2.1 integrations;
• Minor UI fixes;

Integrations are included in extension folder of the latest release.

Features in previous releases

• Virtual background, where you can blur your background or add your own. When the meeting starts click on the virtual icon and choose to blur your background or set a fancy image for a background.
• Active meetings. The organizers can track if there are any active meetings running and they also can join them.
• Text to speech module. Now your chat and translated messages can be received as voice to the other party. There are two new configuration options – transcribe.text_speech_chat and transcribe.text_speech_transcribe that enables text to speech in chat and translation modules;
• Feature requests: API secured with Authorization token, option for scheduled meetings to end for organizer too and password recovery module;
• New Chrome extension to assist your organizers. More information about this feature can be found here.
• Integration with WoWonder 3.2.2, PlayTube 2.1 and WonderTag 2.3.6 theme. Demo with admin1/admin1234 and demo1/demo1234 users is available here.
• Integration with DocTreat theme;
• Integration with LatePoint Plugin. You can read more about LiveSmart integrations here;
• Video Session logs gathering of all video related events – start video, end video, attendee joining and leaving, start and stop screenshare, start and stop recording. There is a new configuration option – serverSide.videoLogs and additional SQL file to be executed;
• Feature request – timer for remaining time for scheduled meetings, introduced a new configuration property – videoScreen.meetingTimer;
• Social media login. Enabled for Facebook and Google accounts.
• Admission facility. Now host can approve or reject an attendee in a meeting. This is a configuration option;

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 as there is an installation page and script to help you with the process. There is a video tutorial on how to do this. 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 10.* and valid SSL certificates;

2. For flawless video sessions you also need to install your own TURN server as described in this Ubuntu tutorial or here: CentOS tutorial. Other option is to use 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 contact@livesmart.video:

Submit

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

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 core JS files.
– js/bundle-client.js – bundled JavaScript that is included in the video popup window.
– css/ – CSS files. button_*.css – all the button styles.
– extensions/ – integrations with WoWonder, Wondertag, Doctreat, PlayTube and Latepoint platforms. Google Chrome extension to assist LiveSmart organizers.
– 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/organizers/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 organizer. It can be PNG, JPG, CSV. This can be also defined in the config.json file.
data-names	Optional. Names of the organizer. 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 organizer scope that only organizer with the same ID in the organizer dashboard will be notified of client presence.
data-config	Optional. Define a config file for the meeting. It needs to be present in /config folder of LiveSmart. Otherwise it will fallback to the default configurations;
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.
data-disablevideo	Optional. Option to disable video for the meeting.
data-disableaudio	Optional. Option to disable audio for the meeting.
data-disablewhiteboard	Optional. Option to disable whiteboard for the meeting.
data-disablescreenshare	Optional. Option to disable screenshare for the meeting.
data-transfer	Optional. Option to disable file transfer for the meeting.
*	Mandatory data attribute

Config file properties:

– terms – string, this is URL for the Terms&Conditions. If filled, the checkbox will appear in the entry form and will be mandatory;

– text_speech_chat – true/false. Enables text to speech in chat, default is false;
– text_speech_transcribe – true/false. Enables text to speech in translation module, default is false;

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 organizer 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; – meetingTimer – true/false. Applies only to scheduled meetings. If set to true, the timer will appear two minutes before the meeting ends. Default is false; – admit – true/false. Enables admission facility. If set to true, visitor is required to be approved by the host to enter the meeting. Default is false; – pipEnabled – true/false. Enables picture in picture feature. Supported by Chrome for desktop, both desktop and iOS Safari and Edge. It is enabled by default for Firefox. 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’; – dateFormat – possibility to add different time formats for Scheduled meetings. ISO, short, medium and long date formats are supported; – 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 organizer info from the DB, ignoring all the other information – the URL or the button. Default is false; – token – true/false, organizer 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; – videoLogs – true/false, If set to true, the system will start to gather all video related events – start video, end video, attendee joining and leaving, start and stop screenshare, start and stop recording. 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 organizer to visitor and vice versa. When set to agent, the organizer 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 organizer 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. Organizer 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; – filename – “record_%room%_%datetime%”, defining the file name pattern. %room% and %datetime% are placeholders and will automatically be changed with the room name and the current date/time. – recordingConstraints – defining the desired recording video size. Default values are {“width”: 360, “height”: 240}.
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, …]
alwaysNotify	Optional setting, if set to true, notification will be always set, not only when the screen is not on focus. Default is false.
maxParticipantsAllowed	Optional setting, if set, will define number of allowed visitors in a meeting.
social	– enabled – true/false, default is false. Enables social media login. entryForm.enabled also should be true, and Facebook and/or Google API IDs be provided; – facebookId. Facebook application ID, necessary for Facebook login. Check this tutorial on how to get ID; – googleId. Google API ID. Check the tutorial on how to get Google client ID.
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 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.

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 organizer 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 organizers, 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 organizer 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

[LiveSmart Team]

This is a demo page, where you can see how LiveSmart Video Chat allows one or more broadcasters to stream pre-recorded video to their attendees. Video file is loaded from the server or from any location, that is specified in the configuration.

Normal broadcasting demo, where you can stream from your camera is located here.

1. Open the broadcaster link.

You will see the prerecroded video being played in your bottom left video pane.

2. Click on the viewer link to copy it in the clipboard and send it to a new device or open in incognito tab.
and receive live streaming of pre-recorded video.

WARNING! Please note that you have to allow your browser to access camera and/or microphone in order the video chat to work.

In order to reduce the echo if you are on the same machine, you can mute microphone or lower the volume. For optimal demo results it is good to use two different devices.

If you see “Waiting for the other party to join” label, make sure both links are opened.

If you need assistance or facing problems with the demo, please do check the contact options or visit our support forum.

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.

[LiveSmart Team]

This is a demo page, where you can see how the proactive chat engagement from agent dashboard works. Agent can start a chat from agent dashboard with a visitor to the site.

1. Open this agent link. You will see the agent dashboard, where you can pro-actively engage the current visitor.
Click on the link and start chat:

2. In this page you can respond, minimize or close the chat. Once closed, the agent cannot engage the visitor any more.

If you need assistance or facing problems with the demo, please do check the contact options or visit our support forum.

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.

[LiveSmart Team]

This is a demo page, where you can see how LiveSmart Video Chat voice to text and translation module works. This functionality works only with desktop and mobile Chrome browsers.

In order the demo to work, and there is no echo and overload, you should do this on different devices and not close one to another.
1. Choose the agent language from the list
Afrikaans (af)Albanian (sq)Amharic (am)Arabic (ar)Armenian (hy)Azerbaijani (az)Basque (eu)Belarusian (be)Bengali (bn)Bosnian (bs)Bulgarian (bg)Catalan (ca)Cebuano (ceb)Chichewa (ny)Chinese (Simplified) (zh)Chinese (Traditional) (zh-TW)Corsican (co)Croatian (hr)Czech (cs)Danish (da)Dutch (nl)English (en)Esperanto (eo)Estonian (et)Filipino (tl)Finnish (fi)French (fr)Frisian (fy)Galician (gl)Georgian (ka)German (de)Greek (el)Gujarati (gu)Haitian Creole (ht)Hausa (ha)Hawaiian (haw)Hebrew (iw)Hindi (hi)Hmong (hmn)Hungarian (hu)Icelandic (is)Igbo (ig)Indonesian (id)Irish (ga)Italian (it)Japanese (ja)Javanese (jw)Kannada (kn)Kazakh (kk)Khmer (km)Korean (ko)Kurdish (Kurmanji) (ku)Kyrgyz (ky)Lao (lo)Latin (la)Latvian (lv)Lithuanian (lt)Luxembourgish (lb)Macedonian (mk)Malagasy (mg)Malay (ms)Malayalam (ml)Maltese (mt)Maori (mi)Marathi (mr)Mongolian (mn)Myanmar (Burmese) (my)Nepali (ne)Norwegian (no)Pashto (ps)Persian (fa)Polish (pl)Portuguese (pt)Punjabi (pa)Romanian (ro)Russian (ru)Samoan (sm)Scots Gaelic (gd)Serbian (sr)Sesotho (st)Shona (sn)Sindhi (sd)Sinhala (si)Slovak (sk)Slovenian (sl)Somali (so)Spanish (es)Sundanese (su)Swahili (sw)Swedish (sv)Tajik (tg)Tamil (ta)Telugu (te)Thai (th)Turkish (tr)Ukrainian (uk)Urdu (ur)Uzbek (uz)Vietnamese (vi)Welsh (cy)Xhosa (xh)Yiddish (yi)Yoruba (yo)Zulu (zu)
and open the agent link
You will see the initial entry form. By providing a common name, you can enter the room as room owner.

2. Choose the attendee language from the list
Afrikaans (af)Albanian (sq)Amharic (am)Arabic (ar)Armenian (hy)Azerbaijani (az)Basque (eu)Belarusian (be)Bengali (bn)Bosnian (bs)Bulgarian (bg)Catalan (ca)Cebuano (ceb)Chichewa (ny)Chinese (Simplified) (zh)Chinese (Traditional) (zh-TW)Corsican (co)Croatian (hr)Czech (cs)Danish (da)Dutch (nl)English (en)Esperanto (eo)Estonian (et)Filipino (tl)Finnish (fi)French (fr)Frisian (fy)Galician (gl)Georgian (ka)German (de)Greek (el)Gujarati (gu)Haitian Creole (ht)Hausa (ha)Hawaiian (haw)Hebrew (iw)Hindi (hi)Hmong (hmn)Hungarian (hu)Icelandic (is)Igbo (ig)Indonesian (id)Irish (ga)Italian (it)Japanese (ja)Javanese (jw)Kannada (kn)Kazakh (kk)Khmer (km)Korean (ko)Kurdish (Kurmanji) (ku)Kyrgyz (ky)Lao (lo)Latin (la)Latvian (lv)Lithuanian (lt)Luxembourgish (lb)Macedonian (mk)Malagasy (mg)Malay (ms)Malayalam (ml)Maltese (mt)Maori (mi)Marathi (mr)Mongolian (mn)Myanmar (Burmese) (my)Nepali (ne)Norwegian (no)Pashto (ps)Persian (fa)Polish (pl)Portuguese (pt)Punjabi (pa)Romanian (ro)Russian (ru)Samoan (sm)Scots Gaelic (gd)Serbian (sr)Sesotho (st)Shona (sn)Sindhi (sd)Sinhala (si)Slovak (sk)Slovenian (sl)Somali (so)Spanish (es)Sundanese (su)Swahili (sw)Swedish (sv)Tajik (tg)Tamil (ta)Telugu (te)Thai (th)Turkish (tr)Ukrainian (uk)Urdu (ur)Uzbek (uz)Vietnamese (vi)Welsh (cy)Xhosa (xh)Yiddish (yi)Yoruba (yo)Zulu (zu)
Click this attendee link to copy it in the clipboard and send it to a new device so there is no echo. The attendee should see subtitles in his language while the agent is speaking. His voice on the other hand will be translated to the agent language.

WARNING! Please note that you have to allow your browser to access camera and/or microphone in order the video chat to work.

In order to reduce the echo if you are on the same machine, you can mute microphone or lower the volume. For optimal demo results it is good to use two different devices.

If you see “Waiting for the other party to join” label, make sure both links are opened.

If you need assistance or facing problems with the demo, please do check the contact options or visit our support forum.

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.

[LiveSmart Team]

This is a demo page, where you can see how LiveSmart Video Chat voice to text module works. This functionality works only with desktop and mobile Chrome browsers.

1. Open this agent link
You will see the initial entry form. By providing a common name, you can enter the room as room owner.

2. Click this attendee link to copy it in the clipboard and send it to a new device.

When you start speaking, you should see the voice from the agent being transcribed as subtitles.

Check the video how to use this demo

WARNING! Please note that you have to allow your browser to access camera and/or microphone in order the video chat to work.

In order to reduce the echo if you are on the same machine, you can mute microphone or lower the volume. For optimal demo results it is good to use two different devices.

If you see “Waiting for the other party to join” label, make sure both links are opened.

If you need assistance or facing problems with the demo, please do check the contact options or visit our support forum.

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.

[LiveSmart Team]

This is a demo page, where you can see how the button and the corresponding agent link works.

Copy the agent link, open in another browser or mobile device, and after that as you see the button becomes green and you can click on it.
You will see the initial entry form. By providing a common name, you can enter the room as room owner.

When the button becomes green and when you click on it, you will see how client window is opened in the an iframe just below:

WARNING! Please note that you have to allow your browser to access camera and/or microphone in order the video chat to work.

In order to reduce the echo if you are on the same machine, you can mute microphone or lower the volume. For optimal demo results it is good to use two different devices.

If you see “Waiting for the other party to join” label, make sure both links are opened.

If you need assistance or facing problems with the demo, please do check the contact options or visit our support forum.

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.

[LiveSmart Team]

This is a demo page, where you can see how LiveSmart Video Chat with enabled recording and chat with password protected form works.

1. Open the organizer link;
You will see the initial entry form. By providing a common name, you can enter the room as room owner.

2. Click this attendee link to copy it in the clipboard and send it to a new device or open in incognito tab.
The password is set to 123;

3. Recording feature is available for Chrome or Firefox browser. When the call is established, you can click on the Recording icon to start record the meeting. Once you stop the recording, a preview link is available.

WARNING! Please note that you have to allow your browser to access camera and/or microphone in order the video chat to work.

In order to reduce the echo if you are on the same machine, you can mute microphone or lower the volume. For optimal demo results it is good to use two different devices.

If you see “Waiting for the other party to join” label, make sure both links are opened.

If you need assistance or facing problems with the demo, please do check the contact options or visit our support forum.

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.

[LiveSmart Team]

This is a demo page, where you can see how LiveSmart Video Chat with enabled recording and chat with identification form works.

1. Open the agent link;
You will see the initial entry form. By providing a common name, you can enter the room as room owner.

2. Click this attendee link to copy it in the clipboard and send it to attendees you with to participate in the conference or open in incognito tab.

When all the participants are in the room, it will look like this

3. You may start the call by clicking on video or audio button from any of the sides.
Recording feature is available for Chrome or Firefox browser and from the admin side. When the call is established, you can click on the Recording icon to start record the meeting. Once you stop the recording, a preview link is available.

The visitor has a notification that the meeting is being recorded:

There are options for recording to autostart when the call is established and recorded files to be stored on the server.

WARNING! Please note that you have to allow your browser to access camera and/or microphone in order the video chat to work.

In order to reduce the echo if you are on the same machine, you can mute microphone or lower the volume. For optimal demo results it is good to use two different devices.

If you see “Waiting for the other party to join” label, make sure both links are opened.

If you need assistance or facing problems with the demo, please do check the contact options or visit our support forum.

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.

[LiveSmart Team]

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.

You can encrypt the TURN server username and password here. How to do this:

1. Choose a passphrase and set it in /server/connect.php file in $pasPhrase. You can generate a random one from Random.com
2. Encrypt your username and password from the form below. For example username1 with passphrase qcnUXPps4Rfz1K3x will be a61LBWXdEQlApk5TfZtraQ== and password1 with the same passphrase will be zd9lMwpTDsjJN6V8D0BuKQ==. Then the whole iceServer part of your config.json will be something like:

"iceServers": {
    "requirePass": true,
    "iceServers": [{
        "urls": [
                "stun:yourdomain:3478"
            ],
            "credential": "zd9lMwpTDsjJN6V8D0BuKQ==",
            "username": "a61LBWXdEQlApk5TfZtraQ=="
    },
    {
            "urls": [
                "turn:yourdomain:5349"
            ],
            "credential": "zd9lMwpTDsjJN6V8D0BuKQ==",
            "username": "a61LBWXdEQlApk5TfZtraQ=="
        }
    ]
}

3. Edit Configuration in you Dashboard and check the option “Username and password are encrypted”

Purchase code

Your desired passcode, that you will set in /server/connect.php

Your username or password string

Submit

[LiveSmart Team]

Open your cPanel, find where SSL section is

Click on Certificates

Find your server and it valid certificates and click on Edit

Scroll to bottom, right click on the link and copy it

The link is something of the type:

https://…../…./frontend/paper_lantern/ssl/viewkey.html?id=c99d7_26a03_39730483e85009664387718bccb5fb96

c99d7_26a03_39730483e85009664387718bccb5fb96 is the key and it location is:

/home/YOURACCOUNT/ssl/keys/c99d7_26a03_39730483e85009664387718bccb5fb96.key

and the certificate file is:

/home/YOURACCOUNT/ssl/certs/someting_c99d7_26a03_something.crt

[LiveSmart Team]

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

The following diagram depicts the signaling process:

[LiveSmart Team]

Integration with WoWonder Platform

Integrations with latest WoWonder Platform are included in extension/wowonder/XX folders. Wowonder, Sunshine and Wondertag themes are supported.

Link to LiveSmart dashboard panel

Dashboard panel

From the message panel you can start a video call with the remote attendee

When you start a call, you will be notified from the Message facility and the LiveSmart notification system.

LiveSmart URL must be set in WoWonder administration panel.

Demo page for Wowonder theme is available here with admin user admin1/admin1234 and regular user demo1/demo1234.

Integration with Wondertag theme

Demo with Wondertag theme is available here with same users – admin1/admin1234 and demo1/dmeo1234

Integration with PlayTube

Integration with PlayTube 2.0.3 and 2.0 is included in extension/playtube/2.0 folder. Demo is available here.

Integration with LatePoint Plugin

LiveSmart integration with LatePoint is included from 2.0.20 release in extension/latepoint/XX folder. When a visitor creates a booking, it automatically creates a scheduled meeting for this booking in LiveSmart.

Integration with DocTreat Theme

LiveSmart integration with DocTreat is included from 1.3.8 release in extension/doctreat/1.3.8 folder. LiveSmart dashboard is included in the doctor dashboard. When a patient books an appointment, it is automatically created in the LiveSmart dashboard.

Other platforms and systems

LiveSmart has been successfully integrated in PHP Pro Bid.
If you need more information about integrating with these platforms, please do check the contact options or visit our support forum.

[LiveSmart Team]

Meeting Room

LiveSmart Video Chat main facility is a video chat between an organizer and one or more attendees. The organizer role can be performed by tutor, doctor, support personnel, real estate agent, car reseller, registered user in a social media, etc
In order a call to be performed, both parties need to be online in one room. You can generate rooms for your customers in a couple of ways:
– Add a code snippet to your browser pages, so a contact button appears and informs your visitors that you are online;
– Generate a room from the Dashboard page. You can add room ID, visitor name (if you are expecting someone to come), password if you want this room to be protected and organizer name;
– Make the link to be dynamically generated by your system;

When both parties are available, visitor will either be prompted for name/email/password (it depends on the configuration) or directly joined to the room.

From here he can start chatting, toggle video or audio, transfer a file, do a screen share or take a snapshot* of the other party video screen.
From the organizer side, there is an additional icon for starting a whiteboard session*:

* This setting needs to be enabled in the configuration file. Whiteboard is also available for visitors as a configuration. For more details see the Whiteboard section

Contact Button

The contact button is the way your customers can request a video call or a simple chat session. It is also a presence indicator showing if you are online. You can check the detailed instructions on how to set a button in your site here.

Visitor Link

Another way to contact someone is to send him a visitor link. It can be generated from the Organizer page and can contain different information.

Video/Audio Calls

LiveSmart Video chat provides two modes for the video chat session. The default is “conference” mode, and is enabled in the config/config.json file with videoScreen.videoContainerStyle: "conference". Meeting style is organized like a Zoom session.

Conference mode

After an attendee joins to the room, he will directly start a video/audio call. He can beforehand turn off camera or microphone.

When the call is established the initiator can mute/unmute audio, start/stop camera and start a screenshare session. If recording is enabled, he can record the meeting.

You can enable pre-call form, so your visitor can adjust their video/audio devices, you can set videoScreen.greenRoom to true.

Chat options. In the chat pane, the user is informed about joining/leaving attendees, incoming file transfers and other system messages.

Simple mode

The simple mode is enabled in the config/config.json file with videoScreen.videoContainerStyle: "simple". This is the classic LiveSmart meeting style, where
the attendees are in the chat pane and to start video or audio only call need to click the relevant button. Please have in mind this mode is deprecated and is not supported.
The other party will see incoming call notification:

Or if you have enabled the chat view so it is always visible in video, whitboard and broadcasting:

and too can accept the call with video or audio only. When the call is established an user can mute/unmute audio, start/stop camera and start a screenshare session. If recording is enabled, he can record the meeting.

Screen Sharing

You are able to share the whole screen, separate application or a browser tab if your browser is Chrome 72+, Firefox 52+ or MS Edge 17+. Older Chrome browsers are prompted to use a plugin. Screensharing session can start from the chat or in-call screen:

Whiteboard

Whiteboard feature allows you to show your visitors some drawings, diagrams, images and PDF files. It needs to be enabled from the config file. Also anonymous mode is allowed where visitors can take part.
It can be started from chat screen by clicking on the Whiteboard icon. You can do this while in call.

Allowed whiteboard actions:

Recording

You can record your video or audio only call. It should be enabled from the config file. There are several options:
– download – when the recording finishes, the recorded file is directly downloaded. Otherwise a link to the file is prompted;
– saveServer – if is set to true, the files are saved in a folder in the backend (/server/recordings);
– autoStart – if is set to true, the recording is automatically started when the call is established;

There is a recording indicator in the attendee side:

Admission room

If this option is enabled from the Configuration, upon entering a meeting the visitor needs to be admit by the host.

Broadcast

There is one or more broadcaster and many viewers. This is a perfect tool for online lecturers and enterprises.

From admin dashboard you can generate links for the broadcaster – it will open in new tab and the viewer link will be stored in the clipboard.
There can be more than one broadcaster – just use the broadcast URL from another device.
If you save a short URL, the broadcaster link is automatically saved too, with “b” letter added at the end. If you have saved organizer URL as agenturl, the broadcaster URL will be agenturlb.
Check here with demo/demo how you can generate broadcasting URL.

Speech-to-text, Text-to-speech and Translate

LSV offers the possibility to transcribe voice to text, or the speech recognition module. It can be enabled from Configuration section of your Dashboard. The default language of the speech recognition is English. All the list of available languages can be seen here.
In addition to the speech recognition, there is a possibility to translate the transcribed text. You need to have a Google API key. In this tutorial is described how to get it.
After you get the key, it needs to be set in transcribe.apiKey: API_KEY. The organizer language should be set in transcribe.language and the visitor in transcribe.languageTo. The last parameter transcribe.direction can have three values – both, agent or visitor. When used both, the translation goes in the two directions – from agent (organizer) to visitor and vice versa. When set to agent, the organizer 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 organizer screen.

While typing a chat message your attendee will receive voice. This functionality can be combined with the translation module. For example, you speak in Spanish, your attendee will receive subtitled message and voice in English. Text to speech, together with the speech to text and the translation modules provide the ultimate facility for multilanguage video session tool.

Entry Form

You can gather information from your visitor by enabling the entry form feature. You can enable the following options:
– enabled – true/false, default is false;
– required – true/false, if set to true all fields are 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;

Dashboard panel

The admin panel has a backend information about the organizers, users, rooms and chat history.

Check here with demo/demo. The client page for the demo organizer is here.

In the Visitor section you can track your site visitors and see who is requesting a session with you.
In the Page management you are able to generate custom room for a definite user. You can specify a time period, duration of the meeting, visitor name, host name, room ID and if the room should be password protected. The save button is saving each generated room in a DB if available.
You can have as much organizers as you wish and define their own organizer page, so they track visitors for a specific room.

With Visitor and Agent Short URLs you can set a readable URLs of your rooms. Here is described how to enable this feature. Thus your room may have the following URL format: https://domain.com/shortname,

When you enter the first time the organizer page, there will be a prompt asking you for a notification permission. Granting it will guarantee you that if someone is requesting a call and you are not on the browser tab, it will inform you.

Check here with demo/demo how organizer page and relevant client page work.

Localization

From the Dashboard panel you can assign and change as many as you need localizations. The following screenshots are depicting how you can set a Spanish locale for your LiveSmart video sessions.

Go to Locales section and in the field type the name of the locale. It can be any string helping your to identify it later – es_ES, Spanish, SP. Choose the Spanish locale from the list and fill in relevant values.

Now you need to assign a new configuration with the new locale. Go to Configuration section and add a new configuration with some name to help you identify this is for the new locale. Of course you can assign the new locale to any existing configuration.

Then from the Room management you can edit, add new or start directly a new room by assigning the configuration with the Spanish locale to it.

Pro-active chat engagement

From the admin dashboard an organizer can engage visitors of the site, by starting a direct chat with them.

Here is a demo of this feature.

WordPress Plugin

You can download WordPress plugin to assist you adding the contact button to your site and preview the visitors, rooms, users and organizers.

Offline Form

When you are not available LiveSmart allows your customer to reach you in two ways:
– By sending an email. You have to add data-offline_email="YOUR CONTACT EMAIL" to the code snippet of the button. When the visitor clicks on the button, a form appears and he will be able to send you his inquiry.

– By redirecting to your contact page. If you have a contact page, you can redirect your visitor to it, when he clicks on the button. Add data-offline_page="YOUR CONTACT PAGE" to the code snippet of the button.

Picture in Picture

Picture in picture (PiP) allows your attendee video to be in a floating window while you are on another tab or application. The feature is enabled from the Configuration options of the Dashboard panel.

Virtual Background

You can blur your background or add your own. In the Dashboard in Configuration section you can choose to enable Blur and/or Backgrounds. The following options will appear in your video panel:

If you have enabled Backgrounds, the system will read images in img/virtual folder. Default ones are visible here:

RESTful API

You can use the REST API of LiveSmart, where you can manage your organizers, users, rooms, recordings, logins. Here is a complete documentation guide. You can also secure the API by providing API secret and API method (SHA1, SHA256, etc.) of encryption in the server/connect.php file. If those are set, you can send the API call
with Authorization header of string, containing hash hmac value (API method, all the post fields in JSON format, API secret).
For example with SHA1, secret KEY MRgKUHckYK08A9nI and POST values for getting rooms in JSON format {“type”:”getrooms”}, Authorization header should be 468f787d427de9f2f6ee67766d263c3ed7e6994a.

Possible Usage Scenarios

1. Support, online sales, video consultations, real estate and car resellers
The communication can be over the contact button on the site or by generating visitor URL from the organizer dashboard.
This can include video, screenshare and recording enabled. Chat can be set to be visible in the right pane. If you want a feedback system, and you have PHP/MySQL updated and latest SQL dump files are executed, serverSide.feedback can be set. Chat history also can be enabled.
The responsive design allows communication between an organizer that is in the field and a customer from his desktop. The switch between front and back camera is very useful, when you want to show the visitor something specific

Configuration options:
entryForm – all fasle
recording.enabled: true
videoScreen.chat: true
serverSide.feedback: true
serverSide.chatHistory: true

2. Social media
The communication can be over contact button or with shared short URL, generated from the admin dashboard. Server side login for visitors can be enabled with PHP and MySQL.

Configuration options:
entryForm.enabled: true
entryForm.required: true
entryForm.showEmail: true
entryForm.showAvatar: true
serverSide.loginForm: true
serverSide.chatHistory: true

3. Educational, online lessons, tutorials, video streaming
Short URLs of broadcasting session can be shared or acquired from the tutor site. Video broadcasting can be behind username and password, with tokens or anonymous. Here the participants can raise hands so presenter can grant them privileges to speak. Whiteboard can be enabled here. As there are different type of streamings – video, screenshare, whiteboard, the recording can be set to record everything

Configuration options:
videoScreen.chat: true
serverSide.feedback: true
serverSide.chatHistory: true
serverSide.token: true #Only if you have enabled the token system in rooms, organizers and users.
whiteboard.enabled: true
recording.screen: true

4. Health-care consultations

Here the organizers are the health-care coordinators who can schedule meetings for the patients for a definite time period and save them. Here the scheduling can be used, so a patient can come on a definite timeframe. The communication can be done over predefined saved rooms from the admin panel. Green room and waiting room options can be set. Entry form and feedback system are also preferable.

entryForm.enabled: true
entryForm.required: true
serverSide.chatHistory: true
serverSide.agentInfo: true
serverSide.feedback: true
serverSide.roomInfo: true
videoScreen.chat: true
videoScreen.greenRoom: true
videoScreen.waitingRoom: true

[Author]

Posts