Studio Api

Extra features using Jquery and PHP


All our software works without the following Api.
This Api is for advanced users with a good understanding of JavaScript and PHP.
The Api below allows you to access certain criteria of your studio such as which performers are online, exchange rates and a host of other features.

Studio / Performer Account Integration

We have developed an API for you to be able to add our performer login directly on your own website. We have removed all Webstream branding from the API.

Show Code and Example

The Code

<script type="text/javascript" src="//addit.ws/global"></script>
<iframe id="ws_admin_panel" width="100%" scrolling="no" frameborder="0" src="https://www.webstream.co.uk/api/performer_login_api.html?style=white"></iframe>

Parameters / Attributes

?style=white    // Creates the login plugin for light coloured websites
?style=black    // Creates the login plugin for dark coloured websites

Here's how your login will look...


Using Your Own Buttons

We have now made it possible for you to create your own LiveCam, CallConnect and Donate buttons using pure css. The code below will tell our system you wish to use your own styles to create the buttons.

Show Code and Example

The Code

<script type="text/javascript">
    var wsbespokelivecam=true;
    var wsbespokecallconnect=true;
    var wsbespokedonate=true;
</script>
<style>
	.showHornyCam {display:inline-block;}
	.showHornyCam a {display:block; height:40px; width:120px;}
	.showHornyCam .wsOffline {background-image:url('https://www.webstream.co.uk/images/api-webcam-offline.png');}
	.showHornyCam .wsOnline {background:url('https://www.webstream.co.uk/images/api-webcam-online.png');}
	.showCallConnect {display:inline-block;}
	.showCallConnect a {display:block; height:40px; width:129px;}
	.showCallConnect .wsOffline {background:url('https://www.webstream.co.uk/images/api-phone-offline.png');}
	.showCallConnect .wsOnline {background:url('https://www.webstream.co.uk/images/api-phone-online.png');}
	.showDonate {display:inline-block;}
	.showDonate a {display:block; height:40px; width:149px;}
	.showDonate .wsDonate {background:url('https://www.webstream.co.uk/images/api-donate-button.png');}
</style>

Once you have included the JavaScript, the css and the button code on your website, the buttons will use your styles instead.

               

Here's another example using text instead of graphics

<script type="text/javascript">
    var wsbespokelivecam=true;
    var wsbespokecallconnect=true;
    var wsbespokedonate=true;
</script>
<style>
    .showHornyCam {display:inline-block;}
    .showHornyCam a {padding:3px 10px; border-radius:5px;}
    .showHornyCam .wsOffline {background:red; color: #fff;}
    .showHornyCam .wsOnline {background:green; color: #fff;}
    .showHornyCam .wsOnline:before {content: "Webcam: Online";}
    .showHornyCam .wsOffline:before {content: "Webcam Offline";}
    .showCallConnect {display:inline-block;}
    .showCallConnect a {padding:3px 10px; border-radius:5px;}
    .showCallConnect .wsOffline {background:red; color: #fff;}
    .showCallConnect .wsOnline {background:green; color: #fff;}
    .showCallConnect .wsOnline:before {content: "Webcam: Online";}
    .showCallConnect .wsOffline:before {content: "Webcam Offline";}
    .showDonate {display:inline-block;}
    .showDonate a {padding:3px 10px; border-radius:5px;}
    .showDonate .wsDonate {background:#000; color: #fff;}
    .showDonate .wsDonate:before {content: "Donations";}
</style>
               

Grey Offline Buttons

We have included a bit of css below that will turn all offline webcam buttons grey. They will revert back to the colour you specified once the performer is online. Add the code below to your style sheet (css)

Show Code and Example

The Code

<style>
    img.showHornyCam-off-, img.showCallConnect-off- {
	    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	    filter: gray;
	    -webkit-filter: grayscale(100%);
    }
</style>

Your offline button will now be greyed out...


Using PHP queries to fetch information

Return certain information such as performers online/offline, exchange rates and performer prices

Show Code and Example

The Code

<?php
    unset($command);
    $section = 'callconnect'; #values: 'livecam' or 'callconnect'
    $command['cmd'] = 'online'; #values: 'online' , 'offline' , 'all' , 'rates' , 'prices'
    $command['performer'] = 'your-performer-username';
    $command['studio'] = 'your-studio-username';
    #-------------------------------------------------------
    $result = json_decode(file_get_contents('https://www.webstream.co.uk/api/'.$section.'.php', false,
    stream_context_create(array('http' => array(
    'method'  => 'POST',
    'header'  => 'Content-type: application/x-www-form-urlencoded',
    'content' => http_build_query($command))))),true);
    #-------------------------------------------------------
?>

Parameters / Attributes

// Defines which software you are talking about. Valid Values : 'callconnect', 'livecam'
$section                

// Requests criteria to return (see examples below). Valid Values : 'online' , 'offline' , 'all' , 'rates' , 'prices'
$command['cmd']

// Enter your studio username (optional depending on search).
$command['studio']

// Enter your performers username (optional depending on search).
$command['performer']

Example returning a list of CallConnect Operators that are online...

$section = 'callconnect' and $command['cmd'] = 'online'
<?php echo implode(',',$result['result']); ?>

Example returning a table of exchange rates for credit purchase...

$command['cmd'] = 'prices'
<?php 
	echo '
		<table>
			<tr>
				<th>Credits</th>
				<th>£</th>
				<th>$</th>
				<th>€</th>
			</tr>';
	foreach($result['result'] as $credits => $row){
		echo '
			<tr>
				<td>'.$credits.'</td>
				<td>'.$row['GBP'].'</td>
				<td>'.$row['USD'].'</td>
				<td>'.$row['EUR'].'</td>
			</tr>';
		}
	echo '
		</table>';
?>

Example returning a table of performers and their rates...

$section = 'livecam' and $command['cmd'] = 'rates'
<?php
	echo '
		<table>
			<tr>
				<th>Performer</th>
				<th>Group Rate</th>
				<th>Private Rate</th>
			</tr>';
	foreach($result['result'] as $performer => $rate){
		echo '
			<tr>
				<td>'.$performer.'</td>
				<td>'.$rate['group'].'</td>
				<td>'.$rate['private'].'</td>
			</tr>';
		}
	echo '
		</table>';
?>

Adding a Client Login to your website

Use the code below to add a client login screen to your website. You can change the look and the feel of the login box by adding the following styles to your style sheet.

Show Code and Example

The Code

<script type="text/javascript" src="//addit.ws/global"></script>
<iframe id="log_iframe" frameborder="0" width="100%" src="https://www.webstream.co.uk/api/login_api.html?css=https://www.webstream.co.uk/api/login_api.css"></iframe>

<style>
.login {background:none transparent; margin:0px; padding:0px;color:#000; font-family:arial; font-size:12px;}
.login a {text-decoration:none; color: #EA0079; text-decoration:none;}
.login p {margin:0px; padding:0px 0px 10px 0px;}
.login a,textarea,input,button,select {outline:0;}
.login .title {font-size:18px;}
.login .clientlogin .title:before {content: "Client Login";}
.login .clientregister .title:before  {content : "Client Register" ;}
.login .clientremind .title:before  {content : "Password Reminder" ;} /* new */
.login .clientloggedin .title:before {content: "Welcome back ";}
.login .creditblance:before {content: "Your Credit Balance:";}
.login .creditblance span:after {content: " Credits:";}
.tablinks .registertxt:before {content: "Not a member? Click here to register";}
.tablinks .remindtxt:before {content: "Forgot Password? Click Here";}  /* new */
.tablinks .logintxt:before {content: "I'm already a member, login now";}
.tablinks .logouttxt:before {content: "Logout";}
.login label  {display:block;margin:0px 0px 5px 0px;}
.login input[type=text], .login input[type=password]  {
	display:block; padding:8px; width:100%; border: 1px solid #999;
	color:#000; margin:0px 0px 10px 0px; background-color: #FFF;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.login input[type=button] {
	display:block; padding:8px; width:100%; border:0; color:#FFF; margin:0px 0px 10px 0px; cursor: pointer;
	background-color: #EA0079;  font-weight:bold; text-transform:uppercase;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.login #content-area {
	font-size: 10px; display: none; padding: 10px; font-family: arial; height: 250px;
	overflow: auto; margin: 0px 0px 10px; text-align: justify;
}
.login #termslink2 {text-decoration:underline;}
.login .creditblance {font-size:14px;}
.login .creditblance span {display:inline-block; margin-left:10px;}
.login select {
	display:inline-block; padding:8px; width:100%; border: 1px solid #999; color:#000; margin:0px 0px 10px 0px; background-color: #fff;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.login .selectcurrency {width:28%; margin-right:2%}
.login .selectcredits {width:70%;}
.login .tablinks {text-align:right;}
.login .tablinks a {display:inline-block; margin:0px 5px; cursor:pointer;}
</style>

This is what the login box will look like...