Technical Documentation

Owned by Steve Smith
Nov 08, 2022
7 min read

I. General Questions

1. How to configure ant media settings in admin panel?

xCams uses Ant media to provide streaming service. Once 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 for “Accept Undefined Streams”

  • Click Save

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

  • Option for broadcast: HLS or webRTC

  • Option for group: HLS or webRTC

  • Option for private: HLS or webRTC

Note:

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

2. How to configure email?

xCams provides 2 sections in the Admin settings for email

  • Email tab

    • Admin email: Email address for who will receive notification from system and contact form

    • Sender email: Email address for who will send the email in system

  • 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

Note:

  • 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 for email only, almost services provide SMTP config, please check with your service and common list in our document.

3. How to add Google analytics code?

Go to Admin panel > Settings > System settings > Google Analytics and enter your GA code.

Note: GA code usually is formatted with G-xxxxxxxxxx

4. How to add 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

5. How to update or change style?

xCams does not provide option to change layout or style in the admin panel. However if you want to custom there are 2 solutions

  • Change style from source code (recommend this)

  • 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 (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

6. How to setup xCams payment gateway?

xCams just supports CCBill payment gateway for now.

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

Go to Admin panel > FE Menu. Here you can see the list and create or update existing menu.

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: where we will show the menu

  • Ordering: enter sort number of menu item in the list

8. SMTP common list and setup

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

Gmail

M3 service

  • Host: m3 host url eg 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

9. How to edit email template?

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

10. What is standard image sizes?

In our application, css will adjust your images with responsive. Below are default size we are using on the xCams

  • Logo: default is 150x72 pixel

  • Top banner: Default is 1500x98 pixel

  • Left banner: Default is 525x680 pixel

  • Authentication (register, login both performer and user): Default is 700x850 pixel

11. How to generate Google recaptcha key?

xCams is using Google recaptcha V2

After that go to admin panel > settings > generate and enter API key and secret for recaptcha section.

II. Streaming Related Questions

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

2. 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 > Ant media

3. Pixelating of frames in WebRTC

This can cause a lot of things. If the broadcast values(Frame drop or etc) and server values (CPU or Ram etc.) are healthy, 3 things that matter to us can be listed below.

-Adaptive Streaming Setting. Here is default Setting in below.

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 Frame rate Setting

Frame rate is also a specific parameter. The frame rate 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, I hope your quality problem will go away.

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

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

6. 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 minumum 2 second ( default 10 seconds ) that's why you see the Hls stream with 6-30 seconds latency.

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

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

Note: Not recommend to change style in the built .css

III. Migration

We can use migrate command in xCams

  • cd to api folder

  • install 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