webrtcConference

New webrtc servers : new webrtc technology

webrtc

New webrtc mediasoup servers technos

We finally dropped 2 webrtc technologies:

Kurento: the CPU usage was too high

Janus: too many “black cams”

and we have chosen mediaSoup which represents an excellent compromise of reliability and compatibility.

This allows us to keep CPU light and be compatible with ALL available browsers:

Chrome, firefox, Safari, IOS and Android.

We do not support Edge because Edge is end game and will be replaced by Chromium in 2019

Notice that for IOS, only Safari 12.2 and above will allow users to stream and watch streams

 

wowonder

html5 chat and wowonder script

How to integrate html5 chat with social wowonder script ?

Edit .htaccess and add that line

RewriteRule ^html5-chat$ index.php?link1=html5-chat [NC,QSA]

 

Edit index.php and add these lines

case 'html5-chat':
    include('sources/html5-chat.php');
    break;

 

create sources/html5-chat.php  :

 

<?php if (empty($wo['user'])) {
    header("Location: " . Wo_SeoLink('index.php?link1=welcome'));
    exit();
}
$webmasterid = YOUR_WEBMASTERID;
$password = 'YOUR_SCRIPT_CHAT_PASSWORD';
$user = array(
    'id'=>$wo['user']['user_id'],
    'username'=>$wo['user']['username'],
    'image'=>base64_encode($wo['user']['avatar']),
    'gender'=>$wo['user']['gender'],
    'role'=>($wo['user']['admin']==1)?'admin':'user';
    'password'=>$password
);
$encrypted = file_get_contents("https://html5-chat.com/protect/".base64_encode(json_encode($user)));
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat</title>
</head>
<body>
    <script src="https://html5-chat.com/script/<?=$webmasterid?>/<?=$encrypted?>"></script>
</body>
</html>
<?php exit();?>

Just change these 2 parameters:

YOUR_WEBMASTERID : your script webmasterid

YOUR_SCRIPT_CHAT_PASSWORD : your script password

then navigate to : https://www.yoursite.com/html5-chat.php

Regards

Wix and html5 chat

wixHow to integrate html5-chat into Wix ?

 

Wix a a very popular CMS hosted system used by millions of websites.
It is very easy to manage for people who do not have any computer knowledge.

Problem is, you cannot integrate html5-chat into wix: The reason for that limitation is that Wix does not allow neither to insert html code nor Js into his pages, or more precisely, it creates a sandbox iframe to embed the html or JS.

Problem of that iframe, is that this iframes does not have rights to access webcam : now days moderne browsers needs special permissions on iframe to access features as webcam, micro or geolocation.

The only way to have its own html5 chat on wix platform is to create an external link (target=”_blank”) that points to our chat:

<a href ="https://html5-chat.com/chat/yourWebmasterid" target="_blank">My own chat</a>

We hope Wix will chnage that soon.

 

Push to talk feature

(Updated) feature: Push to Talk

TalkieWe have rewritten the “Push to talk” feature of html5 chat.

The push to talk feature looks like the talkie-walkie system: there can be only one speaker at one time.

When speaker takes the hand, no other people can speak until the first speaker releases the hand. your chatadmin can determine which role can take the hand, how long he can keep the hand and what is the release time he needs to wait until he can speak again : these rules created to prevent abuses.

When a speaker takes the hand, he broadcast his video and audio to all users, in the similar way that the broadcast system.

We also put a checkbox for push to talk feature, so users can check this box to keep the hand (and avoid keep on pressing the mouse which can be finger tiring)

The push to talk buttons are situated on the left bottom part of the chat, near the input text chat.

pushtotalk

 

 

 

CSS customize your html5 chat

We added a CSS for HTML5 chat so you can customize every DOM element on your chat.

Go to your chat admin, choose the CSS editor.

cssEditor

 

How to use the CSS editor ?

Click on Select DOM checkbox, then click on any element on your chat.

You can change the CSS of that element such as : font, text, Border, Paddings & Margins, Position, Background and Additional css.

Once the rule is set, press the save css button to save the css

 

How to customize all your texts (or translations) ?

How to use your own texts (or translate it the way you want) ?

We just added a new “translation” feature into your /chatadmin panel.

You can now change ANY texts you want, the way you want: so it is easy to add new langage support or change the translations we provide.

(this feature is available only for registered users)

How to proceed ?

  • go to you chatadmin
  • Choose translation tab
  • Enter your OWN text instead of the one we have
  • In case you make some errors, you can still revert back to our translations and start again
    Make sure you don’t mess with specials chars such as “%” : %s is used to be replaced by dynamic content
  • translate
    translate

Vp8 and H264 codec which one should I use ?

Html5 chat supports now H264 and vp8 codecs

For now, we only used H264 to support Safari.

Unfortunately H264 is very old codec  and has some big drawbacks:

  • bigger bandwidth consumption
  • lower quality
  • lower reliability

Vp8 has all qualities except.. it is not supported on Safari.

You can choose the codec selection form the config/webcam chatadmin panel

What about Microsoft Edge ?

Forget Edge compatibility for now, since Edge will be based on Chromium from early 2019 and thus will have vp8

Notice that we will add new vp9 soon that will increase quality of video. Of course Vp9 is not supported by safari.

Notice that soon, all majors browsers should adopt AV1, that will end the war between all these codecs.

How should broadcast behave ?

New broadcast features

You can now decide how the broadcast behaves. The broadcast feature allows to chatter to broadcast his webcam stream to all users.

You can enable the broadcast feature per gender (gender panel) or per roles (roles panel)

Th default behaviour when an user was broadcasting his stream was to open automatically his webcam for all connected users.

You can now choose between 3 different behaviours

  1. opens: this is the default behaviour and as described above, it opens webcam panel for all connected users
  2. chat warn: you will receive the notification that an user streams his webcam inside the chat panel
  3. notification warn: you will receive the notification that an user streams his webcam inside a small popup

You can also specify the JS function to be called when broadcasts starts and ends:

jsCallBackStartBroadcast: function name to be called when broadcast starts

jsCallBackStopBroadcast: function name to be called when broadcast ends