Примеры применения функций API | Для разработчиков STB Linux&WebKit API. Разработка приложений для STB

Внимание! Рекомендуется ознакомиться со следующим документами:

Минимальная HTML страница. Запуск воспроизведения потока

Пример 1. Запуск потока RTP

Минимальная HTML страница, при запуске которой воспроизводится указанный поток.

Запуск потока RTP:

Код

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

Пример 2. Запуск воспроизведения потока RTSP

Минимальная HTML-страница. Запуск воспроизведения потока RTSP с заданными параметрами RTSP-сервера.

RTSP-сервер:

Тип сервера 4 - Live555;
Управляющий флаг: 32 (0x20) – использовать UDP транспорт для передачи видео;
1 – включить режим поддержания соединения (keep-alive).

Подробнее об установке параметров RTSP-сервера - Спецификация JavaScript API для MAG100,MAG200 (Rev 1.20) (Раздел stb.SetupRTSP стр. 37)

Код

<!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); //Параметры RTSP-сервера
        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>

'Событийная' модель

Подробнее: Спецификация JavaScript API для MAG100,MAG200 (Rev 1.20) - Событийная модель в JavaScript стр. 87 (pdf)

Пример 3 Перезапрос потока

При получении события «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>

Пример 4. "event 1", "event 5". Перезапрос потока. Запуск воспроизведения файла

При получении событий «event 1», «event 5» - поток запрашивается. В указанное время <var check_time> запускается воспроизведение файла <var fileName> из корневого каталога USB-носителя подключенного к STB. По окончании воспроизведения файла либо при его отсутствии запрашивается воспроизведение указанного потока <var streamURL>

var check_time - Время в формате 24h
var streamURL - Адрес потока
var fileName - Имя файла на USB-носителе

Код

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

Пример реализации

Подключитесь к STB через SSH.
login - root
pswd - 930920`
Запустите команды:

mv /home/web/services.html /home/web/services.html.old
vi /home/web/services.html

Скопируйте код страницы HTML в services.html
Выйдите из редактора «vi» с сохранением.
Перезагрузите STB:

reboot

В этом случае HTML-страница <services.html> будет загружена в STB без главного меню внутреннего портала.

Мини портал

Пример 5

Пример «мини-портала», который можно запускать при старте приставки. Он позволяет проигрывать определенное кол-во потоков с возможностью управления приставкой с пульта ДУ. Пользовательский интерфейс представляет из себя страницу состоящую из логотипов IPTV каналов с возможностью выбора желаемого канала для просмотра.

Download mini-portal (zip)

Пример использования

Скачать архив. Распаковать в каталог вашего Web-сервера. Файлы должны быть доступны по адресу, например: http://your_ip_or_domain_name/mini_portal/index.html

Для тестового запуска:

Зайти на приставку по SSH.
login: root
pswd: 930920
выполнить команды:

killall stbapp
/usr/share/qt-4.6.0/stbapp -qws -display directfb http://your_server/mini_portal/index.html

Либо установить переменную бутлоадера portal1 - в этом случае при загрузке STB вместо внутреннего портала будет загружаться внешний портал по адресу: http://your_server/mini_portal/index.html
.

Установка переменной portal1 из консоли при помощи утилиты fw_setenv :

fw_setenv portal1 http://your_server/mini_portal/index.html

2D навигация

Пример 6

Пример использования 2D-навигации

Код

<!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 и уровня сигнала

Пример 7

Код

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

Восстановление видео-потока при отключении/подключении Ethernet

Пример 8

Периодически следует опрашивать состояние сети с помощью gSTB.GetLanLinkStatus или gSTB.GetWifiLinkStatus и в случае восстановления после сбоя запускать воспроизведение:

Код

// глобальный флаг состояния сети
var CURRENT_NETWORK_STATE = false;

setInterval(function(){
	var lan   = gSTB.GetLanLinkStatus(),
		wifi  = gSTB.GetWifiLinkStatus(),
		state = lan || wifi;
	// проверка подключения
	if ( CURRENT_NETWORK_STATE !== state && state ) {
		// сеть появилась
		CURRENT_NETWORK_STATE = true;
		
		// запускаем видео ...
		
	}
}, 5000);