Attention! It is strongly recommended to read next document: JavaScript API for controlling IPTV devices
Example of minimal HTML page which load and perform the stream's playing (RTP in this case).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title></title> <script> var stb = gSTB; function init() { stb.InitPlayer() stb.Play("udp://239.1.1.1:1234") } function getkeydown(e) { ec = e.keyCode ew = e.which es = e.shiftKey pat = /^(\S+)_(\S+)/ switch (ew) { case 114: // Play stb.Play("udp://239.1.1.1:1234") break; case 115: // Stop stb.Stop() break; } } </script> <body onload="init()" onKeyDown="getkeydown(event)"> </body> </html>
Minimal HTML page. Starting playback stream RTSP, with preset parameters RTSP-server.
RTSP-server:
More details about setting parameters RTSP-server (Section stb.SetupRTSP page 35)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title></title> <script> var stb = gSTB; function init() { stb.InitPlayer(); stb.SetupRTSP(4, 33); //Set parameters of RTSP-server stb.Play("rtsp://example.com/example.stream"); } function getkeydown(e) { ec = e.keyCode ew = e.which es = e.shiftKey pat = /^(\S+)_(\S+)/ switch (ew) { case 114: // Play stb.Play("rtsp://example.com/example.stream") break; case 115: // Stop stb.Stop() break; } } </script> <body onload="init()" onKeyDown="getkeydown(event)"> </body> </html>
The stream will be requests again if there is “event 1”.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title></title> <script> var stbEvent = { onEvent : function (event) { stb.Debug(event); if (event == 1) { stb.Play("udp://239.1.1.1:1234") } }, event : 0 } var stb = gSTB; function init() { stb.InitPlayer() stb.Play("udp://239.1.1.1:1234") } </script> <body onload="init()" onKeyDown="getkeydown(event)"> </body> </html>
The stream will be requests again if there are “event 1” and “event 5”. In current time <var check_time>
the file <var fileName>
begins to play from the root directory of USB-storage which connected to STB. When the file stops to play (or there is no file) then the stream <var streamURL>
requests to play.
<<< <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title></title> <script language="JavaScript" src="event.js"></script> <script> var stb = gSTB; var time = new Date(); //********************************************************************************* var check_time = 12; //Set start adv time here (hour) var streamURL = 'udp://239.1.1.1:1234'; //Set channel (stream) url here var fileName = 'Peter Ilyich Tchaikovsky - Erich Kunzel - Cincinnati Pops Orchestra - Tchaikovsky 1812 Overture (Hybrid SACD).flac'; //Set adv file name here //********************************************************************************* var adv_timer = null; var adv_isPlaying = false; var stbEvent = { onEvent : function (event) { stb.Debug(event); if (event == 1 || event == 5) { stb.Play(streamURL); } }, event : 0 } function init() { stb.InitPlayer(); time = new Date(); if (time.getHours() == check_time) { eval('var usbs = ' + stb.RDir("get_storage_info")); stb.Stop(); console.log(usbs[0].mountPath + '/' + fileName); stb.Play('ffmpeg ' + usbs[0].mountPath + '/' + fileName); adv_isPlaying = true; } else { stb.Play(streamURL); } adv_timer = window.setInterval(function () { time = new Date(); if (time.getHours() == check_time) { eval('var usbs = ' + stb.RDir("get_storage_info")); stb.Stop(); stb.Play('ffmpeg ' + usbs[0].mountPath + '/' + fileName); adv_isPlaying = true; } }, 3600000) } </script> <body onload="init()" onKeyDown="getkeydown(event)"> </body> </html>
Connect to STB via SSH.
login - root
pswd - 930920
Run the commands:
mv /home/web/services.html /home/web/services.html.old vi /home/web/services.html
To copy the code of HTML page in services.html
Quit from “vi” editor with saving.
Reboot STB:
reboot
In this case HTML page <services.html> will be loaded with STB without main menu of the inner portal.
Example of “mini portal” which will be loaded with STB run. It allows to play a certain number of streams with the ability to control STB with remote control. The user interface is a page with IPTV channels logo and ability to choose channel for watching..
Download the file. Unzip the file into your Web-server catalog. Those files must be available, for example: http://your_server/mini_portal/index.html
To connect STB via SSH.
login: root
pswd: 930920
Run the commands:
killall stbapp /usr/share/qt-4.6.0/stbapp -qws -display directfb http://your_server/mini_portal/index.html
Example of using 2D-navigation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="button/html; charset=UTF-8"> <title></title> <script> //gSTB.EnableSpatialNavigation(true); var curelem=0, itemsAtLine=3; function getkeydown(e){ console.log(); switch(e.keyCode || e.which){ case 37: if(curelem){ curelem--; } document.getElementsByClassName("elem")[curelem].focus(); break; case 39: if(curelem<document.getElementsByClassName("elem").length-1){ curelem++; } document.getElementsByClassName("elem")[curelem].focus(); break; case 38: if(curelem){ curelem-=itemsAtLine; } document.getElementsByClassName("elem")[curelem].focus(); break; case 40: if(curelem<document.getElementsByClassName("elem").length - itemsAtLine){ curelem+=itemsAtLine; } document.getElementsByClassName("elem")[curelem].focus(); break; } } </script> </head> <body onKeyPress="getkeydown(event)" style="background-color:#fff;"> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> <input type="button" value="button" class="elem" style="width:200px;"/> </body> </html>
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script> var curCh = 0; var stbEvent= { onEvent : function(data){}, event : 0 } var signalTm=0 function Info() { gSTB.SetTopWin(0); signalTm = setInterval(UpdateSignalInfo,1000); } function UpdateSignalInfo() { var level, quality, ber level = dvbManager.GetSignalLevel(); quality = dvbManager.GetSignalQuality(); document.getElementById('level').style.width = level + "%"; document.getElementById('quality').style.width = quality +"%"; ber = dvbManager.GetBitErrorRate(); ber1 = ber/100000; if(ber1 > 100) ber1 = 100; document.getElementById('ber').style.width = ber1+"%"; document.getElementById('ber').innerHTML = "BER: "+ ber; gSTB.Debug("level: "+ level + " quality: " + quality + " ber: " + ber); } function keyDown(e) { gSTB.Debug('which '+e.which); switch(e.which) { case 116: //refresh location=location; break; } } function onTimer() { } function OnTune() { gSTB.Debug("dvbManager.TuneChannel("+document.getElementById("TuneId").value+",3)") dvbManager.TuneChannel(document.getElementById("TuneId").value,3); Info() } function OnUnTune() { dvbManager.UnTuneChannel(); clearInterval(signalTm); } </script> <style type="text/css"> body { background:#fff; padding:75px; } .bar{ background-color:green; height:50px; } </style> </head> <body bgcolor="beige" onKeyPress="keyDown(event);" onload="gSTB.InitPlayer();"> <div id="debug"></div><div id="duration"></div> <div id="signal" style="position:absolute; top:200px;left:200px;width:300px"> <div>Level<div id="level" class="bar" ></div></div> <div>Quality<div id="quality" class="bar"></div></div> <div id="berH">BER<div id="ber" class="bar"></div></div> </div> <div id="scan"></div> <input id="TuneId" type="text" value="650000"> <input type="button" value="Tune" onclick="OnTune()"> <input type="button" value="UnTune" onclick="OnUnTune()"> </body> </html>