HTML5 and Payperview

A new exciting feature: Pay per view mode with HTML5 chat is now available for paid (registered users)

What is “Pay Per View” ?

Pay per view is a special kind of chat where a performer displays his webcam to watchers. This is 1 to many chat : indeed a conference mode chat.

Public and private chat

A watcher can request a private chat to performer. If the performer accepts, other users will be ejected from the room and private chat between the performer and requester starts.
During the private chat, credits from user are decremented and private session data records duration of the private chat. This is why it is called : pay per view: as long as user stays in private chat, he pays (credits) for the show.

Pay per view video chat : what for ?

This pay per view mode is suitable for:

  • E-learning sessions, teachers
  • Erotic pay per view shows (livejasmin like)
  • Clairvoyance site, astrologists
  • Consultants, lawyers
  • Any kind of chat when you need user to pay to watch private cam

How does it work ?

A webmaster can have many performers. When user arrives to the performers wall, he will see performers photo avatars and status: online, offline or busy (already in private chat). He clicks on the performer’s picture and enter the performer’s avatar. If he has credits, he can request a private chat and private chat will start as soon as performer accepts it.

2 different pay per view modes

We have 2 different pay per view mode integration:

  • Embed mode: no coding knowledge is required at all. You just defines prices, performers, insert your paypal email to receive payments and you are ready to go: this is a 5 minutes process.
    This is suitable for people with no coding knowledge at all. All data, records, reports, and performers data are stored on html5 chat servers.
    Here are details about how to setup the payperview in embed mode
  • External mode: you need some coding knowledge such as calling REST API, JSON encoding. This is suitable when you want all payment process and data to be stored on your own servers. This mode is suitable for people who owns already a website and have serious coding knowledge. This is a 2 – 4 hours process.
    Here are details about how to setup the payperview in external mode.
    Here are details about how to setup the payperview in external mode

If you need the external mode but do not have enough coding knowledge, we can do the job for extra cost. Please contact us by skype: proxymis

How to setup the payperview in external mode

The external mode allows you to host all data (like payments history, liveshows history, performer data) on your own server. However the webrtc chat is hosted on html5 chat servers.

This means that your server and the chat will have to communicate together. They will communicate through AJAX REST calls. That’s why you need to implement on your server some JSON answers so the html5 chat can request your server.

This means: you need developer knowledge to do that. If you do not have some, you can ask a freelancer to do the job for you (we can also do that for an extra fee). You can also choose the easy embed way to integrate the payPerView as described here. However the embed method means that all data are stored on our servers.

There are 2 pages to be created:

You have to create yourself these 2 pages that will be stored on your own server.

  1. the listing page: here are where users will see the listing of performers and where he can select a performer and join her into her room. (ex: listing.php)
  2. the model chat page: here is the place where performer will enter the chat. (ex: performer.php)

Database tables

In the external embed mode, you will have to store all data (models, payments, shows history). Here we provide some data structures you will need (but you can modify them or use your own)

Table ppv_tips : this is the most important table: it stores all tips that a performer receives from an user (as tip or as private live show).
We recommend you use the same structure as the one we provide here.

CREATE TABLE ppv_tips (
id bigint(20) NOT NULL,
date datetime NOT NULL,
action enum('tips','liveshow') CHARACTER SET utf8 DEFAULT 'tips' COMMENT 'is that tips or show ?',
userid int(11) NOT NULL,
performerid int(11) NOT NULL,
credits int(11) NOT NULL DEFAULT '0',
price decimal(10,3) NOT NULL DEFAULT '0.000' COMMENT 'price of the tip',
performerBenefit decimal(10,3) NOT NULL DEFAULT '0.000' COMMENT 'benefit a performer will get from that tip'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
ALTER TABLE ppv_tips
ADD PRIMARY KEY (id);
ALTER TABLE ppv_tips
MODIFY id bigint(20) NOT NULL AUTO_INCREMENT;

Table ppv_item: table when you store items that clients will purchase (ex: 600 credits for 10$)
When an user purchases an item, you have simply to update his credits.

CREATE TABLE ppv_item (
id int(11) NOT NULL,
seconds int(11) NOT NULL DEFAULT '600',
price decimal(10,2) NOT NULL DEFAULT '10.00',
description varchar(255) CHARACTER SET utf8 NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='prices of credits';
ALTER TABLE ppv_item
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

The ppv_paypal : table that will store all transactions done using paypal (you can of course use any payment you want)

CREATE TABLE ppv_paypal (
id int(11) NOT NULL,
txn_id int(11) NOT NULL COMMENT 'transaction Paypal',
webmasterid int(11) NOT NULL,
userid int(11) NOT NULL,
price decimal(10,2) NOT NULL,
credits int(11) NOT NULL,
ppv_itemid int(11) NOT NULL,
item_name varchar(100) NOT NULL,
date timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
log text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
ALTER TABLE ppv_paypal
ADD PRIMARY KEY (id),
ADD KEY userid (userid),
ADD KEY ppv_itemid (ppv_itemid);
ALTER TABLE ppv_paypal
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

Ajax Calls / REST

Now, when you created all data structures, you will need the HTML5 chat to be able to communicate with your server, especially to update the data you will store in the tables you created.

This article is still under construction. Please come back later….

How to setup the payperview in embed mode

The embed mode means that all data are stored on html5 chat servers. This mode is easy to be run and do not demand any coding knowledge. It can be setup in 5 minutes. Here is step by step process

In templates, choose the pay per view template
  • Go back to main menu : a new pink button called ” PPV Conference Management ” should appear in your global menu at the bottom.
A new button menu appear !
  • Go to chatadmin->PPV conference->performers and create (or edit) users that will be performers (role must be setup to performer). Make sure performer has photos (you can upload performers’ photos)
Edit/add performers
  • Then, on your website, you must then prepare 2 HTML or PHP pages for the chat:
  • Page where performer will enter the chat
    Ex: performer.php that will contain that script:
    <script src="https://html5-chat.com/script/xxxx/"></script>
    where xxxx is your webmasterid (you will find it in your chatadmin console)
    When you open that page, you should find performer’s login
  • Page when user will enter the chat:
    Ex: user.php that will contain that script:
    <script src="https://www.html5-chat.com/ppv_listing/xxxx"></script>
    where xxxx is your webmasterid (you will find it in your chatadmin console

The user script will display the list of all performers and their photos you have added with their status. If a performer is online, she will appear in green and user will be able to click her photo to enter her room.

List of models: green is online, red is offline, yellow is busy.

And that’s all: you are able to enter now as performer and as user.
When user clicks the green available mode, he enters that model room.

User Payment process and credits

You defined prices in your config panel. When user wants to purchase credits, he press the “purchase credits” button and a popup displays your prices. When he wants to purchase some credits, he will be redirected to the paypal account you also defined in your config panel.

You will receive 100% of that amount (we don’t take any commission).

Performers payments

That’s your duty to pay the models. You get performers reports inside your PPV Conference Management that includes private shows and tips a performer has received.
If you need to update credits, just go to users or performers data and you can edit the credits field.

Reports available in your payperview panel.

Summerizing it all

  • The embed mode is very simple to be setup. You setup your paypal email, define credits prices .
  • You add performers and setup the percentage an user will receive per purchased credit.
  • You create 2 pages : 1 for performer enter and one for user listing.
  • Public chat is free and private chat is paid. User can also send tips, credits to performer.
  • When user purchases credits, you will get the amount on your paypal account.
  • You also get some reports so you know how much you will pay to performer.
  • All this is simple and do not need any developer knowledge. If you have trouble, we are here to help you.

Customization

You can of course change the CSS of the chat and the listing page by injecting your own CSS.

Live typing chat feature

What is live typing ?

Live typing allows you to read users messages before they send them to the chat. You can “spy” about what they do live type in.

Who should use it ?

Live typing should be used by admins and moderators so they can react before the message has been sent to users. They would be able to block (kick or ban) instltant messages before they have been posted to all membres.

How to enable live typing ?

Live typing can be activated in roles. Notice that user and guest roles cannot have that feature enabled. It should be used with parsimony and we are plenty conscious that this feature can privacy have drawbacks.

Once enabled, when an user is typing something, the live typing appears into a speech bubble next to his username in the user list on the right.

What kind of site should use that predictive feature?

Probably some fortune telling websites. However more generic chat can also use that feature to better chat moderation.

html5 chat ready for payperview solution

This is now possible to build a payperview solution using html5 chat

ex: expert chat, erotic chat where users do pay per minute spent

For that we created role called “performer“, added new API REST like and added type of chat called “conference

New API RESTs: 

getOnlinePerformers 

getPerformers 

getUserStatus

 

These API will allow to create easily a payperview solution like:

Scenario:

  • you get list of connected online performers
  • you choose a performer to chat with
  • you are in a public chat with performer.
  • You ask for a private chat with performer, if performer accepts, credits are going down

We will provide soon a complete configuration for a full payperview solution.

New help support system

New html5 chat help system

For better support and help request, we have add a new button “Support” available in your chatadmin panel

supportThis button will open a new support area.

That way, we will get a better thread view of your problems with a whole history and we will stop asking you for your webmasterid account

Hope that will be useful for you.

This help system is still in BETA version.

 

 

 

phpsocial

html5 chat and phpsocial integration

PHP social is a cool social “facebook” like script.  It is not free but has a moderated price of 49$.

We suppose we want to get a chat page in full screen, auto loggedon and called “chat”.

(You need to be registered and loggedon on netswing.fr to test it)

ex: https://www.netswing.fr/chat

How can we integrate HTML5-chat into php social ?

Step1 : edit .htaccess and add this line

RewriteRule ^chat/?$        index.php?a=chat          [NC]

Step2 : edit config.php and add

'chat'        => 'chat',

Step3: download this script: chat , unzip it and edit it and change the 2 lines: webmasterid and password

$webmasterid = xxx;
$password = 'xxxx';

Step4: FTP upload chat.php to /sources folder

Step5: Test that your chat works fine on https://www.netswing.fr/chat

 

Here is the source of chat.php 

<?php
function PageMain() {
/*
* Change these 2 parameters and put your webmasterid and your chat password here
*/
$webmasterid = 'xxxxx'; // your webmasterid number
$password = 'yyyyy'; // your chat password
//

global $TMPL, $LNG, $CONF, $db, $user, $settings, $plugins;
if(!isset($user) || !isset($user['idu']) ) {
header("Location: ".$CONF['url']."/index.php?a=welcome");
}

$json = json_encode(array('id'=>$user['idu'], 'username'=>$user['username'], 'image'=>$CONF['url'].permalink('/thumb.php?t=a&w=112&h=112&src='.$user['image']),
'gender'=>($user['gender'] == 1) ? 'male' : 'female', 'role'=>'user', 'profile'=>$CONF['url']. '/profile/'.$user['username'], 'password'=>$password));
$encoded = file_get_contents("https://jwt.html5-chat.com/protect/".base64_encode($json));
ob_start();?>
<script src="https://jwt.html5-chat.com/script/<?=$webmasterid?>/<?=$encoded?>"></script>
<?php
$script = ob_get_clean();
echo $script;
exit;
}
Mobile

Html5 chat: better mobile support

For a long time, HTML5 “mobile compatible” was just a marketing directive because we did not focus enough on the mobile version and we just made mobile and responsive tests without really focusing on real user experience. That was a mistake.

It was of course compatible with mobile, but interface was not really user friendly. We believe now that mobile is future of Internet and we decided to improve the user experience with mobile devices:

  • better layout
  • keyboard auto hides after sending message
  • H264 for ios and android so both iphones and Androids are able to send streams and watch streams
  • speed optimisation
  • Many CSS fixing for readability (change size, paddings, margins)
  • Synch uploading of photos to avoid bugs on Iphone while uploading

And much more…