❓ Technical KB - xCams
Wondering how to configure the payment gateway on your site? Or would you like to know how to use Google Analytics to understand your web performance and user session metrics?
There’s all this and more below. Check out guides to help you set things up when/after going live and answers to those nagging (but important) questions you will ever have.
And in case, we have not covered something you're looking for, let us know and we’d be happy to add that. You know where to find us
Index
- 1 Configuring Ant Media
- 2 Utilizing Google Analytics
- 3 Generating and Adding Google reCAPTCHA Key
- 4 Adding Custom Script
- 5 Update/Change Style
- 6 Configuring Payment Gateways
- 7 Customizing Footer Menu
- 8 Setting Email
- 9 Setting SMTP
- 9.1 Sendgrid
- 9.2 Gmail
- 9.3 M3 service
- 10 Editing Email Templates
- 11 Ideal Image Sizes
- 12 Streaming FAQs
- 13 How can we change style (CSS)?
- 14 Migration
Configuring Ant Media
xCams uses Ant media to provide streaming service. Once it is setup please login to ant media panel.
Select your application under Application menu (eg LiveApp, WebRTC)
Click on Settings tab and add your server IP address under Security section.
Uncheck Accept Undefined Streams
Click Save
After this, login to xCams admin panel > Settings > System settings > Ant media and enter these fields
Viewer URL: enter ant media domain & port only eg ant.yourdomain.com or ant.yourdomain.com:5443. This option is using for HLS option. So if you can use CDN service such as Cloudflare and enter custom CDN domain here
Publisher URL: domain to receive WebRTC call request from browser. enter ant media domain & port only eg ant.yourdomain.com or ant.yourdomain.com:5443
Subscriber URL: domain to receive WebRTC call request from browser. enter ant media domain & port only eg ant.yourdomain.com or ant.yourdomain.com:5443. It is using if WebRTC option in broadcast, group or private is enabled.
Api Server: full URL and protocol to ant media server eg https://ant.yourdomain.com. Api URL is being used from API application to generate and store streaming session.
App name: Your application app (LiveApp or WebRTC App)
Option for broadcast: HLS or WebRTC
Option for group: HLS or WebRTC
Option for private: HLS or WebRTC
For livestream, we need https for both website and ant media server. Make sure both of them has SSL enabled.
WebRTC is available for ant media enterprise version only.
Use WebRTC will reduce latency / delay from publisher and viewers (from 30s with HLS to 0.5s).
For in-depth resources related to Ant Media and Streaming, please check here.
Utilizing Google Analytics
Go to Admin panel > Settings > System settings > Google Analytics and enter your GA code.
GA code usually is formatted as GA-xxxx
Generating and Adding Google reCAPTCHA Key
xCams is using Google reCAPTCHA v2, see details how to generate here.
After that go to admin panel > settings > generate and enter API key and secret for reCAPTCHA section.
Adding Custom Script
Go to Admin panel > Settings > System settings > Custom.
There are 2 section you can enter your custom script
Custom header script: website will render this content in the <head> tag
Custom body script: website will render this content before </body> tag
You can enter your GA script to one of these sections
Make sure you entered valid HTML or JavaScript. Otherwise it might break the system.
Update/Change Style
xCams does not provide option to change layout or style from the admin panel. However if you want to customize this, there are 2 solutions.
Change style from source code (recommended)
Or inspect element in xCams HTML code and get CSS class name or section then update your style to “Custom header script” section.
We use less to manage stylesheet. From source code you can -
Check
style
folder, here we define common style rules in theglobal.less
,responsive.less
,vars.less
For separate component you can check related files in the
components > component name > .less
file. Example to manage header, you can checkcomponents > common > layout > header.less
Not recommend to change style in the built .css
Configuring Payment Gateways
xCams supports the CCBill payment gateway.
Go to Admin > Settings > System settings > CCBill and enter CCBill information in the form
CCBill webhook URL: https://[xcams-v3-api-domain]/payment/ccbill/callhook (eg https://api.xcams.info/payment/ccbill/callbhook)
For Approval URL (redirect URL for success) and Decline URL (redirect URL for cancel) you can use funds-tokens page: https://[your-front-office-domain]/account/user/funds-tokens (eg https://xcams.info/account/user/funds-tokens)
Flexform Setup
Please check reference document here. And change webhook URL with information below
For each performer, you have to create one CCBill sub account separately.
Check with CCBill support team to enable your sub account before setup in admin panel
Admin panel Configurations
Login xCams admin panel
Select Settings Menu in the left
Select CCBill tab
Enter following information
Salt key
Sub account number
Flexform ID
Currency code (get list here https://kb.ccbill.com/Webhooks+User+Guide#Appendix_A:_Currency_Codes )
Go to Token packages menu and create / edit your package with price
Go to FE and test
For other gateways please contact for customization
Customizing Footer Menu
Go to Admin panel > FE Menu. Here you can see the list and create or update existing menu.
The latest version of xCams provides only option to change footer menu for now.
From system page: FE will reload custom script file if it is system URL. if enable you can select list of static pages too.
Is new tab: open link in a new tab once clicking on
Title: Menu text
Path: Link to the page (you can enter full URL here if it is not system page)
Section: Denotes where we will show the menu
Ordering: Enter sequence number of menu item in the list
Setting Email
xCams provides 2 sections in the Admin settings for email
Email tab
Admin email: Email address where notification from system and contact form messages will be delivered
Sender email: Email address from where system emails will be sent to all user types
SMTP tab
Host: enter SMTP host eg smtp.google.com
Port: SMTP port eg 465
Auth user: SMTP username
Auth password: SMTP password
Secure option: Enable if use port 465
You can use format “your name” <email-address> to admin email and sender email. Eg
Admin email:
“xCams Admin” <admin@myxcams.info>
Sender email:
“xCams Support” <noreply@myxcams.info>
xCams provides SMTP method only for email. Almost all services provide SMTP config. Please check with your service and common list in our document.
Setting SMTP
Sendgrid
Host: smtp.sendgrid.net
Port: 465 / 587
Auth user: the string
apikey
. This setting is the exact string "apikey" and not the API key itself.Auth password: your Sendgrid API key eg: SG.xxxxx
Sender email in Email tab must valid with domain you verified in Sendgrid dashboard
Have to verify sender domain in SendGrid dashboard before using https://sendgrid.com/docs/ui/account-and-settings/how-to-set-up-domain-authentication/
More details about Sendgrid SMTP, please read here
Gmail
Host: smtp.google.com
Port: 465 / 587
Auth user: your full email address eg: youremail@gmail.com
Auth password: your Gmail password
Sender email in Email tab must be same your Gmail address
Please enable less secure option here https://www.google.com/settings/u/2/security/lesssecureapps
M3 service
Host: m3 host URL, eg http://v2010004s.m3xs.net
Port: 587
Auth user: email username account or M3 FTP master account
Auth password: your email password or M3 FTP master password
Go to M3 control panel and register your email address, then fill to SMTP form
For Linode user, SMTP restrictions are in place by default for Linodes on accounts created after November 5th 2019. You'll need to configure rDNS for your instance and open a Support ticket confirming CAN-SPAM compliance, and Support should lift the restrictions pretty quickly. Check here for more details
Editing Email Templates
From v3.0.3 we can manage email template in admin panel. Login to admin panel and see Email template section, we can update template and content there.
What is email template layout? Email template layout is wrapper for the email content with header, footer, or any content you add. Email content will be replaced in the [[BODY]] tag.
Ideal Image Sizes
In xCams, the CSS will adjust your images with its responsive design. However, below are ideal sizes for different images on the site.
Logo: 150 px * 72 px
Top banner: Default is 1600px * 400 px
Left banner: Default is 525px * 680 px
Authentication (signin and signup for performer and user): 700 px * 850 px
Streaming FAQs
Frame Freezing in WebRTC Streaming
Assume server resources (CPU, RAM, Disk) are not full load. Frame Freezing problem is caused by frame Drop. The frame Drop reasons are listed below.
Server Location - It is more stable to broadcast physically near servers
Server Network Capacity - For Media Streaming, servers with high network capacity are required. If your server’s network capacity is low, you may experience frame drops. Also, Frame Drops causes Frame Freezing.
What latencies can I achieve?
Current xCams v3 uses Ant media. Ant Media Server is capable of:
0,5 seconds typical latency with WebRTC to WebRTC streaming path. (usually around 0,2 seconds) (available in Enterprise Edition)
6-10 seconds typical latency with WebRTC to HLS streaming path.
To reduce latency you have to purchase EE version, then switch option for streaming to WebRTC in admin Settings > System settings > Ant media
Pixelating of frames in WebRTC
This can cause a lot of things. If the broadcast values(Frame drop, or so on) and server values (CPU or Ram etc.) are healthy. Three things that matter here are listed below.
Adaptive Streaming Setting. Here is the default setting -
1
2
3
4
5
6
Resolution Video Bitrate (Kbps) Audio Bitrate (Kbps)
1080p 2000 256
720p 1500 128
480p 1000 75
360p 800 64
240p 500 32
These values change some different cases. Because everyone’s scenario is different, these values are not fixed.
WebRTC Framerate Setting - Framerate is also a specific parameter. The framerate default parameter is 20. But as I said above, these values change your situation.
Server Location - It is more stable to broadcast physically near servers. If broadcast quality problems occur, lower these values and select the server close to where you broadcast, which should ideally resolve the quality issues.
WebRTC stream stops after a few seconds
This issue is generally caused by unopened UDP ports. Please make sure that UDP ports 5000 to 65535 of your server are open.
In IOS, Chrome and Firefox cannot open the camera
This is an iOS bug: https://stackoverflow.com/questions/51501642/chrome-and-firefox-are-not-able-to-access-iphone-camera/53093348#53093348
How to reduce HLS latency?
The 8-10 s latency is in HLS not in WebRTC , and it's not ant-media or other RTMP HLS server fault, it's the implementation/design of HLS. (Not meaning LL HLS)
In HLS you need at least 3 ts package and it should be minimum 2 second (default 10 seconds) that's why you see the HLS stream with 6-30 seconds latency.
What is your next plan to reduce latency?
For current version, we just support Ant media. We have a plan to implement native WebRTC in group / private chat and will update once released.
How can we change style (CSS)?
We use less (https://lesscss.org/ ) to manage stylesheet. From source code you can
Check
style
folder, here we define common style rules in theglobal.less
,responsive.less
,vars.less
For separate component you can check related files in the
components > component name > .less
file. example to manage header, you can checkcomponents > common > layout > header.less
Not recommend to change style in the built .css
Migration
Since v3.0.3 we can use migrate
command
cd to
api
folderinstall node dependencies
run
yarn migrate
to see existing data.
Default admin credentials: admin@[your-domain-in-env-file]
or admin@example.com
with password adminadmin