Good morning Greenguys denizens. First, I would like to apologize for sometimes forgetting to come visit and post over here. No excuse, shit happens.
I was trying to think of what I could post that would be helpful to folks over here. I decided to post something that I posted at the Zoo about a month ago. For those of you who still visit the Zoo, you will have seen this before. For those that no longer make it over there, I hope this is helpful to you.
---------------------------------------------------------------------------
Have you wanted to build your own cams page from the Chaturbate API?
This is a little bit of code to help get you started.
It is based around Chaturbates API Version 2.
The biggest change between Version 1 and Version 2 was that Version 2 wants the client IP to be passed in on the API request. This allows Chaturbate to filter the results based on what cams they allow to be shown in what region.
With Version 1, the most common usage is to pull the results of the API server side and then cache it there, either as a file or in a database. Then dole out the results from the cache on each page hit. Typically you would do a pull from Chaturbate every 2-5 minutes to keep the cams fresh.
With Version 2, it is expected that you will pull from the API on every page hit with the client ip for filtering. This means that instead of hitting the API once every 2-5 minutes, you are hitting it on every page hit. This is considerably more overhead for your server to handle.
The solution? Move the API handling onto the client side. How do you do that? Using javascript and/or jquery.
The following code is the javascript I came up with to do the API call and parse in the client's browser. It has been tested in Chrome, Opera and Firefox. It is a simple little bit of code that for most practical uses must be expanded upon. It will work as is but really should have other things with it, things like a design and text, ya know? All those cool web things.
I am listing 2 different ways to pull in the API. The first is pure javascript, the second uses a jquery call to the AJAX object. To use the jquery version you need to include the jquery libraries. If you are already using jquery on your pages then it makes the most sense to use the jquery version. However, if you do not use jquery, are trying to keep your page load as low as possible, or are just a minimalist at heart, then you might want to use the pure javascript version.
Either way, there are 2 parts.
Part 1 is pull in the API data.
Part 2 is parse the API data and display it.
I have included some comments in the code to help you figure out what is happening but I left some for you to figure out yourself. I am including in here 2 working demos for you to view. Look under the sheets, play with the code.
The code is running from a .php file. You could almost do all of this with pure javascript but unfortunately you cannot get ahold of the user's ip in javascript. You either have to grab it from your server or from a 3rd party service. I decided that the best way to grab it was from my server and I use php to accomplish that. Since I am already in a php file I decided to utilize a little more code to make the solution a little more dynamic.
Have fun.
Code:
// Chaturbate API Version 2
// xml feed pull and parse using javascript called from php
// by sarettah - Hatteras Designs 2021
// sarettah AT hatterasdesigns.com
// requires jquery libraries for the jquery ajax call
// could be done pure client side with the exception of the user ip.
// that would have to be called from a service or injected here as I did
// this section would go near the top of the page to make for easy editing
<?php
// edit area
$wmid='chaturbate webmaster Id';
$tag='bigdick';
$gender='t';
$limit=50;
$camsdiv='name of cams div';
// end of edit area
// construct the api url
$api_url="https://chaturbate.com/api/public/affiliates/onlinerooms/?wm=" . $wmid . "&format=xml&client_ip=" . $_SERVER['REMOTE_ADDR'];
if($limit>0)
{
$api_url .="&limit=" . $limit;
}
if($tag>'')
{
$api_url .="&tag=" . $tag;
}
if($gender>'')
{
$api_url .="&gender=" . $genderl;
}
?>
// Here are 2 different ways to pull in the xml feed into the page
// both methods call the parse data function.
// Either of these would appear in your page somewhere after the cams div
// Can be called inline in the page OR from the document ready function
// Pulling the xml page via pure javascript AJAX call
<script>
pathin="<?php echo $api_url; ?>";
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, "<?php echo $camsdiv; ?>");
}
dirpage.open("GET",pathin,true);
dirpage.send();
}
</script>
// OR
//Pulling the xml page via a jquery AJAX call
<script>
$.ajax({
dataType: "html",
url: "<?php echo $api_url; ?>",
success: function (data) {
//console.log(data);
parse_data(data, "<?php echo $camsdiv; ?>");
}
});
</script>
<script>
// The parse data function parses the xml data and formats the cam element division.
// It then appends the result to the cams div
function parse_data(data, camsdiv)
{
parser = new DOMParser();
xmlDoc = parser.parseFromString(data,"text/xml");
x=xmlDoc.getElementsByTagName("username");
txt='';
for (i = 0; i < x.length ;i++)
{
// construct your cam element here
// for example
txt +='<div>';
txt +='<a href=' + xmlDoc.getElementsByTagName("chatroom_url_revshare")[i].childNodes[0].nodeValue;
txt +='Username: ' + xmlDoc.getElementsByTagName("username")[i].childNodes[0].nodeValue + '<br>';
txt +='<img src=' + xmlDoc.getElementsByTagName("image_url")[i].childNodes[0].nodeValue + '><br>';
// use other xml elements from the api as needed..........
// each element is called using the getelementsbytagname function and displaying their respective values
txt +='</a>';
txt +='</div>';
// add the element to the div
document.getElementById(camsdiv).innerHTML +=txt;
txt='';
}
}
</script>
.