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

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 the global.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 check components > 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
1. Salt key
2. Sub account number
3. Flexform ID
4. 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

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 -

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 the global.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 check components > common > layout > header.less