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. If you are building through Xcode/Android Studio you will need to run the following command to update the projects.
cordova prepare
Otherwise, you can simply build with the Cordova tools</>
cordova build
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([
ConnectSDK.Capabilities.MediaPlayer.Play.Video,
ConnectSDK.Capabilities.MediaControl.Any,
ConnectSDK.Capabilities.VolumeControl.UpDown
]);
var imageFilter = new ConnectSDK.CapabilityFilter([
ConnectSDK.Capabilities.MediaPlayer.Display.Image
]);
ConnectSDK.discoveryManager.setCapabilityFilters([videoFilter, imageFilter]);
app.setupDiscovery();