stb_webkit:faq:example_api []

Содержание

Минимальная 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». Полное описание режимов доступно в документации.

Боковая панель

Навигация

Контакты

Работа

Cсылки по теме

Содержание

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

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

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

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

Мини портал

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

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

2D навигация

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

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

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

Инструменты пользователя

Инструменты сайта

Боковая панель

Навигация

Контакты

Работа

Cсылки по теме

Содержание

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

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

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

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

Мини портал

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

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

2D навигация

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

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

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

Инструменты страницы