Play Video From URL

Posted By : Mohit Virmani | 31-Dec-2013

netgem

Today I'm going to explain creation of channel for Netgem with the help of which one can display videos from a URL.

Below shown is the overview of the Display Screen.

Firstly, we need to create a new file named index.html and the below code has to be copied to index.html, which is used to start the application using the function NGM.application.start().

NGM.application.start() will load the MyFormWidget js file.

The below code has to be copied to myThema.json


{
    "buttonList": {
        "label<@text": {
            "text_align": "center,middle"
        }
 
 }
}

This would align the text displayed on monitor to center of the screen .

The below code is to be copied to the main javascript file named MyFormWidget.js


FormWidget.registerTypeStandard("MyFormWidget");

function MyFormWidget(_json, _options)
{
    this.super(_json, _options);
    this._userData = _options.userData; // use UserData as you want
}

MyFormWidget.inherits(FormWidget);

MyFormWidget.prototype.onEnter = function onEnter(_data)
{
    this.widgets.infoPanel.setData("Press 0 for HTTP Live Streaming video
"
            + "Press 1 for Microsoft Smooth Streaming
" 
            + "Press 2 for Flash video
"
            + "Press 3 for ASF file with MSDRM license acquisition
"
            + "Press 4 for RTSP stream");
    this.widgets.infoPanel.stateChange("enter");
};

MyFormWidget.prototype.onExit = function onExit()
{
    this.widgets.infoPanel.stateChange("exit");
    this.widgets.player.setData(null);
};

Here, onEnter , i.e., on channel start, the function onEnter() is called.

This would set the text in the widget defined in MyFormWidget.json.

The function onExit is called when channel is exited or changed, which would change the state of infoPanel widget to exit and also set null in the player widget.

Copy the below code to MyFormWidget.json


{
    "widgets": {
        "infoPanel": {
            "create": "CanvasWidget",
            "param": {
                "w": 640,
                "h": 480,
                "speed": 600,
                "zIndex": 1,
                "defaultState": "exit",
                "states": {
                    "enter" : { "x": 320, "y": 150, "w": 640, "h": 480, "a": 255 },
                    "exit"  : { "x": 640, "y": 360, "w":   0, "h":   0, "a": 255 }
                },
                "draw": "infoPanelDraw"
            }
        },
        "player": {
            "create": "PlayerWidget",
            "param": {
                "zIndex": 10,
                "speed": 300,
                "defaultState": "exit",

                "states": {
                    "enter" : { "x": 340, "y": 300, "w": 600, "h": 310, "a": 255 },
                    "exit"  : { "x": 640, "y": 400, "w":   0, "h":   0, "a": 255 }
                },

                "event": {
                    "*": "onStreamEvent"
                },

                "json": "pwDefautJSON"
            }
        }
    }

}

This would create and define a widget to display the text on TV and also specify area on screen for the video player.

Now that the widgets have been defined, we'll be activating the canvas widget and the player widget using infopanelDrwa & onStreamEvent function in MyFormWidget.js

Below code goes to MyFormWidget.js


MyFormWidget.infoPanelDraw = function infoPanelDraw(text)
{
    var ctx = this.getContext("2d");

    var bounds1 = Rect.fromContext(ctx).inset(8);
    var bounds2 = bounds1.inset(16);

    Canvas.drawShape(ctx, "rect", bounds1, this.themaData.drawShape);
    Canvas.drawText(ctx, text, bounds2, this.themaData.textarea);
};

MyFormWidget.prototype.onStreamEvent = function onStreamEvent(event)
{
    NGM.dump(event);

    switch (event.type) {
        case "start":
            this.widget.player.stateChange("enter");
            break;
    }
};

Now we'll define the function of remote keys to control the channel.

Copy& paste the following code in MyFormWidget.js


MyFormWidget.prototype.onKeyPress = function onKeyPress(_key)
{
    NGM.trace("myForm received a key: " + _key);

    var res = false;

    switch (_key) {
        case "KEY_TV_0":

            res = this.widgets.player.setData("http://sdk.netgem.com/media/video/hls/index.m3u8");
            break;

        case "KEY_TV_1":
            var player = this.widgets.player;
            res = player.setData("smooth://sdk.netgem.com/media/video/smooth/Manifest");
            
            if (res) {
                var event = new MyOwnPlayerWidgetEvent({
                    "title" : "Smooth video",
                    "image" : "../../resources/images/tutos/playerwidget.mediaplayer-list-item.png",
                    "duration" : 0,
                    "updateDuration" : true
                });
                player.setCurrentEvent(event);
            }
            
            break;

		case "KEY_TV_2":
            var player = this.widgets.player;
            res = player.setData("http://sdk.netgem.com/media/video/flash/caption_video.flv", {
                "seekable": true
            });

            //Setting the event to display info popup on trick mode
            if (res) {
                var event = new MyOwnPlayerWidgetEvent({
                    "title" : "Flash video",
                    "image" : "../../resources/images/tutos/playerwidget.mediaplayer-list-item.png",
                    "duration" : 0,
                    "updateDuration" : true
                });
                player.setCurrentEvent(event);
            }

            break;

        case "KEY_TV_3":
            res = this.widgets.player.setData("http://sdk.netgem.com/media/video/asf/Bear.pyv", {
                "playerType" : "asffile",
                "playerProperties" : {
                    "msdrm" : {
                        "customData" : "some data",
                        "laUrl" : "http://playready.directtaps.net/pr/svc/rightsmanager.asmx?"
                    }
                }
            });                      
            break;

        case "KEY_TV_4":
            res = this.widgets.player.setData("rtsp://www.diffusepro.com/lusophonie", 
                      {"playerType": "generic"});
            break;

        default:
            return this.widgets.player.keyHandler(_key);
    }
    if (res) {
        this.widgets.player.stateChange("exit");
        return true;
    }

    return false;
};

Stream Type auto detection is used with set data, this key press will try to use best player for video type.

Set the seekable parameter to true in the player parameters if you want to activate the trick modes.

You can also specify the license aquisition data with laUrl.

The above code would activate the keys 0,1,2,3,4.

Similarly, you can define and activate other keys and modify their usage.

You can download the source code for the above tutorial from here.

Thanks

Mohit Virmani