Introduction

This article gives an example of how to develop a simple application, with some examples, for the Amino Media Player 

In this article:

API Documentation

Debug Web Browser Using Web Inspector

Video Playback and Event

TVI interface

Video frame under Webpage User interface

Remote key events and key codes

Enable JS API to launch an Android APP

Prerequisites

This article assumes that the basic setup of the devices has been completed and the device is configured to use Orchestrate, USB, or DHCP to receive any necessary configuration settings.

The article also assumes you have basic knowledge of Android and Javascript programming.

Summary

API Documentation

API documentation needed for this article can be found on the following web pages:

EnableJS Javascript APIs

Local Management (EELM) APIs

Debug Web Browser Using Web Inspector

If you need to debug the web browser using Web Inspector on an Amino Media Player please access the following article here.

Video Playback and Event

This is an example of creating a simple player with the default browser.

Create and Configure Player

Before a playback can be started, you have to create and configure the player. Following the steps below will lead you to create a fullscreen player view :

player = new ENABLE.player();  
player.setVideoRect(0,0,-1,-1);

Set and start a Playback

Once the Player is created, you can make another call to set the required source. Following the steps below will configure your player to play a sample mp4 video clip from the internet:

player.setSource("https://docs.google.com/uc?export=download&id=1NR1-dhGbYqQMrbI5FJHCCSsPhHy8Geqs");
player.play(1);

Playback control

To Pause the video playback, call:

player.play(0);

To Stop the video playback, call:

player.stop();

To Seek backward/forward your playback, call:

player.seekTo(offset); 

Note: your offset has to be calculated programmatically. To get the current Playback position, call:

player.getPlayPosition();

Video Event

The Player will report playback events through a Javascript callback on the default browser. To capture the playback events, a callback has to be registered, try the following code to register the playback event:

player.setEventCallback(function (e) {
//do something with the video event "e"

 if ( e.event === "EN_VIDEOEVENT_EOS" ) {
 //do something when "End of stream" Event received - eg , Loop play the video 
 playTimer = setTimeout(function(){log("play again now");playVideo();}, 1000);
 return;
 }
}

Note: Please refer to the JS API documentation for the list of Video Event

Sample Code

Please find the attached sample code, it will loop play a video clip when the video playback reaches the end of the stream.

TVI interface

Amino Media Player has a TVI interface, which allows you to control a hospitality TV. The interface is provided at serial RS232 standard on a DE-9 male connector. For more details, please check this article. Here's how to use the HTML/Javascript to control the TVI interface.

Send out a TVI message

To set the HDMI TVI, please use the ENABLE.tvi.setSettings to configure the port:

ENABLE.tvi.setSettings(object)
Set tvi settings
Example for options:
{
    "baud_rate" : 9600,
    "intercharacter_time" : 0,
    "binary_mode" : false
}

var callback = function(obj) {
    if (obj.event === ENABLE.tvi.event.TVI_EVENT){
        console.log("receive tvi message" + obj.message);
    }
};
ENABLE.tvi.setEventCallback(callback);

Video frame under Webpage User interface

Here we will provide an example of creating a user interface on top of a video frame.

You will interact with the UI through a remote control and the UI layout will change according to key press received.

Define the UI location

The location and frame color is defined under the CSS style:

 .info {
background-color: rgb(102, 143, 219);
position: absolute;
bottom: 90px;
width: 1700px;
height: 300px;
left: 110px;
}

 .guide {
background-color: rgb(202, 151, 74);
position: absolute;
top: 60px;
width: 1700px;
height: 900px;
left: 110px;
}

 .menu {
position: absolute;
background-color: rgb(74, 202, 174);
top: 60px;
left: 110px;
width: 600px;
height: 900px;
}

Hiding the UI

A CSS style "display: none" is defined by default to hide the User Interface:

 <div class="guide" style="display: none;">
<p>Guide</p>
</div>

 <div class="menu" style="display: none;">
<p>Menu</p>
</div>

 <div class="info" style="display: none;">
<p>Progrom Info</p>
</div>

Showing the UI

The UI is showing according to the keypress:

 document.onkeydown = function (e) {
switch (e.key) {
case "g":
case "Guide":
divInfo.style.display = "none";
divMenu.style.display = "none";
divGuide.style.display = divGuide.style.display === "" ? "none" : "";
break;
case "m":
case "MediaTopMenu":
divGuide.style.display = "none";
divInfo.style.display = "none";
divMenu.style.display = divMenu.style.display === "" ? "none" : "";
break;
case "i":
case "Info":
divGuide.style.display = "none";
divMenu.style.display = "none";
divInfo.style.display = divInfo.style.display === "" ? "none" : "";
break;
}
}

Sample code

Please refer to the sample code attached. The browser will show different parts of the page according to the keypress received (menu, guide, info button).

Remote key events and key codes

Here we will give you an example of capturing the remote key event with the default browser.

Key Event Listener

A Javascript Key Event Listener must be constructed to capture key events received by a particular key event.

Syntax : addEventListener(type, listener, useCapture);

The code below shows an example of receiving the "keydown" and "keyup" events.

document.addEventListener("keydown", keyHandler_down, true);

document.addEventListener("keyup", keyHandler_up, true);

For the list of event types:

https://developer.mozilla.org/en-US/docs/Web/Events

Key Event Callback

A Javascript callback function will be called once the corresponding key event is received by the listener.

The code below shows an example to fire a callback and print out the corresponding key code when a "key down/up" event is received by the listener. 

function keyHandler_down(e) {
var key = e.key;
log ("Key Pressed! :" + key);
//To do something when received the key down event.
};

function keyHandler_up(e) {
var key = e.key;
log ("Key Released! :" + key);
//To do something when received the key up event.
};

Key Code Mapping

Besides the key event, the callback function will return an object of the corresponding key event. The key code of the key event can be obtained. By comparing the string value of the returned variable, it is possible to map a particular key for a specific purpose. The code below shows an example of calling out the Android settings page when the "blue" key is pressed:

function keyHandler_down(e) {
var key = e.key;

log ("Key Pressed! :" + key);

if (key === ENABLE.input.KEY_BLUE) {
showAndroidSettings();
}
};

function showAndroidSettings() {
ENABLE.application.launchAndroidSystemSettings();
}

Sample code: https://aminocom.zendesk.com/hc/article_attachments/5253111032217/RemoteKeyTest.html

This is a sample page to print out the corresponding keycode and key event received by Oak Remote. A Dialogue box shows the timestamp, key event, and key code of the receiving key press.

Note: Currently, a system-wise handler will handle EXIT as HOME (for Oak remote, it is the "X" button).
The browser will be paused and then resumed.
A JS key is forwarded to JS:

12-13 16:46:20.914 4999 4999 D GlobalKeyReceiver: handleExitKey: Got Exit Key
12-13 16:46:20.914 4999 4999 D GlobalKeyReceiver: handleExitKey: localIntent: Intent { act=android.intent.action.MAIN cat=[android.intent.category.HOME] flg=0x10000000 }
12-13 16:46:20.931 19365 19365 I BrowserMain: onPause
12-13 16:46:20.969 19365 19365 I BrowserMain: onResume

Enable JS API to launch an Android APP

The default amino browser can launch other applications through ENABLE JS API.

Sending through the deeplink API, the developer can achieve the same outcome as sending an Android intent.

Example for launching VLC:

ENABLE.application.emitDeeplink({package:"org.videolan.vlc"})

Example for sending a URL of the video stream to third-party player:

let config = { action: "android.intent.action.VIEW" , data: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" };
ENABLE.application.emitDeeplink(config);

References