Skip navigation

Examples of using API functions

Attention! It is strongly recommended to read next documents:

Minimal HTML page. Start playing the stream

Example 1.

Example of a minimal HTML page in which loading starts stream playing.

RTP stream running:

  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.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 - see Specification JS API (pdf), 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

Read more: - Event Model in JavaScript - see Specification JS API (pdf), page 83

Example 3.

The stream will be requested 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.
  • 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.

Mini Portal

Example 5

Example of “mini portal” which will be loaded with STB run. It allows playing a certain number of streams with the ability to control STB with remote control. The user interface is a page with IPTV channels logo with the ability to choose a channel for watching.

Download mini-portal (zip)

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

Setting a variable portal1 from the console using the utility fw_setenv :

fw_setenv portal1 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 and 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>

Restore video stream when disconnecting/connecting Ethernet

Example 8

Periodically, you should query the network status using gSTB.GetLanLinkStatus or gSTB.GetWifiLinkStatus and in case of halting recovery, start playback:

  Code 
// network status global flag 
var CURRENT_NETWORK_STATE = false;

setInterval(function(){
	var lan   = gSTB.GetLanLinkStatus(),
		wifi  = gSTB.GetWifiLinkStatus(),
		state = lan || wifi;
	// connection check
	if ( CURRENT_NETWORK_STATE !== state && state ) {
		// the network appeared
		CURRENT_NETWORK_STATE = true;
		
		// run video ...
		
	}
}, 5000);

Getting information about the console model

Example 9

You should use two functions: gSTB.GetDeviceModel

and gSTB.GetDeviceModelExt

Changing aspect ratio when playing video

Example 10

You should use the function gSTB.SetAspect with indicating the selected mode.
For example, function: gSTB.SetAspect(0x10)

set the "Fit on" mode. A full description of the modes is available in API specification.

Need Help

Dave is an expert on the MAG STB and the author of this article.

Was this article helpful?

Yes No

Sorry to hear that.
How can we improve this article?

Send
We use cookies in order to optimise our website, provide you with the best possible user experience and help us promote our products. Please read our Cookie Policy to find out how we use cookies and how you can control cookies.
By using this website or closing this message, you acknowledge our Privacy Policy and agree to our use of cookies as described in our Cookie Policy.