step 1: download the phpfox module here
step 2 : open file
\PF.Base\module\html5chat\template\default\controller\index.html.php
and edit these lines 16-17
$webmasterid = xxxx; // ENTER your script id (webmasterid) here $password = 'my secret password'; // ENTER your HTML5 password here
and fill with your own data
step3: open your website https://yourwebsite.com/ws/index.php/html5chat
You will be loggedon with your username, gender, avatar and role
Here is a quicker and simpler version of integrating HTML5 chat into an existing website than the JWT version described in that post
The bottom sample is a PHP sample, but you can easily adapt it to JS or ASP in needed. let assume your webmasterid = 1050
Step 1: you create an array of your user such as:
$json = json_encode([
'webmasterid' =>'1050',
'username' =>'myUsername',
'password' =>'myChatAccountPassword',
'gender' =>'male',
'role' =>'user',
'image' =>base64_encode('https://html5-chat.com/img/malecostume.svg'),
'profile' =>'https://monsite.com/profile/myUserername',
'birthyear'=>1970
]
);
Step 2 : you encode it using the html5 JWT online service
$encoded = file_get_contents("https://jwt.html5-chat.com/protect/".base64_encode($json));
Step 3 : you inject that encoded string into your JS script
<script src="https://html5-chat.com/script/<?=$webmasterid?>/<?=$encoded?>"></script>
And that’s ALL:
role : can be admin, user, guest, dj, custom1, custom2, custom3
avatar is the http:// image of the expected avatar
profile: the link to the user profile (if available)
startRoom : the id of the room where to start in (roomid is an integer number)
Replace the webmasterid in script by your script id (webmasterid, a positive integer you can find in your chatadmin panel)
If you want to use JWT on your server, please refer to this post.
<?php $json = json_encode(['username'=>'myUsername', 'password'=>'myPassword', 'gender'=>'male', 'role'=>'user', 'profile'=>'https://monsite.com/profile/myUserername', 'image'=>'https://html5-chat.com/img/malecostume.svg']);
$encoded = file_get_contents("https://jwt.html5-chat.com/protect/".base64_encode($json), 'startRoom'=>5);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 chat</title>
</head>
<body>
<div style="width: 1024px;height: 800px;">
<script src="https://html5-chat.com/script/xxxxx/<?=$encoded?>"></script>
</div>
</body>
</html>
Notice: if file_get_contents is DISABLED on your hosting, you can use the curl
$curl= curl_init();
curl_setopt_array($curl, array(
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL => "https://jwt.html5-chat.com/protect/".base64_encode($json)
));
$encoded = curl_exec($curl);
Html5 chat goes now MULTI ROOM
That means than you can be within N rooms at the same time !
Only paid users users can take benefit of that new feature.
To enable it, go to you /chatadmin panel and choose multi room option.
You will now be able to enter many rooms at the same time and not 1 room exclusively.
Some new features were also added as well as some bug fixes.
Enjoy the new chathtml5 new features now.
You can now add your own sounds from the chat admin panel :
You just have to specify the url of the MP3 sound to be played on each event
that’s a great news: HTML5 supports both: Flash and Webrtc : you can choose that feature from your chatadmin panel.
Each technology has pros and cons:
Flash is used for streaming – that means ONLY flash based devices could stream. However all devices can watch the video.
Those with flash have real time video. Those without use HLS and have about 5 seconds of delay.
Webrtc is used for both streaming and playing. This technology is for now ONLY supported by chrome and Firefox browser.
It also works on Android.
Quality is superior to flash. It also includes a better echo cancellation algorithm.
However the latest Safari11 and IOS11 webrtc support is insufficient. Safari uses the old H264 codec. Besides, teh IOS webrtc support uses and old API
An user can now choose the background image for his own chat.
Notice that this background image preference is locally stored on the computer.
If an user changes the computer or browser, this preference will be lost.
You can easily add some events into the calendar : you need to go to you chatadmin panel and click the calendar menu:
You can easily add some events.
Your users will see the calendar on the right top of the chat: when displaying it, they can click on the date to display details about the calendar event.
This is very simple:
Download the langage JSON resource from :
https://html5-chat.com/lang/en.json
You can also chose the french, spanish, german as start
ex: https://html5-chat.com/lang/frjson
Edit this file with your favorite editor and change the values (not the keys) ex:
"chooseAnUsername":"Choose an username",
Change the second part “Choose an username” to your own langage and simply send us your new JSON file: we will upload it to our server
Integration of html5-chat into vldpersonals
edit the .htaccess file and that line:
RewriteRule ^chatHtml5/?$ chatHtml5.php [L]
which means: your chat will be available on https://www.yoursite.com/chatHtml5
Create a blank chatHtml5.php file on root of your website / and paste the script
<?php
ini_set('display_errors', 1);error_reporting(E_ALL);
session_start();
if (!isset($_SESSION['username'])) {
header('Location:/');exit;
}
include('includes/config.php');
mysql_connect($conf['db_hostname'], $conf['db_username'], $conf['db_password']) or die();
mysql_select_db($conf['db_name']) or die("ERROR: Cannot SELECT the Database.");
function getAvatar($username) {
$get_pic = mysql_query("SELECT picture,joindate,member_id FROM vld_members WHERE username = '$username' LIMIT 1") or die(mysql_error());
while($got_pic = mysql_fetch_array($get_pic)) {
$members_image = $got_pic['picture'];
$member_joindate = $got_pic['joindate']; // this will be the members joindate from the members table
$member_id = $got_pic['member_id']; // this is the ID of the member you want to show the avatar
}
if ($members_image == '') {
$avatar = "/media/user_picture_none.gif"; // set here the path to the image that shows if user has no avatar uploaded
}else
{
$media = substr($member_joindate, -1, 1).'/'.
substr($member_joindate, -2, 1).'/'.
substr($member_joindate, -3, 1).'/'.
substr($member_joindate, -4, 1).'/'.
$member_id.'/';
$path = '/media/uploads/'.$media.'photo_'.$members_image;
$avatar = $path;
}
return $avatar;
}
$password = 'seccret Password';
$webmasterid = 'xxxxxxxx';
$json = json_encode(array(
'webmasterid'=>$webmasterid ,
'password'=>$password,
'username'=>$_SESSION['username'],
'gender'=>$_SESSION['profile_fields']['profile_gender1'],
'role'=>'user',
'image'=>$conf['virtual_path'].getAvatar($_SESSION['username'])
)
);
$encoded = file_get_contents("https://html5-chat.com/protect/".base64_encode($json));
?>
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Chat HTML5</title>
</head>
<body>
<script src="https://html5-chat.com/script/<?=$webmasterid?>/<?=$encoded?>"></script>
</body>
</html>
<?php
require 'vendor/autoload.php';
use \Firebase\JWT\JWT;
session_start();
if (!isset($_SESSION['username'])) {
header('Location:/');exit;
}
include('includes/config.php');
mysql_connect($conf['db_hostname'], $conf['db_username'], $conf['db_password']) or die();
mysql_select_db($conf['db_name']) or die("ERROR: Cannot SELECT the Database.");
function getAvatar($username) {
$get_pic = mysql_query("SELECT picture,joindate,member_id FROM vld_members WHERE username = '$username' LIMIT 1") or die(mysql_error());
while($got_pic = mysql_fetch_array($get_pic)) {
$members_image = $got_pic['picture'];
$member_joindate = $got_pic['joindate']; // this will be the members joindate from the members table
$member_id = $got_pic['member_id']; // this is the ID of the member you want to show the avatar
}
if ($members_image == '') {
$avatar = "/media/user_picture_none.gif"; // set here the path to the image that shows if user has no avatar uploaded
}else
{
$media = substr($member_joindate, -1, 1).'/'.
substr($member_joindate, -2, 1).'/'.
substr($member_joindate, -3, 1).'/'.
substr($member_joindate, -4, 1).'/'.
$member_id.'/';
$path = '/media/uploads/'.$media.'photo_'.$members_image;
$avatar = $path;
}
return $avatar;
}
$password = 'yourHTML5-chatPassword';
$webmasterid = 'yourHTML5WebmasterId',
$mysuer = array('webmasterid'=>$webmasterid , 'password'=>$password, 'username'=>$_SESSION['username'], 'gender'=>$_SESSION['profile_fields']['profile_gender1'], 'role'=>'user', 'image'=>$conf['virtual_path'].getAvatar($_SESSION['username']));
$encoded = JWT::encode($mysuer, $password);
?>
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Chat HTML5</title>
</head>
<body>
<script src="https://html5-chat.com/chat/<?=$webmasterid?>/<?=$encoded?>"></script>
</body>
</html>
You need of course to integrate the JWT libraries for that.
For PHP, we use for instance: https://github.com/firebase/php-jwt (if you use another langage, pick your library from jwt.io
<?php
require_once( 'inc/header.inc.php' );
require_once( BX_DIRECTORY_PATH_INC . 'design.inc.php' );
require_once( BX_DIRECTORY_PATH_INC . 'profiles.inc.php' );
bx_import('BxDolModuleDb');
function getUser() {
$iUserId = getLoggedId();
if (!$iUserId) {
header('Location:/');
exit;
}
$data = getProfileInfo($iUserId);
bx_import('BxDolMemberInfo');
$sThumbSetting = getParam('sys_member_info_thumb_icon');
$o = BxDolMemberInfo::getObjectInstance($sThumbSetting);
$sThumbUrl = $o ? $o->get($data) : '';
$bThumb = !empty($sThumbUrl);
$role = ($data['Role'] == 3) ? 'Administrator' : 'Member';
$gender = ($data['Sex'] == '') ? '--' : $data['Sex'];
if(empty($sThumbUrl)) {
$avatar = "Avatar is not available";
} else {
$avatar = $sThumbUrl;
}
if ($data['NickName']=='admin') {
$data['NickName'] = 'admin ';
}
return array('id'=>$iUserId, 'username'=>$data['NickName'], 'gender'=>$gender, 'avatar'=>$avatar, 'role'=>$role);
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webcam chat</title>
<style>
html,boby {
width: 100%;
}
#html5ChatContainer {
width: 100%;
position: fixed;
height:100%;
}
</style>
</head>
<body>
<?php
$user = getUser();
?>
<script src='<?=sprintf('https://html5-chat.com/script/1819/5a3a6189ec749/%s/%s/%s', $user['username'], $user['gender'], base64_encode($user['avatar']));?>'></script>
</body>
</html>