Video Application

 

Developer Guide

INTRODUCTION

This document is the development guide for 3G phones multimedia applications, based on Cestel’s PIMobile environment (PIMobile from now on).

PIMOBILE GENERAL WORKING OUTLINE

PIMobileuiler or PIMobile, is a Video Call Center resident software module, based on Cestel Technology. The objective of PIMobile is that calls routed to him by DNIS, ANIS, transfer from other video application or any other criteria to be relayed the image and audio of a web browser, this browser has a navigation by URL of Internet Connected web services.

For this the all PIMobile application have a URL associated as starting point, to this URL PIMobile access acting identically to a web browser, and relays to the mobile phone the image and sound that the web browser would show. This starting URL is configured through the administrative tools of the video call center.

From the moment the starting URL image is shown, PIMobile manages the conversion of pulsed keys on the phone (DTMF digits) to be retrieved and shown on the 3G phone. Meaning, the pulsed digits becomes the equivalent to the clicks on the links on each retrieved web page shown on the phone.

For this task PIMobile has an Internet Explorer web browser for each 3G phone it answers at the same time, thus at any given moment holds an array of browsers to which allocates and ends sessions generated by each call.

Therefore, PIMobile is capable of performing its function as long as the websites that are accessed are ready to work under Internet Explorer, and if used on the pages accessed any additional object or embedded in a web page (eg a display of videos or similar), it must be previously registered with the server that hosts the software PIMobile.

From the point of view of the application developer, the execution of a PIMobile scheme based application therefore is as follows [imagen]

Therefore an application PIMobile lies not actually in the video call center or in the space or environment PIMobile, but is actually a Web application that resides on a conventional web server (or web servers linked to one another at logical level by links).

Because the final destination of the application PIMobile is not a web browser, but a mobile phone, web applications must meet certain requirements set out in the next chapter, but only in the format shown and to the commands capture not in terms of the development tools and technologies themselves.

That means an application PIMobile can be develop with any tool or usual procedure in web development: JSP, PHP, ASP, ASPX, FLASH, Javascript ... etc.

programmer therefore trained in any of these tools is trained too on the development for PIMobile, just by following and taking into consideration the issues listed and explained in this manual.

Therefore in the rest of this manual is assumed that the reader is familiar with the concepts and knowledge of general use in web applications development: URLs, links, frames, HTML elements, JavaScript etc.

PIMOBILE WEB APPLICATION REQUIREMENTS

Any Web application is likely to run in the environment PIMobile if it meets the requirements listed below.

What does "likely to run" in PIMobile mean? It means that it will be properly displayed / heard in a 3G mobile phone and that simply by pressing the DTMF phone keys it will navigate (ie, link URLs).

Therefore this is equivalent to saying that a Web application is "certified PIMobile."

The main requirements are as follows, and each of them will make some comments and suggestions to facilitate the conversion of existing web applications with minimal effort.

• Screen Size
• Managing keyboard
• Internet Explorer 6 (IE6) Compatible
• Implementation in a single window or iframe

Screen Size

The screen of a cell phone is about the size of standard QCIF that is 176 pixels wide by 144 high (greater width than height, although in some phones might seem that the vertical dimension is greater)
Therefore, if the web application employs more space on the screen, only 176x144 pixels from the upper left corner of the information that would show an internet explorer browser is shown.
For example, if the entry point of our application PIMobile was http://www.cestel.es The image displayed in a browser Internet Explorer 6 (IE6) for the URL is as follows

PIMobile will only send to the phone and image of 176x144 belonging to the upper left corner, like this one:

However, if necessary and the web application accessed is prepared, PIMobile has the full picture and through JavaScript a scroll could be done to show areas initially hidden and out of the window of 176x144 displayed.

In other words, we could display on the mobile for example the red framed area in the picture below. How to do this is addressed below. Applications for scrolling viewing area would be for example - Move by the image of a map - Vertical scrolling on a “long” Web screen, such as an electronic publication of a newspaper.

In any case it would be normal to display on your phone a website QCIF size, as in this example menu

Or a video image or picture adapted to that size as in these examples of video and webcam

Consider the following example:

The DIV element through CSS has been given a frame to visualize its limit. The style applied to DIV can be included in a file CSS, to reuse in the different page of the PIMobile Website. If we invoke this page:

http://www.pimobile.es/samples/demodiv1.htm

from a PC browser we will see on screen

The black frame of the DIV marks the equivalent space of the mobile screen. In this case the mobile wil show the complete content.

However if we enlarge the width of the table and insert more text, for example changing the table code to

The result, shown in the image: The whole text is not in the frame anymore (there is even scroll bars) and the result will be then inadequate for a mobile phone.

The web developer for PIMobile therefore should keep in mind that the space available through normal operation (with no zoom and scroll, but as we say it is feasible) is reduced and therefore
- The text to be included must be limited in size
- Images / videos must have enough quality in QCIF size

Thus at the time of adapt or develop a PIMobile Web application will be necessary to clearly define a strategy and usability to make viable and flexible visual presentation on the screen.

Managing keyboard

In a conventional web application (for a PC browser with minimum resolution of 640x480), once the browser displays a page it is possible to click on the links associated with texts or images, which causes the browser to ask the URL assigned to the link clicked, and display a new web page as result.

This is the usual way to work, but applications PIMobile, by the very nature of the 3G mobile applications is not possible but to send strokes of DTMF digits (numbers 0 to 9, key * # key).
Simulating, like when we type the text of an SMS message, we can also send text and special characters: eg three quick beats of the key 2 are equivalent to the letter C. In any case, those are keystrokes on the phone’s DTMF keypad.

But from a conventional web application it’s possible to activate links to a page by pressing numeric digits or the * key or #. This will need to minimally alter the page, adding Javascript code identifying each link to consider and assigning it a key.

For example, it is possible to make the following link (shown HTML code) to be activated in a web application conventional, plus PIMobile, by pressing the keyboard. Go to the PIMobile Web

For those there basically two methods:

• the first to be called "direct management" allowing through JavaScript to directly receive the code of the key pressed and act accordingly: for example to activate a link on the page, or scrolling, zooming or anything else achievable via javascript . It is appropriate if you want complex effects, such as zooming, scrolling, resizing images, active or deactivate layers ...

• The second, called "management by links" simplfy assigning, with very little code, numerical options to links on the website. It is the most appropriate for menus or web pages containing multiple links and whose mission is to serve primarily as an intermediate step to another.

As "evolution" of the direct management, it’s also possible to manage the keyboard to enter data into a form. For this PIMobile provides a Javascript library, which will be discussed in the chapter

Direct keyboard Management.

1º) Add on the page, in the element <BODY> the attribute

onkeypress="keyAction()"

This means that before any keyboard pulsation (numerical or not) browser calls the function indicated, without further action in this regard.

2º) Define the previous function, which will answer the keystrokes. Within this function is possible to retrieve the key pressed, which will be coded on the basis of the table attached below. While in a conventional web application this function would receive pulsations of any key in a PIMobile only receives the DTMF digits, reason we shall confine ourselves to consider only these keys on the function.

Example of a function to attend the keyboard

Keyboard management by links

1º) Include the javascrip code of the keyboard management “3G Navigation Handler” not forgetting the header of the page.

(The example URL points to CESTEl web server, also you can put the file with the rest of the web application files, to make your own adjustments.)

2º) ) define the keys assignations through the javascript code as in the following example:

In the previous example the ‘1’ key would navigate to the relative direction ‘menu1.htm’ of the actual URL, and press the key ‘*’ to ‘menu4.htm’. As seen the unique javascript code necessary is the one that defines the association key-link. The only other thing to take on account is to assign an identifier to each link ( id=”A3” in the example is the assignation of de identifier to the third link.)

Internet Explorer 6 (IE6) Compatible

As explained in the general pattern of operation, applications PIMobile will run in the server PIMobile through an object Internet Explorer. Currently version is 6.0 by which any application PIMobile must display and function correctly in this version.

Simply access the application developed from a PC equipped with this version to certify that the operation is correct in PIMobile.

Implementation in a single window or iframe

Applications PIMobile are the relayed image of a single window of an Internet Explorer browser. Therefore alert messages (such as alerts Javascript) or pop-up windows are not displayed on the phone, so it should be avoided.

Especially avoid alerts of JavaScript, a user could not close those by any key on his phone, thereby the PIMobile application would be blocked. This kind of windows, occasionally used for debugging should only be used in previous versions or purification applications and designed to run as conventional applications (in a PC).

 

GUÍA DE DESARROLLO

ADVANCED PROGRAMMING OF PIMOBILE APPLICATIONS

In this chapter we explain how to get the PIMobile applications to do determined actions not usual on a conventional web application but that in a 3G environment are specially useful or needed.

Inclusion of objects

As in a conventional application, it is possible insert calls to objects through HTML tags of the form

It should be borne in mind that the area allocated to the object must be smaller than it would be normal for a conventional application. This size of the area must be equal or less than the standard QCIF (except if made for scrolling). The size is controlled by attributes WIDTH and HEIGHT of the OBJECT tag.

In any event it is necessary to check how the resized images is when shown by the object, it might present stripes filling in the areas top, bottom and / or sides, or not even admit to be displayed with the size adapted to our needs.

Another important issue is that the object must be registered on the server PIMobile if it is to be loaded on the Internet Explorer browser and display correctly on the phone. Therefore, no objects that may be used in conventional web applications requiring a previous download of something ActiveX, Java or similar can be used. Only may be used if previously requested to CESTEL to be registered on the object‘s PIMobile server.

The two most common types of object (Windows Media and Flash) are already installed on the server PIMobile, so those can be used directly, and run on PIMobile in the same way as they would on a conventional web application.

Both types of object (and others which could be used) must pay attention to:
- Enable auto start mode of reproduction, if it is a video, as a general rule will be difficult to convert the pressing a key on the phone to a click on a particular area of the object that spawns reproduction
- Off-display control panel which often carry these objects (buttons play, stop, pause, etc.) because it will also be difficult to emulate the clicks in a particular position of the control panel to get the boot, stop, etc.

However, objects tend to be controllable via JavaScript (by events). In section direct management of the keyboard we have seen that it is possible to translate a pulsation on the keyboard to Javascript code, and that code could be valid to stop, start and so the reproduction of videos in an object of this type.

Next text discusses two examples of objects including Windows Media and Flash, but not being this comprehensive guide of the parameters and scope of these objects. For that check out:

Flash:
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701
Windows Media:
http://msdn2.microsoft.com/en-us/library/ms983653.aspx

Flash object inclusion

Windows media video object

Fundamental parameters are highlighted.
- Autostart = so the reproduction will Start by itself.
- Rate = the speed of playback
- Uimode = This is the value that indicates to show the control panel
- URL = URL of the video source (formats http, mms, rtsp…)

Forms

In conventional web applications based on HTML is frequent the use of forms, defined by tags FORM, INPUT and SELECT.

To complete text fields is people use of alphabetical keyboard on a PC, and to activate, deactivate or list camps radio, checkbox and select use the mouse and the arrow keys.

As discussed in chapter management keyboard, by pressing DTMF digits is possible to simulate the alpha and special characters (comma, point, space etc.), thus it will also be possible to complete the text fields in forms.

To that mean is provided a Javascript code file, which included in the code of the HTML page with the form to handle allows filling your data from the phone, and that each field and the form as a whole be validated.

A simple example is the following one:
http://www.pimobile.es/samples/demo.htm

Points to highlight from the code above, and which are necessary conditions for achieving a valid form for an application PIMobile:

It includes a call to Javascript code from file forms.js. In this file resides the coded functions focusField and “tecla” (Spanish for key).

The form includes only text input fields, but could also include hidden

The TAG body includes a call for placing the focus on a particular field of the form, which might not be the first one. The parameters are

nform = name of the form on which to set the focus, whether it is null or non-existent it will be the first on page.
nfield = name of the field to focus in the form, whether it is null or non-existent will be the first one.

Each input must contain an attribute that defines its name within the form (name) and its other identifier element in the DOM (Document Object Model) of the page (id).

Each input must contain an attribute tabindex to define the sequence of "jump" between fields, it’s to say, the first will have value tabindex = 1, the second tabindex = 2 etc.

Each input must state the function “tecla” to be enforced in every keystroke in this field, ie the attribute onkeypress. The parameters are

arrayValores = name of the array with the characters assigned to each key DTMF. For example, the allocation of the characters a, b, c and 2 is the usual key 2 of a mobile phone. It defines the sequence of characters that appear in the field in rapid and successive pushes of a button. For example 3 beats on the phone key 2 would make appear in the field a character 2. There are four predefined arrays, which names are:
kLetAlfaNum = letters, numbers and spaces (key 0)
kLetNum = numbers
kLetAlfa = letters and space (key 0)
kLetNumBlank = numbers and space (key 0)
validateField = true if the field validates the form through two quick beats of the # key
validateFunction = if the field is a validation one, and pressed two fast consecutive #, Javascript function that checks the content of a form to verify its consistency. If found a mistake, it should return the text to display as a warning. If you return null or an empty string, the form is validated.

In each field on which the key role is not defined as validator of the form (second parameter = false, null or non-existent) # key leads the change to the next field, in the order defined by the attributes tabindex.

In the validation fields, a double quick press of the # key validates the form (after the function validation execution, if applicable). A single # and a pause cause the transition to the next field in the order defined by the attributes tabindex. Another character clicked after the first # pause while keeping the focus on the same field and shows the character clicked.

The appearance of the form of example, on the mobile phone’s display (or that of a conventional PC) would be as follows

Scrool and Zoom

The Internet Explorer browser executed by PIMobile for each mobile phone call recovers the entire contents of the screen from each URL it navigates to, but as explained only shows a box of the 176x144 pixels from the upper left corner.

Therefore an application PIMobile using Javascript can move the box to show other parts of the whole picture of the web page loaded in Internet Explorer. This can be useful in certain applications that seek to show an image (still picture or video) than in QCIF size is not appreciated in sufficient detail, for example
- Webcams
- Maps
- Graphics
- ...

Another interesting possibility is to resize images (or objects) whose size is not adequate to QCIF, e.g. zoom in or out of them. Combined with the scroll this facilitates inspecting the detail of an image considerably bigger in size than QCIF, such as a fixed webcam or video camera

The basic example would be as the one below:
http://www.pimobile.es/samples/demoscroll.htm
It shows, updated in real time, the image of a still webcam (image taken from time to time) for a ski resort

The original image, extracted from the URL http://www.valdesqui.es/cam/valdemartin.jpg would be as follows:

The real size is noticeable bigger than QCIF, as you can see:

The result on the screen of a mobile phone accessing an application PIMobile showing the example page is like the one shown here.

As can be seen, shows the content tailored to the mobile screen, as requested in the Javascript code of the page (startFit = true )

It would also be possible to display the image at its actual size, but focusing on certain coordinates. This can be useful for example in a map. To do so would be

Where x and y are the coordinates where visualization should focus
In the example shown x = 100, y = 200

The javascript file:

It contains the code needed for managing keyboard, and offers the following possibilities (numerical as befits the DTMF digits)

3, 7 = Zoom +/-
2,8,4,6 = Up/Down/Left/Right (scroll of the Picture if not fitted in the screen)
0 = Help (shows commands)
9 = Quit (navégate to another URL)
The number of pixel for zoom or scroll in each increment or movement can be determined in the HTML code.

Another possibility is to handle an object, for example a Media Player. If the object supports resizing through Javascript in the usual manner (by altering their properties width and height) it will be similar to the behaviour studied for the example above of the still webcam.
The address:
http://www.pimobile.es/samples/demoscrollobject.htm

You can see an example of the webcam of a highway. It’s enough to make the following changes in the code of the previous example:

EMULATORS

It is possible to use emulators to display on a PC what would be seen in a 3G mobile accessing an application PIMobile. Currently there are two that can be helpful, one for the development phase of the application and another for the deployment and complete verification.

It should not be forgotten that it is also possible to access any application PIMobile from a PC equipped with Internet Explorer just write the URL. In the upper left corner of your browser will display what would be on the phone.

PIMobile Emulator

Developed and supplied by CESTEL, it is an Internet Explorer browser with appearance of a mobile 3G and the screen size adjusted to the standard QCIF. You can write the URL to access, and click on the number keys for sending commands to the application.
It has the advantage of being able to test applications PIMobile without having to deploy in the Video Call Center which is located PIMobile. In other words, applies especially in the stages of development prior to deployment, without any access to Video Call Center.
To get this program contact the CESTEL PIMobile Technical Support.

X-Lite emulator

Supplied by CounterPath ( http://www.counterpath.com ) is a softPhone meaning a software phone suitable for voice services over IP.
Through it is possible to access the address SIP (IP) Video Call Center where resides PIMobile and launch a video call, identical to the one conducted through a mobile phone 3G but without access through the network of a UMTS mobile service provider.
It has the advantage over the other simulator that lets you test the entire application, already installed in the Video Call Center and configured for access from a real mobile phone. Thus is most useful to verify the correct functioning of deployments and applications PIMobile

DEPLOYMENT OF APPLICATION PIMOBILE

In addition to the screen size and the management of user commands (using numerical options and not links) take into account other recommendations, most of all visual, in the development of an application PIMobile.
Therefore the deployment of an application PIMobile consist of
1) Verify that the web servers that will be accessed have properly deployed the application.
2) Verify that these servers are accessible to the URLs, IP addresses and ports in question from the Internet, or at least from the PIMobile server IP.
3) Ask CESTEL an entry point from its Video Call Center, providing the home URL of the application. That is, CESTEL, if verified that the application supports PIMobile, will assign a phone number for access to the URL in question, and define the number of concurrent connections allowed.

Once put into operation, it should be noted that the availability of an application PIMobile and their response time, therefore, depends not only on Video Call Center and PIMobile, but of the web server that actually contains the application PIMobile.