hbbtv
Version:
Nodejs implementation of the HbbTV Companion Screen
153 lines (150 loc) • 6.29 kB
HTML
<!--
/*******************************************************************************
*
* Copyright (c) 2015 Louay Bassbouss, Fraunhofer FOKUS, All rights reserved.
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 3.0 of the License, or (at your option) any later version.
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
*
* AUTHORS: Louay Bassbouss (louay.bassbouss@fokus.fraunhofer.de)
*
******************************************************************************/
-->
<html style="height: 100%; padding: 0; margin: 0;">
<head lang="en">
<meta charset="UTF-8">
<title>Companion Screen App</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/hbbtv-manager-polyfill.js"></script>
</head>
<body style="height: 96%; ">
<h3>Sample CS Web Application</h3>
<img src="//famalytics.fokus.fraunhofer.de/piwik.php?idsite=19&rec=1&action_name=demo-cs-app" style="border:0" alt="" />
<div style="float: left; width: 48%;">
<button id="discoverTerminalsBtn">Discover HbbTV Terminals</button>
<br>
<div id="info"></div>
<br>
<ul id="terminals">
</ul>
</div>
<div style="float: left; width: 48%; height: 90%">
<textarea id="log" style="width: 98%; height: 98%" disabled="true"></textarea>
</div>
<script type="text/javascript">
var log = function (msg) {
console.log(msg);
var logElem = $("#log");
logElem.val(logElem.val()+msg+"\n");
logElem.scrollTop(logElem[0].scrollHeight);
};
var parseParameters = function(query){
var dict = {};
if(query){
var params = query.split("&");
for (var i = 0; i < params.length; i++) {
var index = params[i].indexOf("=");
var key = index>-1?params[i].substr(0,index):params[i];
var value = index>-1?params[i].substr(index+1):"";
if(typeof dict[key] == "undefined"){
dict[key] = value;
}
else if(typeof dict[key] == "string"){
dict[key] = [dict[key],value];
}
else if(typeof dict[key] == "object"){
dict[key].push(value);
}
};
}
return dict;
};
var qualifyURL = function(url){
var a = document.createElement('a');
a.href = url;
return a.href;
};
var launchHbbTVApp = function (index) {
var terminal = terminals[index];
var options = {
"appId": 1,
"orgId": 2,
"appUrlBase": qualifyURL("hbbtv-app.html"),
"appLocation": "?channel="+channel
};
terminal && terminalManager.launchHbbTVApp(terminal.enum_id, options, function (res) {
log("launch app result code "+ res);
});
};
var connect = function (index,app2appURL) {
var terminal = terminals[index];
var app2appRemoteBaseUrl = terminal && terminal.X_HbbTV_App2AppURL || app2appURL;
var ws = new WebSocket(app2appRemoteBaseUrl + channel);
log("Connect to App2App Endpoint: "+ app2appRemoteBaseUrl + channel);
ws.binaryType = "arraybuffer";
ws.onopen = function(evt) {
log("Connection waiting ...");
};
ws.onclose = function(evt) {
log("Connection closed.");
};
ws.onerror = function (evt) {
log("Connection error.");
};
ws.onmessage = function(evt) {
if (evt.data == "pairingcompleted") {
log("connection paired");
ws.onmessage = function(evt) {
log( "Received Message: " + evt.data);
};
var data = "Hello from Companion Screen";
ws.send(data);
var array = [0,1,2,3,4,5,6,7,8,9];
data = typeof Buffer != "undefined"?new Buffer(array): new Int8Array(array).buffer;
ws.send(data);
} else {
log("Unexpected message received from terminal.");
ws.close();
}
};
};
var searchParameters = parseParameters(location.search.substr(1));
var channel = searchParameters.channel || "org.mychannel.myapp";
var terminalManager = hbbtv && hbbtv.createTerminalManager();
var terminals = [];
if(searchParameters.app2appURL){
log("it seems that this app is launched by remote from an HbbTV Application with remote App2App Endpoint: "+searchParameters.app2appURL);
log("Create WS connection "+searchParameters.app2appURL+channel);
connect(-1,searchParameters.app2appURL);
}
$("#discoverTerminalsBtn").click(function () {
$("#info").html("Searching for HbbTV Terminals: please wait ...");
$("#terminals").empty();
$("#discoverTerminalsBtn").attr("disabled", true);
terminalManager.discoverTerminals(function (discoveredTerminals) {
terminals = discoveredTerminals;
$("#discoverTerminalsBtn").attr("disabled", false);
$("#info").empty();
$(terminals).each(function (i,terminal) {
$("#terminals").append("<li id='"+i+"'>"+terminal.friendly_name+" <button class='launch' onclick='launchHbbTVApp("+i+")'>Launch</button> <button class='connect' onclick='connect("+i+")'>Connect</button> <div class='log'></div></li>");
});
if(terminals.length==0){
$("#info").html("No HbbTV Terminals found. Click on the discover button to search again");
}
log(terminals.length+" HbbTV terminals found");
});
});
</script>
</body>
</html>