--- a/discovery-api/FPWD.html Fri Aug 03 15:48:19 2012 +0200
+++ b/discovery-api/FPWD.html Fri Aug 03 15:49:17 2012 +0200
@@ -553,9 +553,9 @@
<dl>
<dt>This version:</dt>
- <dd><a href="http://www.w3.org/TR/2012/WD-discovery-20120807/">http://www.w3.org/TR/2012/WD-discovery-20120807/</a></dd>
+ <dd><a href="http://www.w3.org/TR/2012/WD-discovery-api-20120807/">http://www.w3.org/TR/2012/WD-discovery-api-20120807/</a></dd>
<dt>Latest published version:</dt>
- <dd><a href="http://www.w3.org/TR/discovery/">http://www.w3.org/TR/discovery/</a></dd>
+ <dd><a href="http://www.w3.org/TR/discovery-api/">http://www.w3.org/TR/discovery-api/</a></dd>
<dt>Latest editor's draft:</dt>
@@ -696,19 +696,19 @@
<div class="example">
<p>Example of requesting a <acronym title="Domain Name System">DNS</acronym>-<acronym title="Service Discovery">SD</acronym> advertised service:</p>
<hr>
- <div><div id="highlighter_298302" class="syntaxhighlighter nogutter js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">showServices( services ) {</code></div><div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js comments">// Show a list of all the services provided to the web page</code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js keyword">for</code><code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0, l = services.length; i < l; i++) console.log( services[i].name );</code></div><div class="line number4 index3 alt1"><code class="js plain">}</code></div><div class="line number5 index4 alt2"> </div><div class="line number6 index5 alt1"><code class="js plain">navigator.getNetworkServices(</code><code class="js string">'zeroconf:_boxee-jsonrpc._tcp'</code><code class="js plain">, showServices);</code></div></div></td></tr></tbody></table></div></div>
+ <div><div id="highlighter_999770" class="syntaxhighlighter nogutter js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">showServices( services ) {</code></div><div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js comments">// Show a list of all the services provided to the web page</code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js keyword">for</code><code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0, l = services.length; i < l; i++) console.log( services[i].name );</code></div><div class="line number4 index3 alt1"><code class="js plain">}</code></div><div class="line number5 index4 alt2"> </div><div class="line number6 index5 alt1"><code class="js plain">navigator.getNetworkServices(</code><code class="js string">'zeroconf:_boxee-jsonrpc._tcp'</code><code class="js plain">, showServices);</code></div></div></td></tr></tbody></table></div></div>
</div>
<div class="example">
<p>Example of requesting a <acronym title="Universal Plug-and-Play">UPnP</acronym> advertised service, also handling error conditions:</p>
<hr>
- <div><div id="highlighter_130265" class="syntaxhighlighter nogutter js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">showServices( services ) {</code></div><div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js comments">// Show a list of all the services provided to the web page</code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js keyword">for</code><code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0, l = services.length; i < l; i++) console.log( services[i].name );</code></div><div class="line number4 index3 alt1"><code class="js plain">}</code></div><div class="line number5 index4 alt2"> </div><div class="line number6 index5 alt1"><code class="js keyword">function</code> <code class="js plain">error( e ) {</code></div><div class="line number7 index6 alt2"><code class="js spaces"> </code><code class="js plain">console.log( </code><code class="js string">"Error occurred: "</code> <code class="js plain">+ e.code );</code></div><div class="line number8 index7 alt1"><code class="js plain">}</code></div><div class="line number9 index8 alt2"> </div><div class="line number10 index9 alt1"><code class="js plain">navigator.getNetworkServices(</code><code class="js string">'upnp:urn:schemas-upnp-org:service:ContentDirectory:1'</code><code class="js plain">, showServices, error);</code></div></div></td></tr></tbody></table></div></div>
+ <div><div id="highlighter_14212" class="syntaxhighlighter nogutter js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">showServices( services ) {</code></div><div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js comments">// Show a list of all the services provided to the web page</code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js keyword">for</code><code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0, l = services.length; i < l; i++) console.log( services[i].name );</code></div><div class="line number4 index3 alt1"><code class="js plain">}</code></div><div class="line number5 index4 alt2"> </div><div class="line number6 index5 alt1"><code class="js keyword">function</code> <code class="js plain">error( e ) {</code></div><div class="line number7 index6 alt2"><code class="js spaces"> </code><code class="js plain">console.log( </code><code class="js string">"Error occurred: "</code> <code class="js plain">+ e.code );</code></div><div class="line number8 index7 alt1"><code class="js plain">}</code></div><div class="line number9 index8 alt2"> </div><div class="line number10 index9 alt1"><code class="js plain">navigator.getNetworkServices(</code><code class="js string">'upnp:urn:schemas-upnp-org:service:ContentDirectory:1'</code><code class="js plain">, showServices, error);</code></div></div></td></tr></tbody></table></div></div>
</div>
<div class="example">
<p>Example of requesting either a <acronym title="Domain Name System">DNS</acronym>-<acronym title="Service Discovery">SD</acronym> or <acronym title="Universal Plug-and-Play">UPnP</acronym> advertised service:</p>
<hr>
- <div><div id="highlighter_213183" class="syntaxhighlighter nogutter js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">showServices( services ) {</code></div><div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js comments">// Show a list of all the services provided to the web page (+ service type)</code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js keyword">for</code><code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0, l = services.length; i < l; i++)</code></div><div class="line number4 index3 alt1"><code class="js spaces"> </code><code class="js plain">console.log( services[i].name + </code><code class="js string">'('</code> <code class="js plain">+ services[i].type + </code><code class="js string">')'</code> <code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div><div class="line number6 index5 alt1"> </div><div class="line number7 index6 alt2"><code class="js plain">navigator.getNetworkServices([</code></div><div class="line number8 index7 alt1"><code class="js spaces"> </code><code class="js string">'zeroconf:_boxee-jsonrpc._tcp'</code><code class="js plain">,</code></div><div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js string">'upnp:urn:schemas-upnp-org:service:ContentDirectory:1'</code></div><div class="line number10 index9 alt1"><code class="js plain">], showServices);</code></div></div></td></tr></tbody></table></div></div>
+ <div><div id="highlighter_404060" class="syntaxhighlighter nogutter js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">showServices( services ) {</code></div><div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js comments">// Show a list of all the services provided to the web page (+ service type)</code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js keyword">for</code><code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0, l = services.length; i < l; i++)</code></div><div class="line number4 index3 alt1"><code class="js spaces"> </code><code class="js plain">console.log( services[i].name + </code><code class="js string">'('</code> <code class="js plain">+ services[i].type + </code><code class="js string">')'</code> <code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div><div class="line number6 index5 alt1"> </div><div class="line number7 index6 alt2"><code class="js plain">navigator.getNetworkServices([</code></div><div class="line number8 index7 alt1"><code class="js spaces"> </code><code class="js string">'zeroconf:_boxee-jsonrpc._tcp'</code><code class="js plain">,</code></div><div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js string">'upnp:urn:schemas-upnp-org:service:ContentDirectory:1'</code></div><div class="line number10 index9 alt1"><code class="js plain">], showServices);</code></div></div></td></tr></tbody></table></div></div>
</div>
<p>For more detailed examples see the <a href="#examples">Examples</a> section.
@@ -1918,7 +1918,7 @@
</p><p>The button is re-enabled only when the connected network service disconnects for whatever reason (the service becomes unavailable on the network, the user disconnects from their current network or the user revokes access to the service from the current web page). At this point the user can re-click the button to select a new network service to connect to the web page and the above steps are repeated.</p>
<p>The provided service type identifier and service interaction used in this example is based on the well-defined service type and messaging format supported by the <a href="http://xbmc.org/about/">XBMC Media Server</a>. </p>
<hr>
- <div><div id="highlighter_949204" class="syntaxhighlighter nogutter js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain"><input type=</code><code class="js string">"button"</code> <code class="js plain">value=</code><code class="js string">"Start"</code> <code class="js plain">onclick=</code><code class="js string">"start()"</code> <code class="js plain">id=</code><code class="js string">"startBtn"</code><code class="js plain">/></code></div><div class="line number2 index1 alt1"><code class="js plain"><div id=</code><code class="js string">"debugconsole"</code><code class="js plain">></div></code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="js plain"><script></code></div><div class="line number5 index4 alt2"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">startBtn = document.getElementById(</code><code class="js string">'startBtn'</code><code class="js plain">),</code></div><div class="line number6 index5 alt1"><code class="js spaces"> </code><code class="js plain">debug = document.getElementById(</code><code class="js string">'debugconsole'</code><code class="js plain">);</code></div><div class="line number7 index6 alt2"> </div><div class="line number8 index7 alt1"><code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">start() {</code></div><div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(navigator.getNetworkServices) {</code></div><div class="line number10 index9 alt1"><code class="js spaces"> </code><code class="js plain">navigator.getNetworkServices(</code><code class="js string">'zeroconf:_xbmc-jsonrpc._tcp'</code><code class="js plain">, gotXBMCService, error);</code></div><div class="line number11 index10 alt2"><code class="js spaces"> </code><code class="js plain">startBtn.disabled = </code><code class="js keyword">true</code><code class="js plain">;</code></div><div class="line number12 index11 alt1"><code class="js spaces"> </code><code class="js plain">} </code><code class="js keyword">else</code> <code class="js plain">{</code></div><div class="line number13 index12 alt2"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>Service Discovery API not supported!"</code><code class="js plain">;</code></div><div class="line number14 index13 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number15 index14 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number16 index15 alt1"> </div><div class="line number17 index16 alt2"><code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">gotXBMCService(services) {</code></div><div class="line number18 index17 alt1"> </div><div class="line number19 index18 alt2"><code class="js comments">// Listen for service disconnect messages</code></div><div class="line number20 index19 alt1"> </div><div class="line number21 index20 alt2"><code class="js spaces"> </code><code class="js plain">services[0].addEventListener(</code><code class="js string">'readystatechange'</code><code class="js plain">, </code><code class="js keyword">function</code> <code class="js plain">( e ) {</code></div><div class="line number22 index21 alt1"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(services[0].readyState === services[0].UNAVAILABLE) {</code></div><div class="line number23 index22 alt2"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>"</code> <code class="js plain">+ services[0].name + </code><code class="js string">" disconnected."</code><code class="js plain">;</code></div><div class="line number24 index23 alt1"><code class="js spaces"> </code><code class="js plain">startBtn.disabled = </code><code class="js keyword">false</code><code class="js plain">;</code></div><div class="line number25 index24 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number26 index25 alt1"><code class="js spaces"> </code><code class="js plain">}, </code><code class="js keyword">false</code><code class="js plain">);</code></div><div class="line number27 index26 alt2"> </div><div class="line number28 index27 alt1"><code class="js comments">// Send a service message to get albums list (and process the service response)</code></div><div class="line number29 index28 alt2"> </div><div class="line number30 index29 alt1"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">svcXhr = </code><code class="js keyword">new</code> <code class="js plain">XMLHttpRequest();</code></div><div class="line number31 index30 alt2"><code class="js spaces"> </code><code class="js plain">svcXhr.open(</code><code class="js string">"POST"</code><code class="js plain">, services[0].url + </code><code class="js string">"/getAlbums"</code><code class="js plain">); </code><code class="js comments">// services[0].url and its subresources have been</code></div><div class="line number32 index31 alt1"><code class="js spaces"> </code><code class="js comments">// whitelisted for cross-site XHR use in this</code></div><div class="line number33 index32 alt2"><code class="js spaces"> </code><code class="js comments">// current browsing context.</code></div><div class="line number34 index33 alt1"> </div><div class="line number35 index34 alt2"><code class="js spaces"> </code><code class="js plain">svcXhr.setRequestHeader(</code><code class="js string">'Content-Type'</code><code class="js plain">, </code><code class="js string">'application/json-rpc'</code><code class="js plain">);</code></div><div class="line number36 index35 alt1"> </div><div class="line number37 index36 alt2"><code class="js spaces"> </code><code class="js plain">svcXhr.addEventListener(</code><code class="js string">'readystatechange'</code><code class="js plain">, </code><code class="js keyword">function</code> <code class="js plain">( response ) {</code></div><div class="line number38 index37 alt1"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">( response.readyState != 4 || response.status != 200 )</code></div><div class="line number39 index38 alt2"><code class="js spaces"> </code><code class="js keyword">return</code><code class="js plain">;</code></div><div class="line number40 index39 alt1"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>"</code> <code class="js plain">+ services[0].name + </code><code class="js string">" response received: "</code><code class="js plain">;</code></div><div class="line number41 index40 alt2"><code class="js spaces"> </code><code class="js plain">debug.textContent += JSON.parse(response.responseText);</code></div><div class="line number42 index41 alt1"><code class="js spaces"> </code><code class="js plain">}, </code><code class="js keyword">false</code><code class="js plain">);</code></div><div class="line number43 index42 alt2"> </div><div class="line number44 index43 alt1"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">svcMsg = [</code></div><div class="line number45 index44 alt2"><code class="js spaces"> </code><code class="js plain">{ </code><code class="js string">"jsonrpc"</code><code class="js plain">: </code><code class="js string">"2.0"</code><code class="js plain">, </code><code class="js string">"method"</code><code class="js plain">: </code><code class="js string">"AudioLibrary.GetAlbums"</code><code class="js plain">, </code><code class="js string">"params"</code><code class="js plain">: { </code><code class="js string">"genreid"</code><code class="js plain">: -1,</code></div><div class="line number46 index45 alt1"><code class="js spaces"> </code><code class="js string">"artistid"</code><code class="js plain">: -1, </code><code class="js string">"start"</code><code class="js plain">: -1, </code><code class="js string">"end"</code><code class="js plain">: -1 }, </code><code class="js string">"id"</code><code class="js plain">: </code><code class="js string">"1"</code> <code class="js plain">}</code></div><div class="line number47 index46 alt2"><code class="js spaces"> </code><code class="js plain">];</code></div><div class="line number48 index47 alt1"> </div><div class="line number49 index48 alt2"><code class="js spaces"> </code><code class="js plain">svcXhr.send(JSON.stringify(svcMsg));</code></div><div class="line number50 index49 alt1"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>"</code> <code class="js plain">+ services[0].name + </code><code class="js string">" request sent: "</code><code class="js plain">;</code></div><div class="line number51 index50 alt2"><code class="js spaces"> </code><code class="js plain">debug.textContent += JSON.stringify(svcMsg);</code></div><div class="line number52 index51 alt1"> </div><div class="line number53 index52 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number54 index53 alt1"> </div><div class="line number55 index54 alt2"><code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">error( err ) {</code></div><div class="line number56 index55 alt1"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>An error occurred obtaining a local network service."</code><code class="js plain">;</code></div><div class="line number57 index56 alt2"><code class="js spaces"> </code><code class="js plain">startBtn.disabled = </code><code class="js keyword">false</code><code class="js plain">;</code></div><div class="line number58 index57 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number59 index58 alt2"><code class="js plain"></script></code></div></div></td></tr></tbody></table></div></div>
+ <div><div id="highlighter_625563" class="syntaxhighlighter nogutter js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain"><input type=</code><code class="js string">"button"</code> <code class="js plain">value=</code><code class="js string">"Start"</code> <code class="js plain">onclick=</code><code class="js string">"start()"</code> <code class="js plain">id=</code><code class="js string">"startBtn"</code><code class="js plain">/></code></div><div class="line number2 index1 alt1"><code class="js plain"><div id=</code><code class="js string">"debugconsole"</code><code class="js plain">></div></code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="js plain"><script></code></div><div class="line number5 index4 alt2"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">startBtn = document.getElementById(</code><code class="js string">'startBtn'</code><code class="js plain">),</code></div><div class="line number6 index5 alt1"><code class="js spaces"> </code><code class="js plain">debug = document.getElementById(</code><code class="js string">'debugconsole'</code><code class="js plain">);</code></div><div class="line number7 index6 alt2"> </div><div class="line number8 index7 alt1"><code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">start() {</code></div><div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(navigator.getNetworkServices) {</code></div><div class="line number10 index9 alt1"><code class="js spaces"> </code><code class="js plain">navigator.getNetworkServices(</code><code class="js string">'zeroconf:_xbmc-jsonrpc._tcp'</code><code class="js plain">, gotXBMCService, error);</code></div><div class="line number11 index10 alt2"><code class="js spaces"> </code><code class="js plain">startBtn.disabled = </code><code class="js keyword">true</code><code class="js plain">;</code></div><div class="line number12 index11 alt1"><code class="js spaces"> </code><code class="js plain">} </code><code class="js keyword">else</code> <code class="js plain">{</code></div><div class="line number13 index12 alt2"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>Service Discovery <acronym title="Application Programming Interface">API</acronym> not supported!"</code><code class="js plain">;</code></div><div class="line number14 index13 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number15 index14 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number16 index15 alt1"> </div><div class="line number17 index16 alt2"><code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">gotXBMCService(services) {</code></div><div class="line number18 index17 alt1"> </div><div class="line number19 index18 alt2"><code class="js comments">// Listen for service disconnect messages</code></div><div class="line number20 index19 alt1"> </div><div class="line number21 index20 alt2"><code class="js spaces"> </code><code class="js plain">services[0].addEventListener(</code><code class="js string">'readystatechange'</code><code class="js plain">, </code><code class="js keyword">function</code> <code class="js plain">( e ) {</code></div><div class="line number22 index21 alt1"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(services[0].readyState === services[0].UNAVAILABLE) {</code></div><div class="line number23 index22 alt2"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>"</code> <code class="js plain">+ services[0].name + </code><code class="js string">" disconnected."</code><code class="js plain">;</code></div><div class="line number24 index23 alt1"><code class="js spaces"> </code><code class="js plain">startBtn.disabled = </code><code class="js keyword">false</code><code class="js plain">;</code></div><div class="line number25 index24 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number26 index25 alt1"><code class="js spaces"> </code><code class="js plain">}, </code><code class="js keyword">false</code><code class="js plain">);</code></div><div class="line number27 index26 alt2"> </div><div class="line number28 index27 alt1"><code class="js comments">// Send a service message to get albums list (and process the service response)</code></div><div class="line number29 index28 alt2"> </div><div class="line number30 index29 alt1"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">svcXhr = </code><code class="js keyword">new</code> <code class="js plain">XMLHttpRequest();</code></div><div class="line number31 index30 alt2"><code class="js spaces"> </code><code class="js plain">svcXhr.open(</code><code class="js string">"POST"</code><code class="js plain">, services[0].url + </code><code class="js string">"/getAlbums"</code><code class="js plain">); </code><code class="js comments">// services[0].url and its subresources have been</code></div><div class="line number32 index31 alt1"><code class="js spaces"> </code><code class="js comments">// whitelisted for cross-site XHR use in this</code></div><div class="line number33 index32 alt2"><code class="js spaces"> </code><code class="js comments">// current browsing context.</code></div><div class="line number34 index33 alt1"> </div><div class="line number35 index34 alt2"><code class="js spaces"> </code><code class="js plain">svcXhr.setRequestHeader(</code><code class="js string">'Content-Type'</code><code class="js plain">, </code><code class="js string">'application/json-rpc'</code><code class="js plain">);</code></div><div class="line number36 index35 alt1"> </div><div class="line number37 index36 alt2"><code class="js spaces"> </code><code class="js plain">svcXhr.addEventListener(</code><code class="js string">'readystatechange'</code><code class="js plain">, </code><code class="js keyword">function</code> <code class="js plain">( response ) {</code></div><div class="line number38 index37 alt1"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">( response.readyState != 4 || response.status != 200 )</code></div><div class="line number39 index38 alt2"><code class="js spaces"> </code><code class="js keyword">return</code><code class="js plain">;</code></div><div class="line number40 index39 alt1"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>"</code> <code class="js plain">+ services[0].name + </code><code class="js string">" response received: "</code><code class="js plain">;</code></div><div class="line number41 index40 alt2"><code class="js spaces"> </code><code class="js plain">debug.textContent += JSON.parse(response.responseText);</code></div><div class="line number42 index41 alt1"><code class="js spaces"> </code><code class="js plain">}, </code><code class="js keyword">false</code><code class="js plain">);</code></div><div class="line number43 index42 alt2"> </div><div class="line number44 index43 alt1"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">svcMsg = [</code></div><div class="line number45 index44 alt2"><code class="js spaces"> </code><code class="js plain">{ </code><code class="js string">"jsonrpc"</code><code class="js plain">: </code><code class="js string">"2.0"</code><code class="js plain">, </code><code class="js string">"method"</code><code class="js plain">: </code><code class="js string">"AudioLibrary.GetAlbums"</code><code class="js plain">, </code><code class="js string">"params"</code><code class="js plain">: { </code><code class="js string">"genreid"</code><code class="js plain">: -1,</code></div><div class="line number46 index45 alt1"><code class="js spaces"> </code><code class="js string">"artistid"</code><code class="js plain">: -1, </code><code class="js string">"start"</code><code class="js plain">: -1, </code><code class="js string">"end"</code><code class="js plain">: -1 }, </code><code class="js string">"id"</code><code class="js plain">: </code><code class="js string">"1"</code> <code class="js plain">}</code></div><div class="line number47 index46 alt2"><code class="js spaces"> </code><code class="js plain">];</code></div><div class="line number48 index47 alt1"> </div><div class="line number49 index48 alt2"><code class="js spaces"> </code><code class="js plain">svcXhr.send(JSON.stringify(svcMsg));</code></div><div class="line number50 index49 alt1"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>"</code> <code class="js plain">+ services[0].name + </code><code class="js string">" request sent: "</code><code class="js plain">;</code></div><div class="line number51 index50 alt2"><code class="js spaces"> </code><code class="js plain">debug.textContent += JSON.stringify(svcMsg);</code></div><div class="line number52 index51 alt1"> </div><div class="line number53 index52 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number54 index53 alt1"> </div><div class="line number55 index54 alt2"><code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">error( err ) {</code></div><div class="line number56 index55 alt1"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>An error occurred obtaining a local network service."</code><code class="js plain">;</code></div><div class="line number57 index56 alt2"><code class="js spaces"> </code><code class="js plain">startBtn.disabled = </code><code class="js keyword">false</code><code class="js plain">;</code></div><div class="line number58 index57 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number59 index58 alt2"><code class="js plain"></script></code></div></div></td></tr></tbody></table></div></div>
</div>
<div class="example">
@@ -1930,7 +1930,7 @@
<br><br>Once the user has authorized the device, the web page sends a simple mute command according to the messaging format supported by the device.
</p>
<hr>
- <div><div id="highlighter_579010" class="syntaxhighlighter nogutter js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain"><select name=</code><code class="js string">"make"</code> <code class="js plain">id=</code><code class="js string">"make"</code><code class="js plain">></code></div><div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain"><option selected=</code><code class="js string">"selected"</code> <code class="js plain">disabled=</code><code class="js string">"disabled"</code><code class="js plain">>Select make</option></code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain"><option>Sony</option></code></div><div class="line number4 index3 alt1"><code class="js spaces"> </code><code class="js plain"><option>Philips</option></code></div><div class="line number5 index4 alt2"><code class="js spaces"> </code><code class="js plain"><option>Alba</option></code></div><div class="line number6 index5 alt1"><code class="js plain"></select></code></div><div class="line number7 index6 alt2"><code class="js plain"><select name=</code><code class="js string">"model"</code> <code class="js plain">id=</code><code class="js string">"model"</code><code class="js plain">></select></code></div><div class="line number8 index7 alt1"><code class="js plain"><div id=</code><code class="js string">"debugconsole"</code><code class="js plain">></div></code></div><div class="line number9 index8 alt2"> </div><div class="line number10 index9 alt1"><code class="js plain"><script></code></div><div class="line number11 index10 alt2"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">debug = document.getElementById(</code><code class="js string">'debugconsole'</code><code class="js plain">);</code></div><div class="line number12 index11 alt1"> </div><div class="line number13 index12 alt2"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">models = {</code></div><div class="line number14 index13 alt1"><code class="js spaces"> </code><code class="js string">"Sony"</code><code class="js plain">: [</code></div><div class="line number15 index14 alt2"><code class="js spaces"> </code><code class="js plain">{</code><code class="js string">"name"</code><code class="js plain">: </code><code class="js string">"Bravia TV S1000"</code><code class="js plain">, </code><code class="js string">"type"</code><code class="js plain">: </code><code class="js string">"upnp"</code><code class="js plain">, </code><code class="js string">"service"</code><code class="js plain">: </code><code class="js string">"urn:schemas-upnp-org:service:RenderingControl:1"</code> <code class="js plain">},</code></div><div class="line number16 index15 alt1"><code class="js spaces"> </code><code class="js plain">{</code><code class="js string">"name"</code><code class="js plain">: </code><code class="js string">"Bravia TV S2000"</code><code class="js plain">, </code><code class="js string">"type"</code><code class="js plain">: </code><code class="js string">"zeroconf"</code><code class="js plain">, </code><code class="js string">"service"</code><code class="js plain">: </code><code class="js string">"_mediarenderer._http._tcp"</code> <code class="js plain">},</code></div><div class="line number17 index16 alt2"><code class="js spaces"> </code><code class="js plain">{</code><code class="js string">"name"</code><code class="js plain">: </code><code class="js string">"HiFi WD10"</code><code class="js plain">, </code><code class="js string">"type"</code><code class="js plain">: </code><code class="js string">"upnp"</code><code class="js plain">, </code><code class="js string">"service"</code><code class="js plain">: </code><code class="js string">"urn:schemas-upnp-org:service:RenderingControl:1"</code> <code class="js plain">}</code></div><div class="line number18 index17 alt1"><code class="js spaces"> </code><code class="js plain">],</code></div><div class="line number19 index18 alt2"><code class="js spaces"> </code><code class="js string">"Philips"</code><code class="js plain">: [ </code><code class="js comments">/* ... */</code> <code class="js plain">],</code></div><div class="line number20 index19 alt1"><code class="js spaces"> </code><code class="js string">"Alba"</code><code class="js plain">: [ </code><code class="js comments">/* ... */</code> <code class="js plain">]</code></div><div class="line number21 index20 alt2"><code class="js spaces"> </code><code class="js plain">};</code></div><div class="line number22 index21 alt1"> </div><div class="line number23 index22 alt2"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">makeEl = document.getElementById(</code><code class="js string">"make"</code><code class="js plain">),</code></div><div class="line number24 index23 alt1"><code class="js spaces"> </code><code class="js plain">modelEl = document.getElementById(</code><code class="js string">"model"</code><code class="js plain">);</code></div><div class="line number25 index24 alt2"> </div><div class="line number26 index25 alt1"><code class="js spaces"> </code><code class="js plain">makeEl.addEventListener(</code><code class="js string">'change'</code><code class="js plain">, </code><code class="js keyword">function</code><code class="js plain">() {</code></div><div class="line number27 index26 alt2"><code class="js spaces"> </code><code class="js plain">modelEl.innerHTML = </code><code class="js string">""</code><code class="js plain">; </code><code class="js comments">// reset</code></div><div class="line number28 index27 alt1"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">defaultOption = document.createElement(</code><code class="js string">"option"</code><code class="js plain">);</code></div><div class="line number29 index28 alt2"><code class="js spaces"> </code><code class="js plain">defaultOption.textContent = </code><code class="js string">"Select model"</code><code class="js plain">;</code></div><div class="line number30 index29 alt1"><code class="js spaces"> </code><code class="js plain">defaultOption.setAttribute(</code><code class="js string">"disabled"</code><code class="js plain">, </code><code class="js string">"disabled"</code><code class="js plain">);</code></div><div class="line number31 index30 alt2"><code class="js spaces"> </code><code class="js plain">defaultOption.setAttribute(</code><code class="js string">"selected"</code><code class="js plain">, </code><code class="js string">"selected"</code><code class="js plain">);</code></div><div class="line number32 index31 alt1"><code class="js spaces"> </code><code class="js plain">modelEl.appendChild(defaultOption);</code></div><div class="line number33 index32 alt2"><code class="js spaces"> </code><code class="js keyword">for</code><code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0, l = models[makeEl.value].length; i < l; i++) {</code></div><div class="line number34 index33 alt1"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">option = document.createElement(</code><code class="js string">"option"</code><code class="js plain">);</code></div><div class="line number35 index34 alt2"><code class="js spaces"> </code><code class="js plain">option.textContent = models[makeEl.value][i][</code><code class="js string">"name"</code><code class="js plain">];</code></div><div class="line number36 index35 alt1"><code class="js spaces"> </code><code class="js plain">option.setAttribute(</code><code class="js string">"value"</code><code class="js plain">, models[makeEl.value][i][</code><code class="js string">"type"</code><code class="js plain">] + </code><code class="js string">":"</code> <code class="js plain">+ models[makeEl.value][i][</code><code class="js string">"service"</code><code class="js plain">]);</code></div><div class="line number37 index36 alt2"><code class="js spaces"> </code><code class="js plain">modelEl.appendChild(option);</code></div><div class="line number38 index37 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number39 index38 alt2"><code class="js spaces"> </code><code class="js plain">}, </code><code class="js keyword">false</code><code class="js plain">);</code></div><div class="line number40 index39 alt1"> </div><div class="line number41 index40 alt2"><code class="js spaces"> </code><code class="js plain">modelEl.addEventListener(</code><code class="js string">'change'</code><code class="js plain">, </code><code class="js keyword">function</code><code class="js plain">() {</code></div><div class="line number42 index41 alt1"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(navigator.getNetworkServices &&</code></div><div class="line number43 index42 alt2"><code class="js spaces"> </code><code class="js plain">modelEl.value == </code><code class="js string">"upnp:urn:schemas-upnp-org:service:RenderingControl:1"</code><code class="js plain">) {</code></div><div class="line number44 index43 alt1"><code class="js spaces"> </code><code class="js plain">navigator.getNetworkServices(modelEl.value, successCallback, errorCallback);</code></div><div class="line number45 index44 alt2"><code class="js spaces"> </code><code class="js plain">} </code><code class="js keyword">else</code> <code class="js keyword">if</code> <code class="js plain">(modelEl.value == </code><code class="js string">"zeroconf:_mediarenderer._http._tcp"</code><code class="js plain">) {</code></div><div class="line number46 index45 alt1"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>Service type is not implemented by this application."</code><code class="js plain">;</code></div><div class="line number47 index46 alt2"><code class="js spaces"> </code><code class="js plain">} </code><code class="js keyword">else</code> <code class="js plain">{</code></div><div class="line number48 index47 alt1"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>Service Discovery is not supported!"</code><code class="js plain">;</code></div><div class="line number49 index48 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number50 index49 alt1"><code class="js spaces"> </code><code class="js plain">}, </code><code class="js keyword">false</code><code class="js plain">);</code></div><div class="line number51 index50 alt2"><code class="js plain"></script></code></div><div class="line number52 index51 alt1"> </div><div class="line number53 index52 alt2"><code class="js plain"><script></code></div><div class="line number54 index53 alt1"><code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">successCallback( services ) {</code></div><div class="line number55 index54 alt2"> </div><div class="line number56 index55 alt1"><code class="js spaces"> </code><code class="js comments">// Listen for service push messages</code></div><div class="line number57 index56 alt2"> </div><div class="line number58 index57 alt1"><code class="js spaces"> </code><code class="js plain">services[0].addEventListener(</code><code class="js string">'message'</code><code class="js plain">, </code><code class="js keyword">function</code> <code class="js plain">( msg ) {</code></div><div class="line number59 index58 alt2"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>"</code> <code class="js plain">+ services[0].name + </code><code class="js string">" event received: "</code><code class="js plain">;</code></div><div class="line number60 index59 alt1"><code class="js spaces"> </code><code class="js plain">debug.textContent += msg.data;</code></div><div class="line number61 index60 alt2"><code class="js spaces"> </code><code class="js plain">}, </code><code class="js keyword">false</code><code class="js plain">);</code></div><div class="line number62 index61 alt1"> </div><div class="line number63 index62 alt2"><code class="js spaces"> </code><code class="js comments">// Send a control signal to mute the service audio</code></div><div class="line number64 index63 alt1"> </div><div class="line number65 index64 alt2"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">svcXhr = </code><code class="js keyword">new</code> <code class="js plain">XMLHttpRequest();</code></div><div class="line number66 index65 alt1"><code class="js spaces"> </code><code class="js plain">svcXhr.open(</code><code class="js string">"POST"</code><code class="js plain">, services[0].url); </code><code class="js comments">// services[0].url and its</code></div><div class="line number67 index66 alt2"><code class="js spaces"> </code><code class="js comments">// subresources have been whitelisted for</code></div><div class="line number68 index67 alt1"><code class="js spaces"> </code><code class="js comments">// cross-site XHR use in this current</code></div><div class="line number69 index68 alt2"><code class="js spaces"> </code><code class="js comments">// browsing context.</code></div><div class="line number70 index69 alt1"> </div><div class="line number71 index70 alt2"><code class="js spaces"> </code><code class="js plain">svcXhr.setRequestHeader(</code><code class="js string">'SOAPAction'</code><code class="js plain">, </code><code class="js string">'urn:schemas-upnp-org:service:RenderingControl:1#SetMute'</code><code class="js plain">);</code></div><div class="line number72 index71 alt1"><code class="js spaces"> </code><code class="js plain">svcXhr.setRequestHeader(</code><code class="js string">'Content-Type'</code><code class="js plain">, </code><code class="js string">'text/xml; charset="utf-8";'</code><code class="js plain">);</code></div><div class="line number73 index72 alt2"> </div><div class="line number74 index73 alt1"><code class="js spaces"> </code><code class="js plain">svcXhr.onreadystatechange = </code><code class="js keyword">function</code> <code class="js plain">( response ) {</code></div><div class="line number75 index74 alt2"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">( response.readyState != 4 || response.status != 200 )</code></div><div class="line number76 index75 alt1"><code class="js spaces"> </code><code class="js keyword">return</code><code class="js plain">;</code></div><div class="line number77 index76 alt2"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>"</code> <code class="js plain">+ services[0].name + </code><code class="js string">" response received: "</code><code class="js plain">;</code></div><div class="line number78 index77 alt1"><code class="js spaces"> </code><code class="js plain">debug.textContent += response.responseXML;</code></div><div class="line number79 index78 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number80 index79 alt1"> </div><div class="line number81 index80 alt2"><code class="js spaces"> </code><code class="js comments">// Service messaging to mute the provided service</code></div><div class="line number82 index81 alt1"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">svcMsg = </code><code class="js string">'<?xml version="1.0" encoding="utf-8"?>'</code> <code class="js plain">+</code></div><div class="line number83 index82 alt2"><code class="js spaces"> </code><code class="js string">'<s:Envelope s:encodingStyle="<a href="http://schemas.xmlsoap.org/soap/encoding/">http://schemas.xmlsoap.org/soap/encoding/</a>" '</code> <code class="js plain">+</code></div><div class="line number84 index83 alt1"><code class="js spaces"> </code><code class="js string">'xmlns:s="<a href="http://schemas.xmlsoap.org/soap/envelope/">http://schemas.xmlsoap.org/soap/envelope/</a>">'</code> <code class="js plain">+</code></div><div class="line number85 index84 alt2"><code class="js spaces"> </code><code class="js string">'<s:Body>'</code> <code class="js plain">+</code></div><div class="line number86 index85 alt1"><code class="js spaces"> </code><code class="js string">'<u:SetMute xmlns:u="urn:schemas-upnp-org:service:RenderingControl:1">'</code> <code class="js plain">+</code></div><div class="line number87 index86 alt2"><code class="js spaces"> </code><code class="js string">'<InstanceID>0</InstanceID>'</code> <code class="js plain">+</code></div><div class="line number88 index87 alt1"><code class="js spaces"> </code><code class="js string">'<Channel>Master</Channel>'</code> <code class="js plain">+</code></div><div class="line number89 index88 alt2"><code class="js spaces"> </code><code class="js string">'<DesiredMute>true</DesiredMute>'</code> <code class="js plain">+</code></div><div class="line number90 index89 alt1"><code class="js spaces"> </code><code class="js string">'</u:SetMute>'</code> <code class="js plain">+</code></div><div class="line number91 index90 alt2"><code class="js spaces"> </code><code class="js string">'</s:Body>'</code> <code class="js plain">+</code></div><div class="line number92 index91 alt1"><code class="js spaces"> </code><code class="js string">'</s:Envelope>'</code><code class="js plain">;</code></div><div class="line number93 index92 alt2"> </div><div class="line number94 index93 alt1"><code class="js spaces"> </code><code class="js plain">svcXhr.send(svcMsg);</code></div><div class="line number95 index94 alt2"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>"</code> <code class="js plain">+ services[0].name + </code><code class="js string">" request sent: "</code><code class="js plain">;</code></div><div class="line number96 index95 alt1"><code class="js spaces"> </code><code class="js plain">debug.textContent += svcMsg;</code></div><div class="line number97 index96 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number98 index97 alt1"> </div><div class="line number99 index98 alt2"><code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">errorCallback( error ) {</code></div><div class="line number100 index99 alt1"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>An error occurred: "</code> <code class="js plain">+ error.code;</code></div><div class="line number101 index100 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number102 index101 alt1"><code class="js plain"></script></code></div></div></td></tr></tbody></table></div></div>
+ <div><div id="highlighter_396344" class="syntaxhighlighter nogutter js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain"><select name=</code><code class="js string">"make"</code> <code class="js plain">id=</code><code class="js string">"make"</code><code class="js plain">></code></div><div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain"><option selected=</code><code class="js string">"selected"</code> <code class="js plain">disabled=</code><code class="js string">"disabled"</code><code class="js plain">>Select make</option></code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain"><option>Sony</option></code></div><div class="line number4 index3 alt1"><code class="js spaces"> </code><code class="js plain"><option>Philips</option></code></div><div class="line number5 index4 alt2"><code class="js spaces"> </code><code class="js plain"><option>Alba</option></code></div><div class="line number6 index5 alt1"><code class="js plain"></select></code></div><div class="line number7 index6 alt2"><code class="js plain"><select name=</code><code class="js string">"model"</code> <code class="js plain">id=</code><code class="js string">"model"</code><code class="js plain">></select></code></div><div class="line number8 index7 alt1"><code class="js plain"><div id=</code><code class="js string">"debugconsole"</code><code class="js plain">></div></code></div><div class="line number9 index8 alt2"> </div><div class="line number10 index9 alt1"><code class="js plain"><script></code></div><div class="line number11 index10 alt2"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">debug = document.getElementById(</code><code class="js string">'debugconsole'</code><code class="js plain">);</code></div><div class="line number12 index11 alt1"> </div><div class="line number13 index12 alt2"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">models = {</code></div><div class="line number14 index13 alt1"><code class="js spaces"> </code><code class="js string">"Sony"</code><code class="js plain">: [</code></div><div class="line number15 index14 alt2"><code class="js spaces"> </code><code class="js plain">{</code><code class="js string">"name"</code><code class="js plain">: </code><code class="js string">"Bravia TV S1000"</code><code class="js plain">, </code><code class="js string">"type"</code><code class="js plain">: </code><code class="js string">"upnp"</code><code class="js plain">, </code><code class="js string">"service"</code><code class="js plain">: </code><code class="js string">"urn:schemas-upnp-org:service:RenderingControl:1"</code> <code class="js plain">},</code></div><div class="line number16 index15 alt1"><code class="js spaces"> </code><code class="js plain">{</code><code class="js string">"name"</code><code class="js plain">: </code><code class="js string">"Bravia TV S2000"</code><code class="js plain">, </code><code class="js string">"type"</code><code class="js plain">: </code><code class="js string">"zeroconf"</code><code class="js plain">, </code><code class="js string">"service"</code><code class="js plain">: </code><code class="js string">"_mediarenderer._http._tcp"</code> <code class="js plain">},</code></div><div class="line number17 index16 alt2"><code class="js spaces"> </code><code class="js plain">{</code><code class="js string">"name"</code><code class="js plain">: </code><code class="js string">"HiFi WD10"</code><code class="js plain">, </code><code class="js string">"type"</code><code class="js plain">: </code><code class="js string">"upnp"</code><code class="js plain">, </code><code class="js string">"service"</code><code class="js plain">: </code><code class="js string">"urn:schemas-upnp-org:service:RenderingControl:1"</code> <code class="js plain">}</code></div><div class="line number18 index17 alt1"><code class="js spaces"> </code><code class="js plain">],</code></div><div class="line number19 index18 alt2"><code class="js spaces"> </code><code class="js string">"Philips"</code><code class="js plain">: [ </code><code class="js comments">/* ... */</code> <code class="js plain">],</code></div><div class="line number20 index19 alt1"><code class="js spaces"> </code><code class="js string">"Alba"</code><code class="js plain">: [ </code><code class="js comments">/* ... */</code> <code class="js plain">]</code></div><div class="line number21 index20 alt2"><code class="js spaces"> </code><code class="js plain">};</code></div><div class="line number22 index21 alt1"> </div><div class="line number23 index22 alt2"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">makeEl = document.getElementById(</code><code class="js string">"make"</code><code class="js plain">),</code></div><div class="line number24 index23 alt1"><code class="js spaces"> </code><code class="js plain">modelEl = document.getElementById(</code><code class="js string">"model"</code><code class="js plain">);</code></div><div class="line number25 index24 alt2"> </div><div class="line number26 index25 alt1"><code class="js spaces"> </code><code class="js plain">makeEl.addEventListener(</code><code class="js string">'change'</code><code class="js plain">, </code><code class="js keyword">function</code><code class="js plain">() {</code></div><div class="line number27 index26 alt2"><code class="js spaces"> </code><code class="js plain">modelEl.innerHTML = </code><code class="js string">""</code><code class="js plain">; </code><code class="js comments">// reset</code></div><div class="line number28 index27 alt1"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">defaultOption = document.createElement(</code><code class="js string">"option"</code><code class="js plain">);</code></div><div class="line number29 index28 alt2"><code class="js spaces"> </code><code class="js plain">defaultOption.textContent = </code><code class="js string">"Select model"</code><code class="js plain">;</code></div><div class="line number30 index29 alt1"><code class="js spaces"> </code><code class="js plain">defaultOption.setAttribute(</code><code class="js string">"disabled"</code><code class="js plain">, </code><code class="js string">"disabled"</code><code class="js plain">);</code></div><div class="line number31 index30 alt2"><code class="js spaces"> </code><code class="js plain">defaultOption.setAttribute(</code><code class="js string">"selected"</code><code class="js plain">, </code><code class="js string">"selected"</code><code class="js plain">);</code></div><div class="line number32 index31 alt1"><code class="js spaces"> </code><code class="js plain">modelEl.appendChild(defaultOption);</code></div><div class="line number33 index32 alt2"><code class="js spaces"> </code><code class="js keyword">for</code><code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0, l = models[makeEl.value].length; i < l; i++) {</code></div><div class="line number34 index33 alt1"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">option = document.createElement(</code><code class="js string">"option"</code><code class="js plain">);</code></div><div class="line number35 index34 alt2"><code class="js spaces"> </code><code class="js plain">option.textContent = models[makeEl.value][i][</code><code class="js string">"name"</code><code class="js plain">];</code></div><div class="line number36 index35 alt1"><code class="js spaces"> </code><code class="js plain">option.setAttribute(</code><code class="js string">"value"</code><code class="js plain">, models[makeEl.value][i][</code><code class="js string">"type"</code><code class="js plain">] + </code><code class="js string">":"</code> <code class="js plain">+ models[makeEl.value][i][</code><code class="js string">"service"</code><code class="js plain">]);</code></div><div class="line number37 index36 alt2"><code class="js spaces"> </code><code class="js plain">modelEl.appendChild(option);</code></div><div class="line number38 index37 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number39 index38 alt2"><code class="js spaces"> </code><code class="js plain">}, </code><code class="js keyword">false</code><code class="js plain">);</code></div><div class="line number40 index39 alt1"> </div><div class="line number41 index40 alt2"><code class="js spaces"> </code><code class="js plain">modelEl.addEventListener(</code><code class="js string">'change'</code><code class="js plain">, </code><code class="js keyword">function</code><code class="js plain">() {</code></div><div class="line number42 index41 alt1"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(navigator.getNetworkServices &&</code></div><div class="line number43 index42 alt2"><code class="js spaces"> </code><code class="js plain">modelEl.value == </code><code class="js string">"upnp:urn:schemas-upnp-org:service:RenderingControl:1"</code><code class="js plain">) {</code></div><div class="line number44 index43 alt1"><code class="js spaces"> </code><code class="js plain">navigator.getNetworkServices(modelEl.value, successCallback, errorCallback);</code></div><div class="line number45 index44 alt2"><code class="js spaces"> </code><code class="js plain">} </code><code class="js keyword">else</code> <code class="js keyword">if</code> <code class="js plain">(modelEl.value == </code><code class="js string">"zeroconf:_mediarenderer._http._tcp"</code><code class="js plain">) {</code></div><div class="line number46 index45 alt1"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>Service type is not implemented by this application."</code><code class="js plain">;</code></div><div class="line number47 index46 alt2"><code class="js spaces"> </code><code class="js plain">} </code><code class="js keyword">else</code> <code class="js plain">{</code></div><div class="line number48 index47 alt1"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>Service Discovery is not supported!"</code><code class="js plain">;</code></div><div class="line number49 index48 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number50 index49 alt1"><code class="js spaces"> </code><code class="js plain">}, </code><code class="js keyword">false</code><code class="js plain">);</code></div><div class="line number51 index50 alt2"><code class="js plain"></script></code></div><div class="line number52 index51 alt1"> </div><div class="line number53 index52 alt2"><code class="js plain"><script></code></div><div class="line number54 index53 alt1"><code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">successCallback( services ) {</code></div><div class="line number55 index54 alt2"> </div><div class="line number56 index55 alt1"><code class="js spaces"> </code><code class="js comments">// Listen for service push messages</code></div><div class="line number57 index56 alt2"> </div><div class="line number58 index57 alt1"><code class="js spaces"> </code><code class="js plain">services[0].addEventListener(</code><code class="js string">'message'</code><code class="js plain">, </code><code class="js keyword">function</code> <code class="js plain">( msg ) {</code></div><div class="line number59 index58 alt2"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>"</code> <code class="js plain">+ services[0].name + </code><code class="js string">" event received: "</code><code class="js plain">;</code></div><div class="line number60 index59 alt1"><code class="js spaces"> </code><code class="js plain">debug.textContent += msg.data;</code></div><div class="line number61 index60 alt2"><code class="js spaces"> </code><code class="js plain">}, </code><code class="js keyword">false</code><code class="js plain">);</code></div><div class="line number62 index61 alt1"> </div><div class="line number63 index62 alt2"><code class="js spaces"> </code><code class="js comments">// Send a control signal to mute the service audio</code></div><div class="line number64 index63 alt1"> </div><div class="line number65 index64 alt2"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">svcXhr = </code><code class="js keyword">new</code> <code class="js plain">XMLHttpRequest();</code></div><div class="line number66 index65 alt1"><code class="js spaces"> </code><code class="js plain">svcXhr.open(</code><code class="js string">"POST"</code><code class="js plain">, services[0].url); </code><code class="js comments">// services[0].url and its</code></div><div class="line number67 index66 alt2"><code class="js spaces"> </code><code class="js comments">// subresources have been whitelisted for</code></div><div class="line number68 index67 alt1"><code class="js spaces"> </code><code class="js comments">// cross-site XHR use in this current</code></div><div class="line number69 index68 alt2"><code class="js spaces"> </code><code class="js comments">// browsing context.</code></div><div class="line number70 index69 alt1"> </div><div class="line number71 index70 alt2"><code class="js spaces"> </code><code class="js plain">svcXhr.setRequestHeader(</code><code class="js string">'SOAPAction'</code><code class="js plain">, </code><code class="js string">'urn:schemas-upnp-org:service:RenderingControl:1#SetMute'</code><code class="js plain">);</code></div><div class="line number72 index71 alt1"><code class="js spaces"> </code><code class="js plain">svcXhr.setRequestHeader(</code><code class="js string">'Content-Type'</code><code class="js plain">, </code><code class="js string">'text/xml; charset="utf-8";'</code><code class="js plain">);</code></div><div class="line number73 index72 alt2"> </div><div class="line number74 index73 alt1"><code class="js spaces"> </code><code class="js plain">svcXhr.onreadystatechange = </code><code class="js keyword">function</code> <code class="js plain">( response ) {</code></div><div class="line number75 index74 alt2"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">( response.readyState != 4 || response.status != 200 )</code></div><div class="line number76 index75 alt1"><code class="js spaces"> </code><code class="js keyword">return</code><code class="js plain">;</code></div><div class="line number77 index76 alt2"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>"</code> <code class="js plain">+ services[0].name + </code><code class="js string">" response received: "</code><code class="js plain">;</code></div><div class="line number78 index77 alt1"><code class="js spaces"> </code><code class="js plain">debug.textContent += response.responseXML;</code></div><div class="line number79 index78 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number80 index79 alt1"> </div><div class="line number81 index80 alt2"><code class="js spaces"> </code><code class="js comments">// Service messaging to mute the provided service</code></div><div class="line number82 index81 alt1"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">svcMsg = </code><code class="js string">'<?xml version="1.0" encoding="utf-8"?>'</code> <code class="js plain">+</code></div><div class="line number83 index82 alt2"><code class="js spaces"> </code><code class="js string">'<s:Envelope s:encodingStyle="<a href="http://schemas.xmlsoap.org/soap/encoding/">http://schemas.xmlsoap.org/soap/encoding/</a>" '</code> <code class="js plain">+</code></div><div class="line number84 index83 alt1"><code class="js spaces"> </code><code class="js string">'xmlns:s="<a href="http://schemas.xmlsoap.org/soap/envelope/">http://schemas.xmlsoap.org/soap/envelope/</a>">'</code> <code class="js plain">+</code></div><div class="line number85 index84 alt2"><code class="js spaces"> </code><code class="js string">'<s:Body>'</code> <code class="js plain">+</code></div><div class="line number86 index85 alt1"><code class="js spaces"> </code><code class="js string">'<u:SetMute xmlns:u="urn:schemas-upnp-org:service:RenderingControl:1">'</code> <code class="js plain">+</code></div><div class="line number87 index86 alt2"><code class="js spaces"> </code><code class="js string">'<InstanceID>0</InstanceID>'</code> <code class="js plain">+</code></div><div class="line number88 index87 alt1"><code class="js spaces"> </code><code class="js string">'<Channel>Master</Channel>'</code> <code class="js plain">+</code></div><div class="line number89 index88 alt2"><code class="js spaces"> </code><code class="js string">'<DesiredMute>true</DesiredMute>'</code> <code class="js plain">+</code></div><div class="line number90 index89 alt1"><code class="js spaces"> </code><code class="js string">'</u:SetMute>'</code> <code class="js plain">+</code></div><div class="line number91 index90 alt2"><code class="js spaces"> </code><code class="js string">'</s:Body>'</code> <code class="js plain">+</code></div><div class="line number92 index91 alt1"><code class="js spaces"> </code><code class="js string">'</s:Envelope>'</code><code class="js plain">;</code></div><div class="line number93 index92 alt2"> </div><div class="line number94 index93 alt1"><code class="js spaces"> </code><code class="js plain">svcXhr.send(svcMsg);</code></div><div class="line number95 index94 alt2"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>"</code> <code class="js plain">+ services[0].name + </code><code class="js string">" request sent: "</code><code class="js plain">;</code></div><div class="line number96 index95 alt1"><code class="js spaces"> </code><code class="js plain">debug.textContent += svcMsg;</code></div><div class="line number97 index96 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number98 index97 alt1"> </div><div class="line number99 index98 alt2"><code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">errorCallback( error ) {</code></div><div class="line number100 index99 alt1"><code class="js spaces"> </code><code class="js plain">debug.innerHTML += </code><code class="js string">"<br>An error occurred: "</code> <code class="js plain">+ error.code;</code></div><div class="line number101 index100 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number102 index101 alt1"><code class="js plain"></script></code></div></div></td></tr></tbody></table></div></div>
</div>
</section>