Minimal HTML page. Start playing the stream.
- Example 1.
- Example 2.
Event Model
- Example 3.
- Example 4.
  - - Example of realization
Mini Portal
- Example 5.
  - - Example "How to use"
2D Navigation
- Example 6.
DVB tunning / level of signal
- Example 7.

Attention! It is strongly recommended to read next document: JavaScript API for controlling IPTV devices

Minimal HTML page. Start playing the stream.

Example 1.

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>

Example 2.

Minimal HTML page. Starting playback stream RTSP, with preset parameters RTSP-server.

RTSP-server:

Server type: 4 - Live555;
Control flags: 32 (0x20) – Use UDP transport to send video:
1 – switch on the keep-alive mode.

More details about setting parameters RTSP-server (Section stb.SetupRTSP page 35)

Code

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

Event Model

Example 3.

The stream will be requests again if there is “event 1”.

Code

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

Example 4.

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.

var check_time - Time in 24h format
var streamURL - Stream address
var fileName - File name on USB-storage

Code

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

Example of realization

Connect to STB via SSH.

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.

Mini Portal

Example 5.

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 mini-portal

Example "How to use"

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

For the test run

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

2D Navigation

Example 6.

Example of using 2D-navigation

Code

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

DVB tunning / level of signal

Example 7.

Code

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

Table of Contents

Minimal HTML page. Start playing the stream.

Example 1.

Example 2.

Event Model

Example 3.

Example 4.

Example of realization

Mini Portal

Example 5.

Example "How to use"

For the test run

2D Navigation

Example 6.

DVB tunning / level of signal

Example 7.