# JavaScript API Overview

Samsung SmartView SDK allows you to connect mobile devices and SmartTVs. By using the SmartView SDK API you can create compelling experiences that extend mobile applications to a Samsung SmartTV. The JavaScript API can be used in your SmartTV application to enable mobile applications to discover, connect, and communicate with the SmartTV.

###### For more general information : SmartView SDK WebSite

###### For more detailed API documentation : JS API Docs

## Installation

#### In a browser:

    <script src="samsung-msf-2.x.js"></script>

NOTE: bower and npm support coming soon.

## Quick Start (SmartTV Application)

Before we get started it is important to understand that a multiscreen application consist of two parts. The SmartTV application, which can be an installed application or a hosted web application, and a client application (often a mobile app). Most SmartTV applications are created using HTML/CSS/JavaScript. Mobile applications can be built in many languages including JAVA/Objective C/JS. The MultiScreen SDK family provides client APIs for Android, iOS, and JavaScript.

In the example to follow we will start with our SmartTV application since it will be commonly shared with all other clients.

#### Include the library in your SmartTV applications HTML page

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <!-- Add the script to your html (exposes a `msf` object to the window) -->
        <script src="scripts/vendor/msf-2.0.x.min.js"></script>
    </head>
    ...
    </html>

#### Open a channel on the local service

    msf.local(function(err, service){

        var channel = service.channel('com.mydomain.myapp');

        channel.connect({name: 'TV'}, function (err) {
            if(err) return console.error(err);
            console.log('You are connected');
        });

        channel.on('say', function(msg, from){
            console.log(from.attributes.name + ' says, ' + msg);
        });

        channel.on('clientConnect', function(client){
            channel.publish('say', 'Hello '+client.attributes.name, client.id);
        });

    });

## Quick Start (Mobile Web Application)

#### Include the library in your SmartTV applications HTML page

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <!-- Add the script to your html (exposes a `msf` object to the window) -->
        <script src="scripts/vendor/msf-2.0.x.min.js"></script>
    </head>
    ...
    </html>

#### Find services on your network and connect to a remote application

    msf.search(function(err,services){

        // Lets assume we found 1 service and want to use it
        var app = service[0].application('http://mydomain.com/myapp','com.mydomain.myapp');

        app.connect({name: 'Mobile Browser'}, function (err) {
            if(err) return console.error(err);
            app.publish('say', 'Hello Everyone');
        });

        app.on('say', function(msg, from){
            console.log(from.attributes.name + ' says, ' + msg);
        });

    });

## Concepts ( Discover, Connect, Communcate )

The MultiScreen API provides three primary features.

### Discover

In order for a client to start or join a MultiScreen experience, the client application must be able to discover a compatible SmartTV service. The API manages searching for compatible services and only requires a few lines of code. Below is a chunk of code from the Hello World mobile web application. For more details look review the Search & Service classes.

    var search = msf.search();

    search.on('found', function(services){
        for(var i=0; i<services.length; i++){
            console.log('Found service '+services[i].name);
        }
    });

    search.start();

### Connect

Once a compatible SmartTV is discovered, you can launch and connect to your SmartTV application from you mobile client. Application management is centeralized to a single class (Application) that handles starting, stopping, installing, and connecting to your application. Here is a quick example.

    // The first argument is the application id or hosted url
    // The second is the channel (communication) id you will use for your application
    var app = service.application('http://mydomain.com/myapp','com.mydomain.myapp');

    // App connect supports callback and event listener coding styles
    app.connect({name: 'John Doe'}, function (err) {
        if(err) return console.error(err);
        console.log('callback : you are connected');
    });

### Communicate

Once your client has started and established a connection with the SmartTV application, You can use the applications channel to send and receive messages between the devices. The Application class extends Channel, so in the example below we will continue with application instance we created earlier. Applications also provide notifications when someone connects, disconnects, and publishes a message.

    app.on('clientConnect', function(client){
        // This will publish the say event to the client that connected
        app.publish('say', 'Hello '+client.attributes.name, client.id);
    });

    // This event will fire when another client publishes the `say` event to a target including your client

    app.on('say', function(msg, fromClient){
        console.log(fromClient.attributes.name + ' says, ' + msg);
    });

## Examples

- HelloWorld
- PhotoShare

## License

MIT