translate

How to translate html5 chat into your langage ?

You want to get html5 chat translated into your own langage ?

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

 

 

 

 

 

VLD

html5 + vldpersonals: how to add html5 chat into vldpersonals

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>

 

 

 

 

 

OLD version of VLD

<?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

 

 

 

html5 + boonex: how to integrate webcam chat with boonex ?

Here is a sample code on how to add html5-chat into boonex in full screen

 

<?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>
Users

How to secure pass user data into html5-chat with JWT ? (updated)

How to secure pass user data into html5-chat with JWT.io?

We have chosen the jwt.io solution since that encryption library exists for any platform and development tool.

How to encode our user using JWT.IO lib ?

For better security, we do recommend using this method to encode your user data.

List of Parameters to be encoded

webmasterid*: your webmasterid token

password*: your password. It must be md5 encoded like:  md5(‘myPassword’);

username*: username of the user

gender: Gender of user: must fit the genders defined in chatadmin – : male, female, couple By default is male

role: Role of the user: can be : admin, moderator, dj, user By default is user

image :Image or Avatar of the user : must be a link (https) to url of an image By default is random avatar. Use base64_encode to avoid problems if your image uses chars such as ?&

startRoom: Default roomid when enter the chat By default is the first room (roomid is an integer number)

So you do create your user like in php as an array:


            $passwordMD5 = md5('secretPassword');
            $webmasterid= XXX;
            $user = array('webmasterid'=>$webmasterid, 'password'=>$passwordMD5 , 'username'=>'John', 'gender'=>'male', 'startRoom'=>5, 'role'=>'user', 'image'=>base64_encode('https://html5-chat.com/img/avatars/m/13.svg'));
        

Then you need to create an encrypted TOKEN from that user.
For that, we use jwt.io library
For PHP, we use for instance: https://github.com/firebase/php-jwt (if you use another langage, pick your library from jwt.io


Let do it with PHP

 

Step1: encode the user with JWT::encode

Create the $user array and encode it


    $password = 'secretPassword';
    $passwordMD5 = md5($password);
    $webmasterid= XXX;
   $user = array('webmasterid'=>$webmasterid, 'password'=>$passwordMD5, 'username'=>'John', 'gender'=>'male', 'startRoom'=>5, 'role'=>'user', 'image'=>base64_encode('https://html5-chat.com/img/avatars/m/13.svg')); $encodedUser = JWT::encode($user, $password); 
As result, $encodedUser will contain base64 long encrypted string (encrypted user)

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3ZWJtYXN0ZXJpZCI6IjEiLCJwYXNzd29yZCI6InlhcmVrYyIsInVzZXJuYW1lIjoiSm9obiIsImdlbmRlciI6Im1hbGUiLCJyb2xlIjoidXNlciIsImltYWdlIjoiaHR0cHM6XC9cL2h0bWw1LWNoYXQuY29tXC9pbWdcL2F2YXRhcnNcL21cLzEzLnN2ZyJ9.8mPMCKnDRMrupsHRQw5ArXmyhh4oQBNcumKDCgO5TdQ

Step2 : use that encoded script into your script

The pattern is:

        https://html5-chat.com/chat/{webmasterid}/{encryptedUser}
  • Directly to access your chat with link
    
                    https://html5-chat.com/{webmasterid}/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3ZWJtYXN0ZXJpZCI6IjEiLCJwYXNzd29yZCI6InlhcmVrYyIsInVzZXJuYW1lIjoiSm9obiIsImdlbmRlciI6Im1hbGUiLCJyb2xlIjoidXNlciIsImltYWdlIjoiaHR0cHM6XC9cL2h0bWw1LWNoYXQuY29tXC9pbWdcL2F2YXRhcnNcL21cLzEzLnN2ZyJ9.8mPMCKnDRMrupsHRQw5ArXmyhh4oQBNcumKDCgO5TdQ            
  • Integrate your chat with a script:
    
                    <script src="https://html5-chat.com/script/{webmasterid}/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3ZWJtYXN0ZXJpZCI6IjEiLCJwYXNzd29yZCI6InlhcmVrYyIsInVzZXJuYW1lIjoiSm9obiIsImdlbmRlciI6Im1hbGUiLCJyb2xlIjoidXNlciIsImltYWdlIjoiaHR0cHM6XC9cL2h0bWw1LWNoYXQuY29tXC9pbWdcL2F2YXRhcnNcL21cLzEzLnN2ZyJ9.8mPMCKnDRMrupsHRQw5ArXmyhh4oQBNcumKDCgO5TdQ"></script>            

how to upload images ?

You can now upload images in html5-chat

upload

New features now allows you to UPLOAD your own images.

Max size of image is set to 50 Kbytes to avoid abuses.

upload

As usual, fo to your panel admin and choose the config tab.

 

Check the Allow users to upload images into the chat checkbox.

Enter your chat: you will now be able to upload your OWN images into the chat !

 

 

 

new Feature: GIF search emoticons

Gif animated searchable emoticons for your  chat

gif search
gif search

New exciting feature: search and add GIFs from GIFY services: Millions of ready to go animated gifs are waiting for you: so make your chat even funnier than before.
Just type in the keyword and you will get millions of ready to use GIFs.
You will be able to add as many emoticons you want into your chat.