A simple chaturbate embed widget using the chaturbate api

[sarettah]

After reading some threads about cams and whitelabels, etc i decided to put together a quick little post about using the chaturbate api to create an embeddable cam widget to your site.

For this I will use a little bit of javascript, a little bit of style, a pinch of php and a touch of html.

This can be used to pull a cam from chaturbate directly and send the user to the chaturbate main site
or it can be used to pull a cam from a chaturbate whitelabel and send the user to the whitelabel
or it can be used to pull a cam from a whitelabel and send the user to chaturbate directly

I usually pull a cam from a whitelabel and then send the user to the chaturbate main site. It takes a little more work but it does not get blocked by adblockers that way. Pulling directly from chaturbate will get blocked by some adblockers and it can get blocked by chrome with the too many resources message

I am going to run through the code here and will include links to the javascript and css files i use

I will use the chaturbate api version 2 for this

You will need your chaturbate webmaster id (if you do not have a chaturbate account you can get one here: chaturbate webmaster signup

if you do not want to use my referral you can also just go to chaturbate and find the sign up link there

I would suggest using the pull from whitelabel method for this in order to avoid adblockers so you should go in and create a whitelabel in chaturbate using a sub domain from your main site

creating a whitelabel is not difficult and if you are just going to pull from the whitelabel and send to the main site it really does not matter what it looks like.

when creating my whitelabels for my projects I usually use a subdomain of cdn. so that it appears to be a content delivery system delivering the cam, don"t know if this helps much but it has worked ok for me. when you create the whitelabel you can have chaturbate make it secure, i suggest that you do that

the code i am going to post will pull a single cam from the chaturbate api

it will then present it on a page

first thing is the code to control where the embed shows up, this is a little bit of html code that you put wherever you want the cam to be on the page

HTML Code

<div name="camdiv" id="camdiv">
<div name="innerdiv" id="innerdiv" style="background-color:#000000;">
<iframe class="currcam" name="currcam" id="currcam" src="" frameborder="0" scrolling="no">
</iframe>
</div>
<a class="modellink" name="modellink" id="modellink" href="#" title="Click here to join the chat.">
<div name=overlay id=overlay>
</div>
</a>
</div>

I use a wrapper (camdiv) to hold the actual cam and the model link. Please note that if you are going to send the user to the same source as the cam then you do not need the model link or overlay, that is what i use to send the user to the main site while i load the cam from the whitelabel

The innerdiv will hold the embed (iframe), currcam is the iframe itself, modellink controls the link i will send the user to and overlay covers the iframe so the model link will work

so if you are going to send to the same as you sourced from then the code looks like this:

<div name="camdiv" id="camdiv">
<div name="innerdiv" id="innerdiv" style="background-color:#000000;">
<iframe class="currcam" name="currcam" id="currcam" src="" frameborder="0" scrolling="no" >
</iframe>
</div>
</div>

the styling needed is fairly simple:

CSS, Style Code

#camdiv{position:relative;text-align:center;margin:auto;aspect-ratio:1.77/1;width:300px;}
#innerdiv{
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
text-align:center;
}
.currcam{height:100%;width:100%;text-align:center;}
.modellink {text-decoration:none;cursor:pointer;color:#ffffff;text-shadow: 2px 2px #000000;}
#overlay {position:absolute;top:0px;left:0px;height:100%;width:100%;}

The width of the camdiv controls the size of the widget so if you want something bigger then increase the width, smaller, decrease it

if you are pulling from the same source and sending back to it then you do not need the modellink or overlay styles and yours would look like this

#camdiv{position:relative;text-align:center;margin:auto;aspect-ratio:1.77/1;width:300px;}
#innerdiv{
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
text-align:center;
}

if we are going to send to a different place then we pulled from then there is a little directory structure and a php script to put in place

for this i created a subfolder called cams

in there there are 2 files htaccess and a little php script

the htaccess is very simple and is just telling the server that anything that comes into the cams folder gets redirected to the index page
order allow,deny

Htaccess code

allow from all
RewriteEngine On
RewriteRule ^(.*)$ index.php

PHP code

the php file (index.php) redirects the hit
<?php
$tag='';
$work=$_SERVER['REQUEST_URI'];
if(substr_count($work,"/")>0)
{
$tag=strtolower(substr($work,strrpos($work,"/")+1));
$tag=trim(str_replace(".htm","",str_replace(".php","",strtolower($tag))));
}
if(!empty($tag))
{
header("Location: " . "https://chaturbate.com/in/?tour=LQps&ca ... nd=1&room=" . $tag . "#nav");
}
?>


So, we have the html code, php code and the styling in place, now we bring it to life with a little bit of javascript

Javascript code

I place all this javascript at the top of the page so it happens when the page is being loaded

// edit area
// put your chaturbate webmaster id here, to find your id look at the linking codes in the chaturbate dashboard and it will be the campaign in the url
var wmid='xxxxx';

// put in a tag if you want to pull a particular tag such as lesbian, bbw, big boob, big dick, whatever or leave it blank if you don't care
var tag='';

// put in the gender you want, if you don't care what gets pulled then leave it blank, i have not set this up to select multiple genders so you can designate a gender or not
var gender='f';

// if you are going to pull from a whitelabel then fill this in if not then just leave it blank
var wlname='yourwhitelabelnamehere';

//fill this in with whatever you want to show in chaturbate logs as your tracking code
var trackcode='yourtrackcode';

// end of edit area

api_url="https://chaturbate.com/api/public/affil ... rooms/?wm=" + wmid + "&format=xml&client_ip=request_ip&limit=1";
if(tag>'')
{
api_url +="&tag=" + tag;
}
if(gender>'')
{
api_url +="&gender=" + gender;
}
if (window.XMLHttpRequest)
{
dirpage=new XMLHttpRequest();
}
else
{
dirpage=new ActiveXObject("Microsoft.XMLHTTP");
}
dirpage.onreadystatechange=function()
{
if (dirpage.readyState==4 && dirpage.status==200)
{
parse_data(dirpage.responseText);
}
}
dirpage.open("GET",api_url,true);
dirpage.send();

function parse_data(data)
{
parser = new DOMParser();
xmlDoc = parser.parseFromString(data,"text/xml");
if(wlname>'')
{
document.getElementById('currcam').src='//' + wlname +'/in/?tour=9oGW&campaign=' + wmid + 'JkjyU&track=' + trackcode + '&room=' + xmlDoc.getElementsByTagName("username")[0].childNodes[0].nodeValue + '&bgcolor=black&disable_sound=1&mobileRedirect=auto&embed_video_only=1';
}
else
{
document.getElementById('currcam').src='//chaturbate.com/in/?tour=9oGW&campaign=' + wmid + 'JkjyU&track=' + trackcode + '&room=' + xmlDoc.getElementsByTagName("username")[0].childNodes[0].nodeValue + '&bgcolor=black&disable_sound=1&mobileRedirect=auto&embed_video_only=1';
}
// do next line if you are pulling from whitelabel but sending to main page
document.getElementById('modellink').href='cams/' + xmlDoc.getElementsByTagName("username")[0].childNodes[0].nodeValue;
}

so your page structure should look like this:

<head>
Javascript stuff
Style stuff
</head>
<body>
html stuff
</body>
</html>

I have an example of this at //sexycamfoxes.com/cbwidget.htm

this is the code on that page:

<html>
<head>
<script src="sarettah_cb_widget.js"></script>
<link rel="stylesheet" href="sarettah_cb_widget.css">
</head>
<body>
<div name="camdiv" id="camdiv">
<div name="innerdiv" id="innerdiv" style="background-color:#000000;">
<iframe class="currcam" name="currcam" id="currcam" src="" frameborder="0" scrolling="no" >
</iframe>
</div>
<a class="modellink" name="modellink" id="modellink" href="#" title="Click here to join the chat.">
<div name=overlay id=overlay>
</div>
</a>
</div>
</body>
</html>

the javascript i am using can be grabbed at //sexycamfoxes.com/sarettah_cb_widget.js

the styles i am using can be grabbed at //sexycamfoxes.com/sarettah_cb_widget.css

Please do not use the includes directly against my server, please download the files and put them on your server

I think that is all there is to it, so any questions just ask

hope it works for you

One more note, i have a request in with my support to add the domain i am using for this to my security cert, that will happen sometime so apologies in advance for any non-secure warnings or issues that might create

[sarettah]

Well, I have to change something and i cannot edit the post so i will ad here

when i checked mobile i had an issue so i changed up my styling a touch

it now looks like this:

#camdiv{clear:both;position:relative;text-align:center;margin:auto;aspect-ratio:1.77/1;}
@media only screen and (min-width: 1000px)
{
#camdiv{width:500px;}
}
#innerdiv{
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
text-align:center;
}
.currcam{height:100%;width:100%;text-align:center;}
.modellink {text-decoration:none;cursor:pointer;color:#ffffff;text-shadow: 2px 2px #000000;}
#overlay {position:absolute;top:0px;left:0px;height:100%;width:100%;}

And now the security cert has been updated so there should not be any issues, i hope

[TheButcher]

Thanks for that Sarettah

[BrasSmonkey]

can you zip it up?

[sarettah]

can you zip it up?

sure

https://sexycamfoxes.com/sarettah_cb_widget.zip

[sarettah]

can you zip it up?

sure

https://sexycamfoxes.com/sarettah_cb_widget.zip

The original zip of this did not include the cams folder and files so if you grabbed it prior to right now (5:06pm CST) then you should grab it again as it now includes them

sorry about that

[BrasSmonkey]

thank you kindly

[britporn_mike]

Can this be done for Stripcash?

[sarettah]

Can this be done for Stripcash?

Strip chat is a bit harder to do but it can be done because it is not a normal embed, you have to create a video player instance. I have stripchat feeding cams in my rotation on camtok.com so i do have the code to pull from the api and put the cam up

i would need to go look back at my code since it has been about a year since i wrote it and i really don't remember much before like an hour ago ;p

took a look at the api and it does have a limit parameter so yeah, you can pull just 1 cam at a time. They also have a script available (lpliteiframe) that does an iframe, you pass in the model name, so between the 2 there is probably a pretty easy solution to be had.

I will see if i can work something up when i get a chance

[sarettah]

just to clarify, that this can be done with any cam sponsor that has an api, the ones that have a limit parameter work better because you can pull just 1 cam, others that do not have a limit parameter you have to pull however many cams the api passes back that means more time on the load if you are getting 10k records back and the user is waiting while the api gets pulled and makes it pretty much useless because users are not going to sit there for 10 seconds or more waiting for the cam to load

[BrasSmonkey]

well hook us up guru! camsoda and bonga!

[Hosting Fred]

Will try make it work with bongacams and see if I can change the code in right places to work

[sarettah]

Will try make it work with bongacams and see if I can change the code in right places to work

I was looking at bongacash a couple of days ago because i have not played with their api in a while

the v2 api can be pulled with a limit so that is the one i would choose to use, however it returns json, not xml so the parse is different

I have also not checked to see if bonga allows cross domain so that it can be pulled by javascript, hopefully it can

I started on stripchat but had to wait for an answer from my contact there, got that this morning so will be putting something together on that

[sarettah]

I am thinking that i am going to take a skip on bonga

too many issues

[born2bewild]

What are the main issues implementing this for bonga?