stb_webkit:faq:example

Содержание

Минимальная HTML страница. Запуск воспроизведения потока
"Событийная" модель
- - "event 1". Перезапрос потока
  - "event 1", "event 5". Перезапрос потока. Запуск воспроизведения файла
Мини портал
- - Пример использования
2D навигация
Восстановление видео-потока при отключении/подключении Ethernet
Получение информации о модели приставки
Изменение соотношения сторон при воспроизведении видео

Внимание! Рекомендуется ознакомится со следующим документом: Спецификация JavaScript API

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

Минимальная 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>

Запуск потока RTSP. Установка параметров RTSP-сервера. Запуск потока RTSP:

RTSP-сервер:

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

Подробнее об установке параметров RTSP-сервера (Раздел 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

"event 1". Перезапрос потока

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

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

Мини портал

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

Download mini-portal

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

Скачать архив. Распаковать в каталог вашего 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 навигация

Пример использования 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>

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

Периодически следует опрашивать состояние сети с помощью 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);

Получение информации о модели приставки

Для этого следует использовать две функции: gSTB.GetDeviceModel и gSTB.GetDeviceModelExt

Изменение соотношения сторон при воспроизведении видео

Для этого следует использовать функцию gSTB.SetAspect с указанием выбранного режима.

Например: gSTB.SetAspect(0x10) - установит режим «Fit on». Полное описание режимов доступно в документации.