TFX is a modular widget based WebRTC communication and collaboration solution. It is a customizable solution where developers can create and add their own widget over the underlying WebRTC communication mechanism . It can support extensive set of user activity such as video chat , message , play games , collaborate on code , draw something together etc . It can go as wide as your imagination . This post describes the process of creating widgets to host over existing TFX platform .
Prerequisites
It is required to have TFX Chrome extension installed and running from Chrome App Store under above . To do this follow the steps described in TangoFX v0.1 User’s manual.
Test TFX Sessions ?
TFX Sessions uses the browser’s media API’s , like getUserMedia and Peerconnection to establish p2p media connection . Before media can traverse between 2 end points the signalling server is required to establish the path using Offer- Answer Model . This can be tested by making unit test cases on these function calls .
TFX Sessions uses socketio based handshake between peers to ascertain that they are valid endpoints to enter in a communication session . This is determined by SDP ( Session Description Parameters ) . The same can be observed in chrome://webrtc-internals/ traces and graphs .
How to make widgets using TFX API ?
Step 1: To make widgets for TFX , just write your simple web program which should consist of one main html webpage and associated css and js files for it .
Step 2 : Find an interesting idea which is requires minimal js and css . Remember it is a widget and not a full fleshed web project , however js frameworks like requirejs , angularjs , emberjs etc , work as well.
Step 3: Make a compact folder with the name of widget and put the respective files in it. For example the html files or view files would go to src folder , javascript files would goto js folder , css files would goto css folder , pictures to picture folder , audio files to sound folder and so on .
Step 4 : Once the widget is performing well in standalone environment , we can add a sync file to communicate the peer behaviors across TFX network . For this we primarily use 2 methods .
- SendMessage : To send the data that will be traversed over DataChannel API of TFX . The content is in json format and will be shared with the peers in the session .
- OnMessage : To receive the message communicated by the TFX API over network
Step 5: Submit the application to us or test it yourself by adding the plugin description in in widgetmanifest.json file . Few added widgets are
[
{
"plugintype": "code",
"id" :"LiveCode",
"type" : "code",
"title" : "Code widget",
"icon" : "btn btn-style glyphicon glyphicon-tasks",
"url" : "../plugins/AddCode/src/codewindow.html"
},
{
"plugintype": "draw",
"id" :"Draw",
"type" : "draw",
"title" : "Code widget",
"icon" : "btn btn-style glyphicon glyphicon-pencil",
"url" : "../plugins/AddDraw/src/drawwindow.html"
},
{
"plugintype": "pingpong",
"id" :"Pingpong",
"type" : "pingpong",
"title": "ping pong widget",
"icon" : "btn btn-style glyphicon glyphicon-record",
"url" : "../plugins/AddPingpong/src/main.html"
}
]
Step 6 : For proper orientation of the application make sure that overflow is hidden and padding to left is atleast 60 px so that it doesnt overlap with panel
padding-left: 60px;
overflow: hidden;
Step 7 : Voila the widget is ready to go .
Simple Messaging Widget
For demonstration purpose I have summarised the exact steps followed to create the simple messaging widget which uses WebRTC ‘s Datachannel API in the back and TFX SendMessage & OnMessage API to achieve
Step 1 : Think of a general chat scenario as present in various messaging si
Step 2: Made a folder structure with separation for js , css and src. Add the respective files in folder. It would look like following figure:
Step 3 : The html main page is
<html> <head> <!-- jquerry --> <script src="../../../../js/jquery/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="../../../../css/jquery-ui.min.css"/> <link rel="stylesheet" type="text/css" href="../css/style.css"> </head> <body> <div id="messages" class="message_area"> <textarea disabled class="messageHistory" rows="30" cols="120" id="MessageHistoryBox"></textarea> <br/> <input type ="text" id="MessageBox" size="120"/> </div> </body> <script src="../js/sync.js" type="text/javascript"></script> </html>
Step 4 : The contents of css file are
body {padding: 0; margin: 0; overflow: hidden;}
.message_area{
padding-left: 60px;
}
.messageHistory{
background-color: transparent;
background: transparent;
}
Step 5 : The contents of js file
//send message when mouse is on mesage dicv ans enter is hit
$("#messages").keyup(function(event){
if(event.keyCode == 13){
var msg=$('#MessageBox').val();
//send to peer
var data ={
"msgcontent":msg
}
sendMessage(data);
addMessageLog(msg);
$("#MessageBox").val('');
}
});
function addMessageLog(msg){
//add text to text area for message log for self
$('#MessageHistoryBox').text( $('#MessageHistoryBox').text() + '\n'+ 'you : '+ msg);
}
// handles send message
function sendMessage(message) {
var widgetdata={
"type":"plugin",
"plugintype":"relaymsg",
"action":"update",
"content":message
};
// postmessage
window.parent.postMessage(widgetdata,'*');
}
//to handle incoming message
function onmessage(evt) {
//add text to text area for message log from peer
if(evt.data.msgcontent!=null ){
$('#MessageHistoryBox').text( $('#MessageHistoryBox').text() +'\n'+ 'other : '+ evt.data.msgcontent );
}
}
window.addEventListener("message",onmessage,false);
Step 6: The end result is :
Developing a cross origin Widget ( XHR)
Let us demonstrate the process and important points to create a cross- origin widget :
step 1 : Develop a separate web project and run it on a https
step 2 : Add the widget frame in TFX . Following is the code I added to make an XHR request over GET
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","https://192.168.0.119:8000/TFXCrossSiteProj/files/document1.txt",true);
xmlhttp.send();
step 3 : Using self made https we have have to open the url separately in browser and give it explicit permission to open in advanced setting. Make sure the original file is visible to you at the widgets url .
step 4: Adding permission to manifest for access the cross origin requests
"permissions": [ "tabs","http://*.google.com/", "https://192.168.0.119:8000/TFXCrossSiteProj" ],
Step 5 : Rest of the process are similar to develop a regular widget ie css and js .
Step 6: Resulting widget on TFX
Note 1 :
In absence of changes to manifest file the cross origin request is meet with a Access-Control-Allow-Origin error .
Note 2:
While using POST the TFX responds with Failed to load resource: the server responded with a status of 404 (Not Found)
Note 3:
Also if instead of https http is used the TFX still responds with Failed to load resource: the server responded with a status of 404 (Not Found)
Telecom R & D 