「Network Service Discovery API ができました！」 と言われた時

「「Network Service Discovery API Network Service Discovery API ができました！」ができました！」

と言われた時と言われた時

Daniel Davis (@ourmaninjapan)Daniel Davis (@ourmaninjapan)

OOpera Softwarepera Software

bit.ly/nsd-apibit.ly/nsd-api

ある日…ある日…

「「Network Service Discovery API Network Service Discovery API ができました！」ができました！」

と言われた。と言われた。

「だからなに？」

と思った。

「その 「その API API をサポートするビルドができました！」をサポートするビルドができました！」

と言われた。と言われた。

「だからなに？」

と思った。

「このビルドで 「このビルドで UPnP UPnP が使えます！」が使えます！」

と言われた。と言われた。

「自分で調べるしかない」

と思った。

調べた結果…調べた結果…

UPnP UPnP とはとは

ネットワーク内にあるデバイスとのネットワーク内にあるデバイスとの

コミュニケーション方法コミュニケーション方法

http://www.flickr.com/photos/mogwai_83/4383552060/

UPnP UPnP デバイスの種類はいくつかあるデバイスの種類はいくつかある

↓↓

各各デバイスデバイスは一つ以上のは一つ以上のサービスサービスがあるがある

↓↓

各各サービスサービスはいくつかのはいくつかのアクションアクションがあるがある

↓↓

各各アクションアクションはいくつかのはいくつかのパラメータパラメータがあるがある

http://www.flickr.com/photos/mogwai_83/4383552060/

例えば、マルチメディア（例えば、マルチメディア（AVAV）の場合…）の場合…

「「AVAV」デバイスのサービスの一つは」デバイスのサービスの一つは

「「RenderingControlRenderingControl」である」である

↓↓

「「RenderingControlRenderingControl」のアクションの一つは」のアクションの一つは

「「GetVolumeGetVolume」である」である

↓↓

「「GetVolumeGetVolume」のパラメータの一つは」のパラメータの一つは

「「ChannelChannel」である」である

「それだけ？」

と思った

NoNo

UPnP UPnP マルチメディアデバイスは四つに分けられる：マルチメディアデバイスは四つに分けられる：

● ServerServer　（気前が良い）　（気前が良い）

● PlayerPlayer　（人見知り）　（人見知り）

● RendererRenderer　（子分）　（子分）

● ControllerController　（ボス）　（ボス）

その中、リモートで見つけられるサービスその中、リモートで見つけられるサービス

● Server Server のサービス：のサービス：● ContentDirectoryContentDirectory

● ConnectionManagerConnectionManager

● Renderer Renderer のサービス：のサービス：● AVTransport AVTransport （（メディアメディアがコントロールできる）がコントロールできる）

● RenderingControl RenderingControl （（デバイスデバイスがコントロールできる）がコントロールできる）

● ConnectionManagerConnectionManager

「だからなに？」

と思った。

[demo time][demo time]

こんな流れ：こんな流れ：

1.1. ネットワーク内のサービスを検索するネットワーク内のサービスを検索する

2.2. それぞれのサービスのそれぞれのサービスのURLURLを取得するを取得する

3.3. サービスのサービスのURLURLへメッセージを送信するへメッセージを送信する

4.4. サービスから返事を受信するサービスから返事を受信する

function showServices( services ) {function showServices( services ) { // // 「「servicesservices」がサービスの配列」がサービスの配列}}

function error( e ) {function error( e ) { console.log( "Error occurred: " + e.code );console.log( "Error occurred: " + e.code );}}

navigator.getNetworkServices(navigator.getNetworkServices( 'upnp:urn:schemas-upnp-'upnp:urn:schemas-upnp-org:service:ContentDirectory:1',org:service:ContentDirectory:1', showServices,showServices, errorerror););

1. 1. ネットワーク内のサービスを検索するネットワーク内のサービスを検索する

for(var i = 0, l = services.length; i < l; i++) {for(var i = 0, l = services.length; i < l; i++) { var service = services[i];var service = services[i]; var url = service.url;var url = service.url; // // 他にも「他にも「configconfig」、「」、「typetype」などの属性がある」などの属性がある}}

2. 2. それぞれのサービスのそれぞれのサービスのURLURLを取得するを取得する

<?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?><s:Envelope <s:Envelope s:encodingStyle="http://schemas.xmlsoap.org/soaps:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" /encoding/" xmlns:s="http://schemas.xmlsoap.org/soap/envelopxmlns:s="http://schemas.xmlsoap.org/soap/envelope/">e/"> <s:Body><s:Body> <u:GetVolume xmlns:u="urn:schemas-upnp-<u:GetVolume xmlns:u="urn:schemas-upnp-org:service:RenderingControl:1">org:service:RenderingControl:1"> <InstanceID>0</InstanceID><InstanceID>0</InstanceID> <Channel>Master</Channel><Channel>Master</Channel> </u:GetVolume></u:GetVolume> </s:Body></s:Body></s:Envelope></s:Envelope>

3. 3. サービスのサービスのURLURLへメッセージを送信するへメッセージを送信する

<?xml version="1.0" ?><?xml version="1.0" ?><s:Envelope <s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelopxmlns:s="http://schemas.xmlsoap.org/soap/envelope/" e/" s:EncodingStyle="http://schemas.xmlsoap.org/soaps:EncodingStyle="http://schemas.xmlsoap.org/soap/encoding/">/encoding/"> <s:Body><s:Body> <r:GetVolumeResponse <r:GetVolumeResponse xmlns:r="urn:schemas-upnp-xmlns:r="urn:schemas-upnp-org:service:RenderingControl:1"><CurrentVolume>0org:service:RenderingControl:1"><CurrentVolume>0</CurrentVolume></CurrentVolume> </r:GetVolumeResponse></r:GetVolumeResponse> </s:Body></s:Body></s:Envelope></s:Envelope>

4. 4. サービスから返事を受信するサービスから返事を受信する

[demo time][demo time]

「なかなかいいじゃん。何か作ってみよう！」

と思ったら…

問題問題

● あるデバイスが提供しているサービスが分からないあるデバイスが提供しているサービスが分からない

● あるサービスに使えるアクションが分からないあるサービスに使えるアクションが分からない

● あるメディアファイルが再生できるか分からないあるメディアファイルが再生できるか分からない

「なにこれ？」

と思った。

でも大丈夫。こんな資料がある：でも大丈夫。こんな資料がある：

www.dlna.org/consumer-home/look-for-www.dlna.org/consumer-home/look-for-

dlna/product-searchdlna/product-search

www.upnp-database.infowww.upnp-database.info

つまり…つまり…

家のデバイスをウェブページから家のデバイスをウェブページから

コントロールできると分かった時コントロールできると分かった時

「楽しい！」

と思った。

資料：資料：

dev.opera.com/articles/view/network-service-dev.opera.com/articles/view/network-service-

discovery-api-support-in-opera/discovery-api-support-in-opera/

richtr.github.com/plug.play.js/richtr.github.com/plug.play.js/

「「Network Service Discovery API Network Service Discovery API ができました！」ができました！」

と言われた時と言われた時

Daniel Davis (@ourmaninjapan)Daniel Davis (@ourmaninjapan)

OOpera Softwarepera Software

bit.ly/nsd-apibit.ly/nsd-api