AVChat Software Product Blog

With the new Social Engine 4 demand that keeps on growing, recently I decided to write on my blog an article about how to build a premium social community with SE4 and the AVChat Products integrated with SE4: (AVChat 3, HDFVR and Zuzubooth)

If you are interested in, just follow this link and read the full article:

http://mihaifrentiu.com/how-to-build-a-premium-social-community-with-social-engine-4-avchat-3-hdfvr-and-zuzubooth

You want to find out what version of Red5 is running on your server?

There are a few ways:

1) Look at the Red5 welcome page on port 5080.

To see the welcome page just go to http://yourred5server.com:5080 in your web browser. It’s not the most accurate but it’s the fastest and you don’t need access to the Red5 installation. Here are the welcome screens for different versions.

Red5 0.8 welcome page:

Red5 0.9.1 welcome page:

Red5 1.0 RC1 welcome page:

2) Look in docs/changelog.txt

Look in the Red5 installation folder/docs/changelog.txt . You will immediately see the Red5 version there:

3) Pay attention to the Red5 startup log

During startup, Red5 will show the Red5 version, here is where to look when starting Red5 standalone on Windows:

4) Look in log/red5_service.log

When starting Red5 as a service on Windows it will create a new log file: Red5 installation folder/log/red5_service.log . In it you will find the Red5 startup log mentioned above and thus the Red5 version.

You know any other way? Post the method in the comments section below.

In the last few years, I’ve worked a lot setting up video chat web sites and installing and integrating AVChat with them. I have gathered a lot of experience and I’ve decided to make a tutorial on how to build a simple paid membership web site with 3 user levels: guests, free registered users and premium users.  Users at each level will have access to different video chat features and they will also have to pay a monthly fee to become premium users. We will call this web site http://myvideochat.com .

For this tutorial I will use Drupal 6 as it is free and it has the best user management system for this kind of web site!

Step 1: What you need:

• Drupal is a free, open-source content management platform with a very good user management system which fits my needs for setting up different video chat features and user levels for a video chat website. You can download Drupal from here: http://drupal.org/download .
• AVChat 3 + AVChat 3 Drupal module: AVChat 3 is our flagship video chat software, it supports rooms, emoticons, admins, YouTube videos, and much more. Its price starts at $130/one time fee. AVChat 3 Drupal Module is the bridge between AVChat 3 and Drupal. It will help us set up different chat permissions and features for each user level in Drupal. It costs $49 and you can buy both from here: http://avchat.net/integrations/drupal.
• You also need the free Token Module . You need to download it from here: http://drupal.org/project/token and install it, it is required by the MoneyScripts Membership Suite mentioned below.
• Finally you need the MoneyScripts Membership Suite – this will help us charge users to upgrade their membership. It costs $64,95 and you can buy it from here http://www.moneyscripts.net/drupal-membership-suite#tabs-documentation

Total cost:

• AVChat 3 – $130
• AVChat 3 Drupal Module – $49
• MoneyScripts Membership Suite – $64,95
• TOTAL = $243,95

Step 2: How to install everything:

This tutorial will not cover installing the specific components as the installation for each of them is covered in detail in the below articles!

• Installation Guide for Drupal: http://drupal.org/documentation/install
• Installation Guide for the Token Module: Download the module from the link specified above, unpack the archive,  upload the token directory to your_website_root/sites/all/modules/ and then follow Step 4.1
• Installation Guide for AVChat 3(Only Step 1 from the installation instructions is necessary here): http://avchat.net/support/documentation/avchat3-installation
• Installation Guide for AVChat 3 Drupal Module: http://avchat.net/support/documentation/avchat3-installation#drupal
• Installation Guide for MoneyScripts Membership Suite: http://www.moneyscripts.net/drupal-membership-suite

Go ahead and install all of the above and then move to Step 3.

Step 3: Now we will set up the 3 user levels

In Drupal user levels are called roles (user roles). A role is a group to which a user can belong. In my website I will be using 3 different user roles:

• anonymous user – default in Drupal, it contains non authenticated visitors
• authenticated user – default in Drupal, it contains authenticated/signed-in users
• premium user – I will create this one, it will contain authenticated/signed-in users that have paid to have access to better video chat features

3.1 Create the new Premium User role

To create a new user role go to Administer >> User management >> Roles and at the bottom of the user roles table you will find the add role input text field (See the screenshot below).

Create the new role named Premium User .

Note: Please ignore the edit permissions link. We will setup permissions for all the user roles later.

Step 4: Setting up the MoneyScripts Membership Suite so that we can charge money from users

To do all the steps described below, you need to be logged in with your administrator account into your Drupal installation.

4.1  We need to enable the Token module

It is required by the MoneyScripts Membership Suite. So after installing it, enable it from Administer >> Site building >> Modules (see the screenshot below).

4.2   Next, we need to enable the MoneyScripts Membership Suite modules.

There are a few of them, I will make a small brief for each one:

• MS Core – Is the main module. If is not enabled by default, you must enable it. All other MoneyScripts Modules depend on it.
• Membership Suite – The most important, allows you to sell memberships to your members.
• MS Coupons – Will help you generate discount coupons.
• MS Reports – Will let you see reports and charts.
• MS Role Discounts – Will add the possibility to offer discounts to user roles.
• MS Taxes – Will add taxes to orders.

From all of the above, for my specific web site I only need Membership Suite enabled, the rest are optional.

Go to Administer >> Site building >> Modules and enable Membership Suite (See the screenshot below).

4.3 Specify the payment options

Ok, now the user has to be able to pay somehow. MoneyScripts Membership Suite allows us to charge users trough a variety of options:

• Authorize.net
• Checks and Bank Transfers
• ClickBank Integration
• First Atlantic Commerce
• Innovative Gateway
• PayPal Web Payments Standard and Pro

For my website I decided to use PayPal because it’s the easiest way and most convenient!

To enable PayPal go to Administer >> Site building >> Modules (See the screenshot below) and enable the PayPal option (Standard or Pro).

…then go to Administer >> MoneyScripts >> Gateways >> PayPal WPS (See the screenshot below)…

and in the form that shows up you insert the email used for your PayPal account (the module will take care of the rest), submit the form and you’re done!

4.4 Set up MoneyScripts Membership Suite

Before you create a membership plan, some additional settings are required.

To access the Membership Suite settings page go to Administer >> MoneyScripts  >> Membership Suite Settings where you will find a form that requires two keys (One Public Key and one Private Key). At this moment your MoneyScripts Membership Suite is not licensed.

To get those keys, you need to login into your account at http://www.moneyscripts.net/and then go to My Account >> My Software. There you will find the keys. Just copy and paste them into the form described above, then press Save Configuration.

If the keys are correct, then the MoneyScripts Membership Suite Settings form will appear (See the screenshot below).

Below you will find a list with the most important settings:

• Enforce Paid Membership at Registration? – leave it unchecked because this will force new users to directly create a paid account.
• Free Option Name: * – You can put the Regular, if is not by default
• Skip Registration? – I suggest you leave this unchecked because it will change the registration page and might create some confusion.
• Show Membership Plan Price? – Yes, you need this checked because users have to know how much they pay for it.
• Membership Plans Fieldset Weight on the Registration Page – Leave the default value, -1
• Enforce Single Membership Plan – Yes. A user can have only one Membership Plan at a time.
• Show Current Memberships in User Account? – Yes. Show your users their current Membership Plan.
• Show Cancel Membership Links in User Account? – If you want to allow your users to cancel their membership at any time, you should check this.
• Show Purchase Membership Links in User Account? – Yes, give them the possibility to upgrade their accounts easy.

After you made these settings, press the save button and continue with the next step.

4.5 Create a membership plan.

You need a membership plan so that non-paying users  have the possibility to upgrade their accounts and access better video chat features.

Go to Administer >> Site building >> Membership Plans >> Add Membership Plan.

A form shows up with several sections. You need to fill out this form.

I will describe below the most important settings you need to fill out in each section.

4.5.1 At the Membership Plan Info Section, the most important settings to fill out are:

• Name: name it however you want. I named it  Premium Membership
• Main Amount: Is the fee users have to pay to get their accounts upgraded (later I will decide the frequence of the payment).
• Show on New User Registration Screen?: You should check this setting in case you want your users to sign-up directly as a Premium User. I want users to be able to sign up directly as a Premium User so I checked this option.
• Show in the User Account?: It is very important to check this, because it will place the Upgrade Option in the user profile, so that users easily upgrade their accounts.

4.5.2 At the Role Settings Section, I will check the checkbox besides the User Role created above at step 4.1 ( Premium User) for both Role(s) to Grant at Start and Role(s) to Remove at Expiration. This means that a user, after paying, will automatically be assigned to the Premium User role in Drupal. (See the screenshot below)

4.5.3 At Period Settings, specify the Membership Length you have the possibility to specify the length in Days, Weeks, Months and Years. (See the screenshots above)

In my example I set up a monthly membership plan, this means that a user will have to pay for every month of membership.

4.5.4 At Email Settings Section you can setup the email content that is sent to users upon upgrade, expiration, cancellation, etc. (See the screenshot below)

This is how wil all work together: At the beginning a user is assigned to the Authenticated User role  in Drupal. If he decides to upgrade, he will follow the upgrade link in his profile page and purchase the Membership for 1 Month. When the payment is validated, he will automatically be assigned to the Premium User Role and will have access to Premium Content on your website. When the Membership will expire (after 1 month), two options will be available:

1. continue the membership (this involves purchasing for one more month) or
2. not continue,  in this case, he will be automatically be downgraded to the authenticated user role and will no longer have access to unlimited features in the video chat.

Cool, now I have both 3 levels of membership and the MoneyScripts Membership Suite activated and working. I will now give different features to different user levels!

4.6 Setup user role permissions for the MoneyScripts Membership Suite

The last step to make for a complete MoneyScripts Membership Suite setup is to setup permissions for the available user roles.

To setup permissions for the MoneyScripts Membership Suite you have to go to Administer >> User Management >> Permission and in the list that appears look for the ms_core module and ms_membership module sections. Setup the permissions the way you need them and then click the save button.

The setup I made is this:

• all user roles have access to the checkout page and moneyscripts cart
• none of those the user roles can administer moneyscripts orders and settings and also cannot view reports
• authenticated users and premium users can edit own payment info and view their own orders
• none of the user roles can administer membership plans, administer ms memberships, modify own membership
• all the three can purchase membership
• authenticated and premium roles can renew own membership

For a better view, please check the screenshot below.

Part 5: Configuring different video chat features for the 3 user roles!

I want each of the 3 user roles to have access to different or limited video chat features. This kind of set up will encourage anonymous users (guests) and authenticated users to become paying premium users.

First I need to setup the AVChat access permissions for the 3 user roles and then the particular settings.

5.1 Configure the AVChat 3 features for each user role

Go to Administer >> User Management >> Permissions and you will find the AVChat 3 features/roles table shown below:

There are 3 colums in there, one for anonymous users (guests), one for authenticated users(registered non paying members) and one for premium users!

So I set it up so that:

• guests will have access to the chat but they will not be able to create rooms, send private messages, make their stream private, send files to users and rooms, highlight urls and emails in the text chat area.
• Authenticated users, will be allowed to send files to the chat room.
• Premium users can do everything.

For the exact permissions setup, please see the screenshot above.

Next, we will setup the settings that will truly make the difference between the user roles.

5.2 Configure AVChat 3 Settings

In addtition to  the permissions that I set up at point 5.1 I will also set the most important settings of AVChat.

To do that go to Administer >> Site Configuration >> AVChat 3.0 Drupal 6.x Module Settings.

• Free Video Time – Is the amount of time a user can watch other streams each day. I set it up so that Guests have 15 min/each day, Authenticated Users 1 hour and Premium Users, unlimited.
• Streams limit – Is the maximum simultaneous streams a user can watch at any time. I set it up so that Guests can see 1 stream at a time , Authenticated Users 2 and Premium Users 99.
• Max rooms a user can be in at any time. Is the maximum rooms a user can be at any time. I set it up so that Guests can be in 1 room at a time , Authenticated Users in 2 and Premium Users 99.
• Char limit – Is the maximum number of characters a user can type into a single message, but this will not make any difference in users perception.

See the screenshot below to understand what I described above.

(In the screenshot you will see value -1. This means that the Premium User role has unlimited free video time).

We need to do one final thing: open the video chat in a pop up so that users can still browse the web site without exiting the video chat.

You will find the option to open AVChat 3 in a popup or embedded in website.

Basically these are the main steps required to build a Video Chat website with Drupal, AVChat 3 and MoneyScripts Membership Suite. I hope you will find this article easy to understand and follow.

If you have any questions or there is something I missed, please feel free to drop me an email to mihai@avchathq.com. We appreciate your feedback.

We’ve made a little test today with the latest version of AVChat (1059) which has some optimized media server file for Red5.

1) We’ve installed Red5 0.8 on an old Toshiba M70 laptop with these specs:

• Pentium M 1.7Ghz (FSB:400Mhz with 2Mb of 2nd level cache)
• 1G DDR2 RAM
• 60GB HDD @ 5400rpm
• 100Mbps Intel network card
• Ubuntu 10.04 LTS

which is connected to our LAN via wire.

2) Once Red5 was up and running on the laptop, we used an internal flash app named “AVChat Virtual User” to create load on the Red5 server! This app creates a lot of virtual users, once each user is created it connects to the avchat30 app on the media server. Once connected  it starts  generating the  kind of  load that a normal user would generate: sending text messages, changing status (idle, online), etc… . These virtual users are not able to stream/view video that’s why this quick test today covers AVChat 3 in text chat only mode.

We will release this app when we polsih it so that anyone can test their own servers!

3) With AVChat Virtual User we’ve gradually connected 550 users (100 -> 450 – >550) and observed the load on Red5.

To monitor Red5 we’ve used several tools:

• Java VisualVM: http://download.oracle.com/javase/6/docs/technotes/guides/visualvm/index.html
• top command on the laptop running Ubuntu/Red5 : http://manpages.ubuntu.com/manpages/lucid/man1/top.1.html
• Ubuntu System Monitor

4) The results: CPU usage

5) The results: Memory consumption

6) Conclusion:

• a user connecting generates more CPU usage than a user that is already connected
• Red5/AVChat 3 uses about 6-7Mb of RAM for each 100 users (in addition to the memory used by Red5 by default)
• the cheapest VPS servers (256Mb of RAM) can hold a few hundred users online!
• this server would hold 1000 users (in text chat mode) before reaching 80-90% CPU usage!
• in a real world scenario you would not have the peak CPU usage caused by connecting 100 very ast ( AVChat Virtual User app connecs 1 user every second )

This is by no means an attempt  to squeeze as much performance as we can out of this server! There are many ways one cand do that first being the choice of OS.

Note: this is not a clear reflection of real world usage as video creates a lot of load on the media server! The video usage on the server creates a lot more load than the number of users online!

Later edit: for tips on how to improov the performance of AVChat on Red5 see this thread on our forum.

There are two ways to open the AVChat Video Chat Component in a pop up in Joomla!:

1. Using Joomla!’s default method:
   • Log in the administrator area of Joomla!.
   • In the Menus area edit the link to AVChat 3.
   • Set the On Click, Open in option to  New Window without Browser Navigation (screenshot below)
   • Click Save.

   

   That’s it! Clicking the link in the menu will now open the video chat in a pop up. Using this method however you will not have control over the pop up dimensions

2. A way that allows you to control the size of the pop up:
   • For this you’ll need to login to your website with an FTP client (FileZilla is our favourite) and go to /components/com_avchat3/
   • Open avchat3.php for editing.
   • Replace the object & embed html tags (everything from <object… to </object>) with this html code:
     <a href="javascript:void(0);" onclick="window.open('/components/com_avchat3/index.swf', 'AVChat', 'menubar=0, resizable =0, width=900, height=650');">Launch AVChat Video Chat</a>

   • Save the file and make sure you upload it back to the web server.

   You can change the size of the pop up by editing the width and height properties in the code above.

When AVChat 3 is opened in a pop up window you can use the [Leave Chat] button to close the pop up window:

1. edit avc_settings.php or avc_settings.asp
2. set $avconfig['disconnectButtonEnabled']=1;
3. set $avconfig['disconnectButtonLink'] = ‘javascript:window.close();‘;

By default clicking [Leave Chat] takes you to a new web page instead of closing the window!

On the publisher side:

Problem: low frame rate

Solution(s):

1. Increase the light in the room, natural light works best.
2. Get a better web cam, good web cams capture a lot of frames with little light in the room.
3. Lower the picture resolution requested by AVChat 3, some web cams just can’t capture 30fps at 400×300.
4. Increase the movement in the shot, if there’s no movement Flash Player will not capture many frames/second because there’s no movement.

Problem: video stream does not use entire allocated bandwidth

Solution(s):

1. Increase the light in the room, natural light works best. More light helps the web cam capture more details!
2. Get a better web cam, good web cams capture a lot of detail with little light in the room. DV cams for example capture huge ammounts of data compared to normal web cams.
3. Check your connection to the media server. When you’re publishing video you’re  uploading data to the media server. Even tough you might have a 20Mbits/s Internet connection, that’s most probably your download rate, your actual upload rate could be much less. If you’ve configured the video chat to use as much as 768kbits/s per stream, this ammount of video data will not fit in real time trough your 350kbits/s upload pipe!

Problem: dark image or noisy image

Solution(s):

1. Increase the light in the room, natural light works best.
2. Get a better webcam.

Problem: no image at all or blank image

Solution(s):

1. Make sure your web cam is not already used by another app
2. Make sure the proper web cam is used by Flash Player (Right click -> Settings -> Web Cam tab -> Select the web cam you want to use from the drop down list)

Overview

In order to show on your website who is logged in the video chat, AVChat 3 generates 2 external files in the folder where it is installed:

• users__definst_.txt -> a text file containing the number of unique users connected to the video chat
• users__definst_.xml -> an xml file containing the list of rooms and users in each room

You will see these files ONLY AFTER THE FIRST USER (NOT ADMIN) LOGS IN THE VIDEO CHAT!

You can use these 2 files to show on your website how many clients are logged in, the room structure or which clients are logged in!

How to actually code/do that is outside the scope of this article but anyone with minumum php or .net experience  should be able to parse the xml/text file and post the contents on the website.

How it works

In detail:

1. user joins the video chat via index.swf, the path to the writeuserslist.php is automatically detected
2. user joins a room, the media server sends the new  rooms/users structure to writeuserslist.php via POST (using the path detected at step 1)
3. writeuserslist.php receives the new info via POST and creates the 2 files on the web server

The media server automatically detects the path to writeuserslist.php WHEN THE FIRST USER (NOT ADMIN) LOGS IN THE VIDEO CHAT.

One some of our integration kits admin.swf and writeuserslist.php are placed in separate folders, that’s why admins logging in do not trigger an attempt to detect the path to writeuserslist.php!

Admins and users are properly listed in the external .xml file as long as at least a user has logged in in the past so that the media server knows where writeuserslist.php is located!

You can also set the path manually (via the settings.asc/avchat3.properties files on the media server) and you should when:

• you’re using writeuserslist.asp (or any other scripting language) instead of writeuserslist.php
• you’ve moved writeuserslist.php to a separate folder
• you have troubles with the external users list not being generated

Troubleshooting

If the 2 files refuse to appear do these tasks in this order:

1. Log in the video chat trough the user interface (not the admin interface/area)
2. Make sure the folder containing writeuserslist.php is chmoded to 777 so that writeuserslist.php can write/crate new files
3. Make sure calls to the new info is POST-ed from the media server to the web server (check Apache logs)
4. Make sure the folder where writeuserslist.php is located is not password protected!
5. Hard code the path to writeuserslist.php  in settings.asc ( on FMIS ) or in avchat3.properties ( on Wowza/Red5 ) and restart the media server
6. contact support: http://avchat.net/support/request-support/

Turning the feature off

On FMIS  edit applications/avchat30/settings asc, set application.writeUsersLists=false and restart FMIS!

On Red5 edit webapps/avchat30/avchat3.properties, set writeUsersLists=false and restart Red5!

On Wowza edit conf/avchat30/avchat3.properties, set writeUsersLists=false and restart Wowza!

This will turn off the feature and stop the media server from making POST calls to the web server!

AVChat 3 supports emote icons and you can add your own emote icons if you want to!

By default AVChat 3 uses the emote icons in the emoticons\standardPack folder. The list of available emote icons in this pack is contained in emoticons\standardPack\emoticons.xml . You can edit this file to add and remove emote icons.

To add an emote icon to the standard pack:

1. Put the emote icon file (swf, jpg, png, gif) in the emoticons\standardPack folder.
   
2. Edit emoticons\standardPack\emoticons.xml and add a new e element before the final </emoticons> tag:
   <e text=”:newemoteicon:” url=”emoticons/standardPack/newemoteicon.swf”></e>
3. Upload the new emote icon file and the changed emoteicons.xml file to your web site.
   

In the <e text=”:newemoteicon:” url=”emoticons/standardPack/newemoteicon.swf”></e> XML code:

• :newemoteicon: is the text that will be replaced in the text chat with the new emote icon
• emoticons/standardPack/newemoteicon.swf is the path to the emote icon

Some things you should know:

• AVChat 3 only supports 14x14px .swf, .jpg, .png or .gif files as emote icons.
• Emote icons larger or smaller than 14×14 will not display properly!
• Animated GIF’s are not supported (Flash Player limitation).
• You can also make your own pack with its own emoteicons.xml list file. The path to the emoteicons.xml file used by AVChat 3 can be changed from avc_settings.xxx via the emoticonsurl variable.

Ghost users are a known issue with all media servers.

What is a ghost user?

A ghost user is a user who’s disconnection from the media server has not been detected by the media server, thus the media server thinks he is still connected.

In a chat you will know there are ghost users when you see 2-3 persons in the users list having the same user name or persons staying for unusual lenghts of time in the chat without activity.

What causes ghost users?

They happen when a user suddenly disconnects from the Internet while connected to a media server (for example by suddenly disconnecting your Ethernet cable or loosing WiFi signal) but in other occasions too like when the user is over a slow connection (mobile connections) or behind some weird combination of network hardware + server software. IE and the way it handles Flash content might also produce ghost users.

How is AVChat 3 dealing with ghost users?

1. every 3 seconds the client  (swf file) sends a ping to the media server (this value can not be changed)
2. every 10 seconds the media server (Red5/Wowza/FMIS) check if all clients have sent a ping within the last 10 seconds (already 3 pings should have been sent by every client) and disconnects everyone who has not.

This means that no ghost user will ever stay in the chat for more than 20 seconds.

Starting with build 741 (April) you can contol the above mechanism by changing the value of the checkForGhostConnectionsEveryXSeconds and ghostUsersAreIdleForYSeconds variables in settings.asc (FMIS) or avchat3.properties (Red5 and Wowza). If your users seem to get disconnected for no apparent reason increase the value of ghostUsersAreIdleForYSeconds to for example 20 seconds. Both variables are set by default to 10 seconds.

The IE exception

In some cases when closing a tab in IE, IE will not remove the client side swf (index.swf) from the memory, thus the ping calls will be made  even tough the user has closed the tab containing the chat.  Such ghost users can only be removed by :

• the user closing all IE tabs and windows
• an admin kicking him out of the chat

We are working on a  fix for this exception.