Infinity Connect Web App Customization Guide

Transcription

1 Infinity Connect Web App Customization Guide Contents Introduction 1 Hosting the customized Web App 2 Customizing the appication 3 More information 8 Introduction The Infinity Connect Web App is incuded with a Pexip Infinity depoyments. It is part of the Pexip Infinity Connect suite of cients that provides an easy way for participants to access Virtua Meeting Rooms and Virtua Auditoriums, and make person-to-person cas via the Pexip Distributed Gateway from a web browser or desktop cient. Infinity Connect cients aso aow users to view a ist of a other conference participants, contro aspects of the conference (if they have Host privieges) and share their screen with other participants. The Infinity Connect Web App is accessed when users point a web browser at a Conferencing Node, and provides a WebRTC or Fash-based interface to Pexip Infinity services. The Web App is supported in the foowing browsers: Googe Chrome version 27 and ater Mozia Firefox version 20 and ater Opera version 23 and ater Microsoft Internet Exporer version 10 and ater (requires Fash Payer 11 and ater ActiveX pug-in, and must not be in Compatibiity View) Appe Safari version 6 and ater (Mac OS X ony) (requires Fash Payer 11 and ater pug-in) This guide describes how to customize the Infinity Connect Web App, and expains how to make the most frequenty required branding changes. This guide assumes knowedge of core web design technoogies: HTML, JavaScript and CSS Pexip AS Version 9.a Apri 2015 Page 1 of 9

2 Hosting the customized Web App Hosting the customized Web App There are two methods for hosting the customized Infinity Connect Web App: Appy the changes to the Conferencing Nodes and serve them from the Conferencing Nodes. This method is easier for sma depoyments, but any changes must be backed up before upgrading to a ater reease of Pexip Infinity otherwise the upgrade wi overwrite the customizations. Copy the Web App to an externa web server or reverse proxy (e.g. the Pexip Reverse Proxy) and serve it from this server. This method is more appropriate for production depoyments, but the copy of the Web App on the externa web server or reverse proxy must be upgraded manuay when the Pexip Infinity instaation is upgraded. The Infinity Connect Web App is stored in /opt/pexip/share/web/static/app on the Pexip Conferencing Nodes. If you are hosting the Web App on an externa web server or reverse proxy, this whoe directory tree shoud be copied over to the other server. The configuration subdirectory contains the fies that can be customized. The contents of this directory are described in Customizing the appication beow. We recommend that any additiona custom images are aso stored in the configuration directory (or appropriate subdirectory). When hosting the Web App on an externa web server, edit the configuration/settings.js fie and change the serveraddress variabe to point to a Conferencing Node e.g. serveraddress: "conferencingnode1.exampe.com", (by defaut this variabe points to the domain serving the site). You can ony specify one Conferencing Node. This modification is not required if you are hosting the Web App on a reverse proxy as it wi typicay aready be configured to forward requests to your Conferencing Nodes. The defaut settings for the appearance of the Web App are hard-coded within the appication itsef, and are used automaticay where no customization overrides have been specified. Note that fies can be copied to or from the Conferencing Nodes using the SCP protoco, for exampe with a too such as WinSCP. Maintaining customizations when upgrading Pexip Infinity When upgrading to a new version of Pexip Infinity, the customized configuration directory can be migrated to the new version. Customizations hosted on a Conferencing Node If your customizations have been appied to a Conferencing Node: 1. Before you upgrade Pexip Infinity, backup the configuration directory containing your current customizations. 2. After the upgrade, repace the contents of the configuration directory with your previousy customized contents. 3. Check if you need to add any more customizations to support any new features (see Checking for new features beow). Customizations hosted on an externa web server or reverse proxy If your customizations have been appied to an externa web server or reverse proxy: 1. Backup the configuration directory on the externa web server or reverse proxy containing your current customizations. 2. Upgrade your Pexip Infinity Conferencing Node. 3. Copy the upgraded /opt/pexip/share/web/static/app directory tree from the Conferencing Node to the externa web server or reverse proxy. 4. Repace the contents of the configuration directory with your previousy customized contents. 5. Check if you need to add any more customizations to support any new features (see Checking for new features beow). Checking for new features When new versions of Pexip Infinity add more features to the Web App, any customizabe text and coors wi be added to the defaut versions of the fies in the configuration directory that are shipped with the new version. Therefore, we recommend that after an upgrade you compare your customized versions of these fies with the new defaut versions, to see if any text, styes, coors or resource fies shoud be adjusted Pexip AS Version 9.a Apri 2015 Page 2 of 9

3 Customizing the appication Customizing the appication The Infinity Connect Web App fies that can be customized are stored in the /opt/pexip/share/web/static/app/configuration directory. When editing the fies, you must use a text editor that does not appy "smart quotes" or make any automatic text changes, as the fies are sensitive to correct formatting. Use a code editor or simpe fie editor instead of word processing software. The fies that can be customized are summarized beow, and are then expained in more detai in the subsequent sections: The settings.js fie contains the appication and defaut user settings. The favicon.png fie contains the icon used to represent the appication within the browser's address bar and bookmarks etc. The anguages subfoder contains the text strings for each anguage. By defaut, Engish is the ony avaiabe anguage and the text strings are contained in the en-us.json fie. You can add more anguages if required. The themes/defaut subfoder contains the fies used to contro the coors, styes and images used within the appication. The foder contains: o o o o brand.css: the appication's styesheet. background.jpg: referenced from brand.css and contains the home page background image. conference-avatar.jpg: referenced from settings.js (athough commented out by defaut), this is the image used to represent the conference at the top of the roster. By defaut, the avatar shown is served from the Conferencing Node and is part of the conference theme. If enabed in settings.js, this wi override what is shown. Note that participant avatars cannot be branded via the Web App, but they can be controed by using externa poicy (see More information). ogo.png: referenced from brand.css and contains the image shown on the home page. Note that if you change the fie type of any of the image fies, for exampe, you use a conference-avatar.png fie instead of a conference-avatar.jpg fie, you must change the reference to that fiename in the appropriate settings.js or brand.css fie. Appication and defaut user settings (settings.js) The settings.js fie contains the appication and defaut user settings. The foowing items can be configured: Item serveraddress: Description You shoud ony change this setting if you are hosting the Web App on an externa web server (rather than on a Conferencing Node or reverse proxy). It points to the IP address or hostname of your Conferencing Node, for exampe, serveraddress: "conferencingnode1.exampe.com",. You can ony specify one Conferencing Node. defautdiaoutprotoco: The defaut protoco presented to users when adding a participant to the conference. The defaut setting is 'sip'. The aternative options are 'h323', 'mssip' and 'rtmp'. anguages: Contros the set of anguages avaiabe to the user. When additiona anguages have been configured, Web App users get an additiona option on the Settings page that aows them to choose their preferred anguage. For more information, see Adding more anguages Pexip AS Version 9.a Apri 2015 Page 3 of 9

4 Customizing the appication Item bandwidths: Description Contros the set of bandwidth options avaiabe to the user. For more information, see Changing bandwidth settings. overrideconferenceavatar: Contros whether the image fie in themes/defaut/conference-avatar.jpg is used to represent the conference at the top of the roster. By defaut this ine is commented out, and thus the defaut conference avatar (based on the conference theme) is aways used. To use the customized conference-avatar.jpg fie, remove the '//' comment markers. defautusersettings This bock contains the defaut user settings that are appied to first-time users. The Web App subsequenty remembers the user's ast-used settings. The configurabe options are: anguage: points to the defaut anguage fie. Defaut: 'configuration/anguages/en-us.json' defautbandwidth: the defaut bandwidth used for video and audio. The vaue specified here must match one of the vaues configured in the bandwidths bock above it. Defaut: promptdisconnect: contros whether to ask the user for confirmation before disconnecting from a conference. The vaid vaues are true and fase. Defaut: true fumotionpresentationbydefaut: contros whether the user views presentations as fu motion video or as sti images by defaut, when a presentation is started by another participant. Users can switch between both viewing modes once a presentation has started. The vaid vaues are true (fu motion) and fase (sti images). Defaut: fase Appication icon (favicon.png) The favicon.png fie contains the icon used to represent the appication within the browser's address bar and bookmarks etc. The defaut icon is. To change the icon, you shoud repace the existing favicon.png fie with a new.png fie of the same name. The new image fie shoud be 16x16 pixes. Text used in abes and messages (en-us.json) A of the text that is dispayed in the Infinity Connect Web App can be changed. The fies containing the text strings for each anguage are ocated in the anguages subfoder. You can add additiona anguage fies if required. Text customizations are simpy a matter of changing the text assigned with a token. To find the token to change, just search in the en-us.json fie for the text that needs to be changed, edit the text, and save your changes back to the same fie. For exampe, the "Connect" button abe on the home page can be found approximatey haf-way into the en-us.json fie and is associated with the "IDS_ESCALATE_BUTTON_START" token: "IDS_ESCALATE_BUTTON_START": "Connect", The strings are grouped together according to where or when they are dispayed. For exampe, a tokens prefixed with "IDS_ SETTINGS" refer to strings that appear on the Settings page. We recommend that you search for strings that contain references to "Pexip" and repace them with your reevant aternative text where required. You must ony change the text strings; do not change the tokens Pexip AS Version 9.a Apri 2015 Page 4 of 9

5 Customizing the appication Note that there are some strings that are not used in the current version of the Web App, such as those tokens prefixed with "IDS_ SETTINGS_REGISTRATION"; these are ikey to be used in a future reease. Variabe substitutions Some strings contain variabe substitutions, for exampe: "IDS_PARTICIPANT_MUTE": "Mute {{dispayname}}", This message appears as a tootip when a user hovers over the Mute button for a roster participant. In this case, the Web App automaticay substitutes {{dispayname}} with the participant's actua name as shown in the roster. Do not change the format or content of these variabes (athough you can competey remove the variabe from the string if required). You cannot create your own variabes. Error messages There is a ist of error message strings at the end of the en-us.json fie. These messages typicay reate to connectivity issues between the Conferencing Node and the Web App, or to conference vaidation errors. They foow the same format as the other messages, except that the token name is aso a readabe text string, for exampe: "Ca Faied: Invaid roe": "Invaid pin", These items are used to substitute the text strings returned from the Conferencing Node, such as "Ca Faied: Invaid roe", with the text to be dispayed to the Web App user, such as "Invaid pin". You can change these messages in the same way as you can change the other messages edit the dispay text part ony; do not change the token name part. Adding more anguages By defaut, Engish is the ony avaiabe anguage. To add a new anguage: 1. Create an additiona <anguage>.json fie in the anguages foder: a. Copy the existing en-us.json fie as a basis for the new anguage. b. Rename the new fie as appropriate for your new anguage, for exampe spanish.json. c. Edit the text strings as appropriate for the new anguage, eaving the token names unchanged. 2. Add a reference to the new <anguage>.json fie in the settings.js fie: Insert a new ine into the anguages: { } bock that contains the description to be presented to the user and the path to the new fie, foowing the mode of the existing entry for en-us.json, for exampe: 'Spanish (ES)': 'configuration/anguages/spanish.json', When additiona anguages have been configured, Web App users get an additiona option on the Settings page that aows them to choose their preferred anguage. Changing the defaut anguage When additiona anguages have been configured, you can set one of those new anguages to be the defaut anguage for first-time users. To set the defaut anguage for first-time users: 1. Edit the settings.js fie. 2. Locate the anguage: 'configuration/anguages/en-us.json', item in the var defautusersettings = { } bock. 3. Change the name of the anguage fie from en-us.json to your new defaut anguage fie, for exampe spanish.json Pexip AS Version 9.a Apri 2015 Page 5 of 9

6 Customizing the appication Changing bandwidth settings You can add, remove or modify the bandwidth options presented to the user. By defaut, 4 bandwidth options are provided. These are defined in the settings.js fie: bandwidths: [{ name: 'IDS_BANDWIDTH_LOW', vaue: name: 'IDS_BANDWIDTH_MEDIUM', vaue: name: 'IDS_BANDWIDTH_HIGH', vaue: name: 'IDS_BANDWIDTH_MAXIMUM', vaue: }], Each bandwidth option is defined as name-vaue pairs: Each name item must have a corresponding entry in the en-us.json fie (and any other <anguage>.json fies you create). The vaue item defines the tota bandwidth (for video and audio) in kbps that the Web App wi use for that seection. The Web App aways uses 64 kbps for audio, so the amount aocated for video is the tota (n + n) vaue ess 64 kbps. So, for exampe, if IDS_BANDWIDTH_LOW is seected, the Web App wi use 192 kbps for video and 64 kbps for audio. The n + n stye is used to make it easier to see how much bandwidth is used for video, but you coud, for exampe, specify the ow bandwidth vaue as just vaue: 256 which woud resut in the same aocations for video and audio. Adding a new bandwidth option To add new bandwidth options you must add new items to the settings.js fie and to the en-us.json fie (and any other <anguage>.json fies you have created). To add a new bandwidth option: 1. Edit the settings.js fie. 2. Add a new item into the bandwidth: { } bock. Pace it in the position, reative to the other entries, in which you want it to appear in the bandwidth seection dropdown as seen by the user. For exampe, to add a "Medium high" option that uses 900 kbps for video, that shoud appear between the existing "Medium" and "High" options, you woud insert an entry as foows: name: 'IDS_BANDWIDTH_MEDIUM', vaue: name: 'IDS_BANDWIDTH_MED_HIGH', vaue: name: 'IDS_BANDWIDTH_HIGH', vaue: Edit the en-us.json fie. 4. Add a new IDS_BANDWIDTH_<xxxx> token entry using exacty the same format as the existing tokens. The token name must match the name: item you created in the settings.js fie. For exampe, the matching token for the new "Medium high" option woud be: "IDS_BANDWIDTH_MED_HIGH": "Medium-High Bandwidth ({{bandwidth}}kbps)", 2015 Pexip AS Version 9.a Apri 2015 Page 6 of 9

7 Customizing the appication (The Web App automaticay substitutes {{bandwidth}} with the corresponding vaue: entry (after performing any necessary arithmetic) in the settings.js fie. Hence the end user woud see "Medium-High Bandwidth (964kbps)".) The new token can be paced anywhere in the en-us.json fie, but we recommend adding it to the end of the fie to make it easier to compare and identify any changes that have been added to the defaut version of the en-us.json fie in any future reeases. 5. If you have created additiona <anguage>.json fies, add a new IDS_BANDWIDTH_<xxxx> token entry into each of those fies. (Use the same token entry in each fie, and do not transate the {{bandwidth}} variabe.) Appication styes, coors and images The themes/defaut subfoder contains the fies used to contro the coors, styes and images used within the appication. Changing the appication styes and coors (brand.css) The themes/defaut/brand.css fie is the appication's styesheet. It contains the foowing styes: Stye name brand-ogo brand-background brand-primary brand-secondary brand-tertiary input input.ng-dirty.ng-invaid seect seect.ng-dirty.ng-invaid button back The stye configures... The reference to the ogo.png fie shown on the home page. How the home page background image (background.jpg) fie is dispayed. The coors of the text and background of the tites and menus shown in the roster and the chat window. The coors of the text and background used for: the home page the "Settings" button on the home page the Settings page a other diaogs such as when entering a PIN, disconnecting, adding a new participant or seecting the type of content to present participant names in the chat window the background coor of the roster and chat window The coors of the text and background used for participants in the roster and for chat message content. The coors of the text and background used in input fieds. Error messages shown in input fieds. The coors of the text and background used in dropdown seection fieds. Currenty unused. The coors of the text and background used in diaog buttons and the toobar contros. (An exception is the "Settings" button on the home page which uses the brand-secondary styes; this enabes you to deemphasize this button in reation to the "Connect" button.) Currenty unused Pexip AS Version 9.a Apri 2015 Page 7 of 9

8 More information Stye name red The stye configures... The coors of the text and background used in error messages, such as "Invaid conference" or "Invaid pin". The background coor for the: disconnect toobar button waiting room (pause sign), mute and conference ock badges green bue gray The background coor for the "Connect" icon and for the participant connecting badge (phone ringing icon). The background coor for the: "Start my CAMERA and MICROPHONE now" messages and banners participant presenting badge unread chat messages (on the show side bar toobar when the side bar minimized) side numbers in the thumbnais in the add sides diaog Currenty unused. Home page background image (background.jpg) The themes/defaut/background.jpg fie is referenced from brand.css and contains the home page background image. By defaut, the background image covers the whoe browser window and scaes if the browser window resizes. This behavior can be customized in the brand.css fie. The defaut background image is a burred beige effect. To change the background image, repace the existing background.jpg fie with a new fie of the same name. We recommend using a.jpg image (for smaest fie size) that is approximatey 2000x1400 pixes. Conference avatar (conference-avatar.jpg) The themes/defaut/conference-avatar.jpg fie is referenced from settings.js and is used to represent the conference at the top of the roster. By defaut, the reference to conference-avatar.jpg in settings.js is commented out. This means that the defaut conference avatar which is the presence_avatar_image.jpg fie in the conference theme is aways used. (If the defaut conference themes are in use, then the avatar image wi be the white on orange "pexip" ogo.) To change the conference avatar: 1. Repace the existing conference-avatar.jpg fie with a new.jpg fie of the same name. The image is automaticay scaed to 40x40 pixes and rounded by the Web App. 2. Remove the '//' comment markers from the overrideconferenceavatar entry in the settings.js fie. Home page ogo (ogo.png) The ogo.png fie is referenced from brand.css and contains the image shown on the home page. The defaut ogo is the orange text "pexip" ogo. To change the ogo, you shoud repace the existing ogo.png fie with a new.png fie of the same name. The ogo image is used "as is", so we recommend using a.png image (for best quaity) and that the ogo is approximatey 200x100 pixes and has a transparent background. More information Participant avatars cannot be branded via the Web App, but they can be controed by using externa poicy. For fu detais about how to integrate Pexip Infinity with an externa poicy server, see Pexip Infinity Externa Poicy Depoyment Guide Pexip AS Version 9.a Apri 2015 Page 8 of 9

9 More information In addition to customizing the appearance of the Infinity Connect Web App, you can aso use themes to change the voice prompts and images provided to participants when they are accessing a Virtua Meeting Room, Virtua Auditorium or Virtua Reception. For more information, see the Pexip Infinity Administrator Guide. If any further information on customizing Pexip Infinity is required, pease contact support@pexip.com Pexip AS Version 9.a Apri 2015 Page 9 of 9