Discover & Connect to Device

This guide assumes you're working with a brand new Cordova app as described in the Setup Instructions. It will show you how to add a button that selects a supported smart TV on your local WiFi network and displays a video.

Adding a device picker button

Open hello_connect/www/index.html in your preferred editor. Let's add a new button:

<div class="app">
  <h1>Apache Cordova</h1>
  <button onclick="app.showDevicePicker()">Select a TV</button>

Open hello_connect/www/js/index.js in your preferred text editor. Find the "onDeviceReady" method, which is called when Cordova is finished initializing. At the end, add the following line:

app.setupDiscovery();

Next, add a new method to the app object called setupDiscovery:

setupDiscovery: function () {
    ConnectSDK.discoveryManager.startDiscovery();
}

Now let's add a handler for the button:

showDevicePicker: function () {
    ConnectSDK.discoveryManager.pickDevice();
}

Let's build and run the modified example. You will need to run the following command to update the iOS/Android projects.

cordova prepare

If you're using Eclipse, you may also need to refresh the project by right clicking on the project and selecting "Refresh" (or hitting the F5 key).

Connecting to a device

If the app launch went well, you should be able to click on the "Select a TV" button to bring up a picker.

Next, we should allow the user to actually do something with the TV.

Open hello_connect/www/js/index.js again. We'll modify showDevicePicker to talk to the TV by chaining a success callback that will be called when a device is selected. This function will be called with a device object as the first argument, which we can use to send a video URL to the TV.

showDevicePicker: function () {
    ConnectSDK.discoveryManager.pickDevice().success(function (device) {
        function sendVideo () {
            device.getMediaPlayer().playMedia("http://media.w3.org/2010/05/sintel/trailer.mp4", "video/mp4");
        }

        if (device.isReady()) { // already connected
            sendVideo();
        } else {
            device.on("ready", sendVideo);
            device.connect();
        }
    })
}

Capability Filtering

If your app is making use of certain device capabilities (media playback/controls, web app launching, etc), it is strongly recommended that you create filters with this information for DiscoveryManager.

Devices that are discovered & shown in the picker will be guaranteed to have the set of capabilities that you have provided. This will prevent your users from selecting a device that has not yet acquired all of its protocols.

var videoFilter = new ConnectSDK.CapabilityFilter([
   "MediaPlayer.Display.Video", 
   "MediaControl.Any", 
    "VolumeControl.UpDown" 
]);
		
var imageFilter = new ConnectSDK.CapabilityFilter([
    "MediaPlayer.Display.Image"
]);
		
ConnectSDK.discoveryManager.setCapabilityFilters([videoFilter, imageFilter]);

app.setupDiscovery();