Frequently asked questions

Archive filtered by JS-API

To remove filter keyword, click on it's name above.

GENERALQ: What is the API?

A: The API (Application Programming Interface) specifies how software and hardware components interact with each other. The ABOX42 JS-API (JavaScript-API) consists out of 3 main categories: Media, Display and Common. See the IDE for further details.

 

M30Q: How can I set the z-index of a video with the JS-API?

A: There's no possibility or trick to get the video stacked on top of the other elements. Only if you are using the HTML5 video-element instead of the JS-API you can do that. Instead, you can work with a mask as you can find it in the Developer IDE.

Filter: HTML5 M30

M30Q: Is it possible to detect that a stream is interrupted and restart it automatically?

A: Yes, this can be accomplished by adding an event listener which reacts to this event with a specific action you can define yourself. Take a look at the following API call: addEventListener

Filter: M30 media class API

M30Q: Using media.play does not work, what am I doing wrong?

A: Before you can use media.play you will have to initialize the media and display object, using the following functions:



It might be that you have a non-transparent background. Please set the background to transparent. It might also be that the screen is hidden by a HTML object. You can set the opacity to 0.5 for these objects. For example, you can set the the opacity of the body tag to opacity:0.5:



so the video will shine through. Then you will be able to find out if the video is really played on the device. If it is, you will have to change something about your HTML. Otherwise, try to find out why media.play does not work.

Filter: ABOX42 Showcases M30 media class API

M30Q: How can I store data on the box?

A: There are several possibilities:

Cookies are best when you want to store litte data (e.g. session keys).

Storage via HTML5 LocalStorage is also available.

- Storage via local SQLite database is another possibility you should look at.

- Play content from a USB storage device.

Filter: ABOX42 Showcases M30 media class API

M30Q: How do I initialize JS-API objects correctly?

A: "Part 5" of Chapter III will show you how to initialize JS-API objects correctly.

Filter: ABOX42 Showcases Hello World M30

M30Q: How can I enhance the UI of my application?

A: We prepared some examples, called "UI Examples" with different button sets, menu items and so forth in the Developer IDE. Take a look at "Chapter IV - UI Elements" now.

Note: These examples are best viewed directly on the box. To do so, go to each part and start the application by pressing on "View on Box".

Filter: ABOX42 Showcases M30 UI Elements

M30Q: How do I add links with onclick media events?

A: We prepared an example for this question - Chapter III - Part 6 provides an answer to your question.

Filter: ABOX42 Showcases Hello World M30

M30Q: How do I initialize JS-API objects correctly?

A: "Part 5" of Chapter III will show you how to initialize JS-API objects correctly.

Filter: ABOX42 Showcases Hello World M30

M30Q: How can I create a simple “Hello World” app?

A: "Chapter II - Hello World with HTML5 video object" provides an answer to this question. A simple instruction for your first application. In "Chapter III - Hello World with JS-API video object" you learn how to use the JavaScript API to play videos instead of the HTML5 video object.

Filter: ABOX42 Showcases Hello World HTML5 M30

M30Q: Is there a way to set the audio track or audio PID of my stream manually?

A: Yes, therefore we have a call in our JS-API called "setConfig" which allows you to set different parameter for the playout of your stream.

Filter: M30

M30Q: How can I set (or retrieve) the parameters for the playout of my stream?

A: You can either set the parameters with the JS-API "play" call directly or you can use the "setConfig" call for further parameters. Please visit the individual call in the Developer IDE. When you want to retrieve the parameters set, you can do so using "getConfig".

Filter: M30 media class API

M30Q: What is the difference of the commands inside the Mobile Workbench and those commands presented in the section “JS-API” on the ABOX42 developer website?

A: There should be no differences regarding the way the functions work. Using the REST API is similar to calling the commands from the Javascript API, with the difference that you can call these javascript commands from a remote device now.

Filter: ABOX42 Mobile App M30 Mobile Toolkit REST-API

M30Q: Using media.play does not work, what am I doing wrong?

A: Before you can use media.play you will have to initialize the media and display object, using the following functions:



It might be that you have a non-transparent background. Please set the background to transparent. It might also be that the screen is hidden by a HTML object. You can set the opacity to 0.5 for these objects. For example, you can set the the opacity of the body tag to opacity:0.5:



so the video will shine through. Then you will be able to find out if the video is really played on the device. If it is, you will have to change something about your HTML. Otherwise, try to find out why media.play does not work.

Filter: ABOX42 Showcases M30 media class API

M30Q: What is “gridJS”?

A: "gridJS" is a javascript library which makes it easy to setup horizontal and vertical navigations for HTML lists, solving the difficulties a regular browser might have with cursor key navigation in HTML. It provides hooks for different use cases. Take a look at Chapter IV - Part 1 to see an introduction to gridJS.

Filter: ABOX42 Showcases M30

M30Q: What is the best way to learn about the gridJS library that you are offering?

A: The "gridJS" library is located in "ceScript", but if you have not used it before, we recommend to take a look at the RSS Channel Template. It contains a simplified version of the grid, called "demogrid.js". It is completely commented and does not contain any heavy math.

M30: RSS Channel Template

In Addition, we offer more information and an introduction to gridJS as well as it's extended functionality in Chapter IV - Part 1. Please pay attention to the different tabs of this part.

Filter: ABOX42 Showcases M30 Resources summary

M30Q: What parameters and subfunctionality will be used when initializing the grid using gridJS.element ?



gridJS.use('different_panel'): You can have several HTML <ul> boxes with different <li> elements. Selects a different <ul> element. Have a look at the question "What do the parameters mean which get used when calling gridJS.element?" for details on this.

gridJS.doit('action'): Executes the action tag of the currently selected list element. This makes it possible to scroll over different list elements and when the user presses OK ("VK_ENTER"), different functionality can get called depending on what list item is currently selected.

gridJS.doitHover('hoveraction', 1): Makes it possible to call something right when a list item (<li>) gets selected. After 1ms (immediately), evaluates the javascript in the "hoveraction" attribute of the newly selected list item.

Filter: ABOX42 Showcases M30

M30Q: What do the parameters mean which get used when calling gridJS.element ?

"name"
Provide a name you would like to use when calling gridJS.use

"type"
Provide the direction of the selection (so the up/down/left/right cursor keys have different actions): vertical or horizontal

"is_moveable"
If enabled, the element is scrollable, otherwise the selection goes out of range and is not displayed (when there are too many items in the element)

"border"
Different action depending on the direction which is provided here. Gets called when the currently selected item is the first or last item in the selection. In this case, the element "scroll_panel" gets selected when the last item was selected and the user presses cursor right. There must be no further item inside this element which could get selected. If the direction was "LEFT", you could specify the action for when the first item inside the element was selected and the user presses the cursor left button.

"key"
Here you can specify special keys which get called when the user presses that button. In this case, the function doit gets called, which evaluates the action attribute of the currently selected <li> element. Keys which you define here must be forwarded from your keycode handler (i.e. function handleKeyCode):



"enterlastitem"
Different from what its name might suggest, enterlastitem defines if the previously selected item should get selected again (after an element was previously focused, lost its focus and gets focused again). If set to false, when the selection appears, always the first <li> item is selected (except if you give it a different selection using gridJS.sel).

"callback"
Called after element has finished

Filter: ABOX42 Showcases M30

M30Q: How do I use the “getNetworkInterfaceIP” call? The code returns an empty string.

A: That's because the device has multiple network interface (lo, eth0, wifi is ra0 (optional)) you must first detect which interface is currently active.  It may happen multiple interfaces are active.  In this case we return the first active Interface (LAN or Wifi).

Example code:

screenshot getActiveIP

Filter: common class API M30

M30Q: Where can I find an overview of the UI Elements?

A: Here is an overview of the UI Elements and other templates used in our examples and "Smart Solutions": UI Elements Index

Filter: ABOX42 Showcases HTML/CSS HTML5/CSS3 M30 UI Elements Web Technology

M30Q: How can I switch the audio channel when my stream offers more than one?

A: We prepared an example that shows you how to use the JS-API to switch between audio channels of video streams. Take a closer look at the code used to see exactly how this can be done.

Filter: M30 media class API Smart STB

M30Q: Is it possible to disable the screensaver?

A: Yes, you can use the JS-API call "enableScreensaver()" to "turn off" the screensaver. There is an example code available in the API documentation which is best used in your own application. This makes sure the screensaver won't get activated while your application is running.

Filter: ABOX42 Showcases common class API M30

M30Q: How do I use the Mobile Viewer?

A: In Chapter XV - Part 3 you can find a description how to use the Mobile Viewer with the ABOX42 Mobile RCU. In case you want to use a third party application with the Mobile Viewer, please proceed to Part 4 in the same chapter.

Filter: ABOX42 Mobile App companion device M30 Mobile Toolkit REST-API Second Screen

M30Q: Are teletext subtitles supported by the platform?

A: Yes, teletext subtitles are supported by the platform. Please take a look at Chapter XXI - IPTV package 1 and view this example on the box. When the teletext is shown, please enter 888 on your RCU to show teletext subtitles for the running stream.

Filter: ABOX42 Showcases IPTV M30 tsstack1 class API

M30Q: How can I start my service over a TV channel like Red Button does?

A: Take a look at how to load a web app from a remote server while your video stream is running - similar to the Red Button you might already know from conventional TV.

Filter: ABOX42 Showcases IPTV M30 Web Technology

M30Q: How can I create my own Speed Check application?

A: On every developer unit you will find the ABOX42 Speed Check. In case you are looking for your own, branded speed check, take a look at what we have to offer on our Smart Solutions - Web Server Runtime page. Choose "My Own Speed Check" and download the zip file provided there. Upload it to your Smart STB and test it right away. With some adjustments you can easily brand this application according to your product/corporate identity.

In addition, there is a complete description of the speed check app's code in Chapter XXV - Speed Check. You can either run this application locally or in the cloud.

Filter: ABOX42 Showcases common class API HTML/CSS M30 Smart Solutions Web Server runtime

M30Q: How can I create my own settings app?

A: We've recently received several requests asking whether it is possible to create an own settings application. Therefore, we have created Chapter XXIII in the Developer IDE that shows you how our settings app was built and thereby provides you the information needed to create your very own.

We split up the different tabs like "System information", "Audio & Video", "Network" and so forth into individual parts which should make it easier for you to find your way along. The chapter is not fully completed yet, but we'll take care of that within the next two weeks. Nevertheless, the full application is already available for download in the "Resources" section of the summary page.

Filter: ABOX42 Showcases M30 Smart SDK

M30Q: How can I set the time zone on the Smart STB?

A: A: There is an extension in the JS-API that handles the timezone topic. Take a closer look at the common class API and look for these calls:

- getSupportedTimezone
- getTimezone
- getTimezoneOffset
- setTimezone

Filter: common class API M30 Smart SDK

M30Q: How does the initialization work when creating my own settings app?

A: The first part of Chapter XXIII gives you an introduction and explains the very basics of the settings application. We recommend to take this step in order to get the full picture and as a preparation for the following parts.

Filter: ABOX42 Showcases M30 Smart SDK

M30Q: How do I setup the System Information in my settings app?

A: In Chapter XXIII - Part 2 we explain how the "System Information" tab is built up and what it takes to make it work correctly. Feel free to explore the information given in the code tab of this part.

Filter: ABOX42 Showcases M30 Smart SDK Smart STB

M30Q: How do I setup the Time & Language tab in my settings app?

A: In Chapter XXIII - Part 3 we explain how the "Time & Language" tab is built up and what it takes to make it work correctly. Feel free to explore the information given in the code tab of this part.

Filter: ABOX42 Showcases M30 Smart SDK Smart STB

M30Q: How do I setup the Audio & Video tab in my settings app?

A: In Chapter XXIII - Part 4 we explain how the "Audio & Video" tab is built up and what it takes to make it work correctly. Feel free to explore the information given in the code tab of this part.

Filter: ABOX42 Showcases M30 Smart SDK Smart STB

M30Q: How do I setup the Network tab in my settings app?

A: In Chapter XXIII - Part 5 we explain how the "Network" tab is built up and what it takes to make it work correctly. Feel free to explore the information given in the code tab of this part.

Filter: ABOX42 Showcases M30 Smart SDK Smart STB

M30Q: How do I setup the Reset tab in my settings app?

A: In Chapter XXIII - Part 6 we explain how the "Reset" tab is built up and what it takes to make it work correctly. Feel free to explore the information given in the code tab of this part.

Filter: ABOX42 Showcases M30 Smart SDK Smart STB

M30Q: Is multi-audio supported by the platform?

A: Yes, the platform supports multi-audio. Please see Chapter XXII - IPTV package 2 for details and a sample application where you can insert your own multi-audio stream URL.

Filter: ABOX42 Showcases IPTV M30 Smart SDK

M30Q: How do I create a speed check application in the cloud?

A: We already explained how the speed check application that runs locally on the Smart STB works. In Chapter XXV - Speed Check you will find an application that you can also run in the cloud. This provides the possibility to fully customize and brand your speed check application.

Filter: ABOX42 Showcases M30 Web Browser runtime Web Technology

M30Q: Is there a detailed description of the template used for the speed check app?

A: In case you need a detailed description of the template which is used for the Speed Check application in the cloud, take a look at Chapter XXV - Part 1, you will find all you need to know.

Filter: ABOX42 Showcases M30 Web Browser runtime Web Technology

M30Q: What do I have to do to carry through a ping test in the speed check app?

A: Go to Chapter XXV - Part 2 to see how to carry through a ping test in your speed check application in the cloud.

Filter: ABOX42 Showcases M30 Web Browser runtime Web Technology

M30Q: What do I have to do to measure the download speed of a file in the speed check app?

A: In Chapter XXV - Part 3 we explain how to measure the download speed of a file in the speed check application in details. Go ahead and take a look at it now.

Filter: ABOX42 Showcases M30 Web Browser runtime Web Technology

M30Q: How do I create a proper result message in the speed check app?

A: When the speed check app actually has some result to display, you will have to create a proper result message. In the last part of Chapter XXV (Part 4) you will find an example of how we do it.

Filter: ABOX42 Showcases M30 Web Browser runtime Web Technology

M30Q: How can I create a screencapture from what I am currently looking at?

A: There is an API call that you can use to trigger a screenshot. The image will get saved in the "Developer" folder on the box which you can easily access via FTP. You can also use the Mobile Workbench to do so.

Filter: M30 Mobile Toolkit

M30Q: How do I get the exact device model of my Smart STB?

A: The JS-API offers ways to retrieve the exact device model of your Smart STB. In the common class API calls you will find getDeviceModel() which returns the model group, for example "M12". The call getBrandkey then provides the brandkey (e.g. Developer Standard) which holds the information to which sub-model (e.g. M12WM) it is linked.

Filter: common class API M30

M30Q: Does the platform support DVB subtitles?

A: Yes, the platform supports DVB subtitles. The tsstack3 class API calls handle all related functionality, Chapter XXVI - IPTV package 3 holds the referring example. For detailed information on the API calls please take a look at the documentation.

Filter: IPTV M30 tsstack3 class API

M30Q: Is there a description of the functionality contained in the “IPTV Example in 3 days”?

A: Yes, we prepared several screencasts for that cause - one for each part. They are available in the Developer IDE, Chapter XX - IPTV Example in 3 days or directly on our YouTube channel.

Filter: ABOX42 Showcases HbbTV IPTV M30 tsstack1 class API Web Technology

M30Q: How can I find out the URL of the media currently shown on the box?

A: In "Market Proven" you will find "My Own Video - Media Player runtime" where you can play any video URL. In case you want to find out the URL of a video that is currently playing, use the "Get current URL" feature to retrieve the URL you are looking for.

Filter: ABOX42 Showcases M20 Media Player runtime REST-API

M30Q: How does the IPTV package 3 work and what are the main features?

A: The main feature of IPTV package 3 is the support of DVB subtitles. You can launch or download the application on the summary page of Chapter XXVI. The main differences to the other IPTV packages are described in Part 1.

Filter: ABOX42 Showcases HTML5/CSS3 IPTV M30 tsstack3 class API

M30Q: Is sliding window supported by the platform?

A: Yes, the sliding window feature is supported by the platform. There is a separate chapter in the IDE which handles the topic of the sliding window and also provides an example for you to download.

Filter: ABOX42 Showcases M30 Media Player runtime

M30Q: What is the basic idea of the sliding window application and what are the variables used in the example?

A: In Chapter XXIX - Sliding Window you can find all the information you need and in Part 1, the basic idea and the variables are explained in details.

Filter: ABOX42 Showcases M30 Media Player runtime

M30Q: How can I disable the back button?

A: In case you want to disable the back button or any other button, you will have to interrupt the default event with the JavaScript method "event.PreventDefault()" which is widely used.

Filter: M30 Web Browser runtime Web Development

M30Q: Can I start Live TV HLS playback with a custom offset segment?

A: The "setconfig" JS-API call lets you specify different settings for your play out. For example, you can set the offset segment for live TV HLS playback. For demonstration, we prepared a small sample application so you can test this feature of the platform in the JS-API documentation in the Developer IDE.

Filter: HLS M30

M30Q: Where can I find an example for the QoS (Quality of Service) JS-API calls?

A: We prepared a separate Chapter for the Quality of Service calls. As you can find the full API documentation in the Web Browser API. A nice example with some visual animation for the fullscreen transition is filed in Chapter XXXII - QoS.

Filter: M30 qos class API

M30Q: How can I display the quality information of the current stream?

A: You can use QoS calls to get the number of stalls, the amount of transferred data, the download and media bitrate. In Chapter XXXII - Part 1 you can find a detailed instruction.

Filter: M30 qos class API

M30Q: How can I turn the HDMI output on and off?

A: There are JS-API calls which let you control the HDMI port. In the API documentation, you will find a code sample for the enableHDMIOutput call.

Filter: M30 qos class API

M30Q: How can I check the HDMI output state?

A: There is a JS-API call which lets you check the HDMI output state. In the API documentation, you will find a code sample which shows you how to use this call - look for IsHDMIOutputEnabled.

Filter: M30 qos class API

M30Q: Is it possible to change the behavior of the Home button?

A: In case you want to disable the home button or any other button, you will have to interrupt the default event with the JavaScript method "event.PreventDefault()" which is widely used. If you want to change the behavior, you will have to query the home button and according to the query execute another action.

Filter: M30 Web Development

M30Q: How do I start an HLS stream with a specific bitrate?

A: If your use case demands that you need to start your HLS stream with a specific bitrate, there is a property available for the "media.play" call that lets you set the minimum or maximum bandwidth. As usual, we provide an example application for this topic. Please see Chapter XXXV - Testing differnt bitrates for details, download and documentation.

Filter: HLS HTML/CSS M30 Media Player runtime

M30Q: How can I change the streams and bitrates in the example of chapter 35?

A: In Chapter XXXV - Testing different bitrates we show you how to set and test different bitrates for your HLS playout. In case you want to modify the streams and bitrates in the example application, take a look at Part 2 - How can I change the video URLs and the bitrates?.

Filter: HLS HTML/CSS M30 Media Player runtime

M30Q: How can I control the color of the LED lights of the Smart STB?

A: You can control the LEDs of the front panel with the help of our JS-API in the Developer IDE. In the common class API you will find 2 calls: getLedStatus and setLedStatus

Filter: M30 Smart STB

M30Q: What are storage class API calls and where can I find them?

A: The STB/Tuner class API calls take care of the player capabilities of the Smart STB, as the name already indicates. To see all available API calls, please visit the Developer IDE and take a look at the "Storage class API extension".

Filter: M30 Storage class API

M30Q: What are PVR class API calls and where can I find them?

A: The PVR class API calls take care of the PVR capabilities of the Smart STB, as the name already indicates. To see all available API calls, please visit the Developer IDE and take a look at the "PVR class API extension".

Filter: M30 PVR class API

M30Q: Is it possible to set the DRM type of my stream with the setconfig() call?

A: The setconfig() call provided by the ABOX42 JS-API provides several possibilities to manipulate the playout. For example, you can set the DRM type to enable the streaming of your encrypted content. Take a look at the JS-API documentation in the Developer IDE.

Filter: ABOX42 Showcases HLS M30 media class API Media Player runtime

M30Q: How do I check if installing a new version really works in the App Installer?

A: In Chapter XXIV - App Installer, Part 5 you will find an instruction that shows you how to check whether installing a new version actually works by comparing the files that got installed with the existing ones.

Filter: ABOX42 Showcases M30 Web Browser runtime Web Server runtime

M30Q: What are the 2 different update modes in the App Installer?

A: In Chapter XXIV - App Installer, Part 6 you can learn about the two different update modes of the App Installer application. This part concludes Chapter XXIV - App Installer.

Filter: ABOX42 Showcases M30 Web Browser runtime Web Server runtime

M30Q: What can I use the setConfig() call of the JS-API for?

A: The media class API holds the setConfig() call. In combination with media.play() you can easily manipulate the playout of your stream. For example you can set the maximum bitrate or the DRM type. Check out more details in the Developer IDE.

Filter: M30 Web Technology

M30Q: What are STB/Tuner class API calls and where can I find them?

A: The storage class API calls take care of the storage capabilities of the Smart STB, as the name already indicates. To see all available API calls, please visit the Developer IDE and take a look at the "STB/Tuner class API extension".

Filter: latest M30 STB/Tuner class API

M30Q: Does the platform support “Swipe to TV”?

A: Yes, Swipe to TV is available for the M30 platform. In Chapter XLIV we show you how to pair second screen applications to a first screen application utilizing the ABOX42 Smart Set-Top Box Platform.

Filter: ABOX42 Platforms ABOX42 Showcases latest M30 Smart Solutions

M30Q: Is there an application example for the Swipe to TV feature?

A: In a dedicated chapter of the Developer IDE we show how to pair second screen applications to a first screen application utilizing the ABOX42 Smart Set-Top Box Platform. After the pairing is done the applications can exchange data and one real world example is opening the content you are currently watching on your smartphone directly to the TV screen. You can find the resources to download at the bottom of the summary page.

Filter: ABOX42 Platforms ABOX42 Showcases latest M30 Smart Solutions