YouTube動画を家中のディスプレイで再生できたら：HTML5でWebとデバイスを連携する（3/3 ページ）

YouTubeビデオを、ブラウザからリビングのテレビやタブレットに飛ばせたら。HTML5のPlayコマンドをテレビに送信して再生する方法を紹介します

[小松健作，HTML5j]

手順3 : テレビでのYouTubeビデオ再生

　最後に説明するのは、テレビの操作です。これを行うためには手順2で取得したURLにSOAPのメッセージを送ります。これ自体は、従来のAjaxプログラミングを行えばいいのですが、テレビに対するAjax通信はクロスオリジン通信となるため、テレビ側でXML HTTP Request level2への対応が必要となってしまいます。残念ながら現在のテレビではこの対応は図られていません。

　しかしながら、今回、SOAPでアクセスするモジュールは図9で示したようにバックグラウンドプロセス（Chrome Packaged Apps）で動かしています。ここで、ChromeのPackaged Appsでは、manifest.jsonの設定だけでクロスドメインのAjaxが可能となり、テレビ側の対応は不要です。従って、上記問題は簡単に解決できました。

　SOAPを用いた、ビデオコンテンツの再生は比較的簡単にできます。最初にSOAPコマンド SetAVTransportURIをテレビに送信し、再生するビデオのURLをセットします。

  <?xml version="1.0"?>
  <SOAP-ENV:Envelope
xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"
SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
  <SOAP-ENV:Body>
  <m:SetAVTransportURI xmlns:m="urn:schemas-upnp-org:service:AVTransport:1">
  <InstanceID xmlns:dt="urn:schemas-microsoft-com:datatypes"
dt:dt="ui4">0</InstanceID>
  <CurrentURI xmlns:dt="urn:schemas-microsoft-com:datatypes"
dt:dt="string">http://192.168.13.3:65398/video.mp4</CurrentURI>
  <CurrentURIMetaData xmlns:dt="urn:schemas-microsoft-com:datatypes"
dt:dt="string"></CurrentURIMetaData>
  </m:SetAVTransportURI>
  </SOAP-ENV:Body>
  </SOAP-ENV:Envelope>

　その後、以下のPlayコマンドをテレビに送信すると、セットしたURLからビデオをダウンロードし、再生してくれます。

  <?xml version="1.0" encoding="utf-8"?>
  <s:Envelope s:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"
xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
  <s:Body>
  <u:Play xmlns:u="urn:schemas-upnp-org:service:AVTransport:1">
  <InstanceID>0</InstanceID>
  <Speed>1</Speed>
  </u:Play>
  </s:Body>
  </s:Envelope>

　ただし、ここで1点問題があります。DLNA対応テレビでは、ローカルネットワーク上のURLにしかアクセスを許可しないものがあるため、SetAVTransportURIでYouTubeビデオのURLをセットしても、再生してくれないのです。

　これを解決するため、前述のバックグラウンドプロセス内に、Reverse Proxyサーバを構築し、それを経由することでYouTubeビデオをテレビで再生可能としました。そのシーケンスを以下に示します。

1. テレビ操作アプリケーションからバックグラウンドプロセスに対し、/set?url=[YouTubeビデオのURL]でアクセスし、Reverse ProxyサーバモジュールにURLのセットを要求する。
2. バックグラウンドプロセスは、1で得たYouTubeビデオのURLをReverse Proxyサーバモジュールにセットする。
3. バックグラウンドプロセスは、SOAPモジュールから テレビに対し、SetAVTranportURIを用い、Reverse ProxyサーバのURLをセットする。
4. バックグラウンドプロセスは、テレビ操作アプリケーションに各種セットが終わったことをレスポンスする。
5. テレビ操作アプリケーションからバックグラウンドプロセスに対し、/playでアクセスし、ビデオの再生要求を行う。
6. バックグラウンドプロセスは、SOAPモジュールからテレビに対し、Playメッセージを送信し、再生要求を行う。
7. テレビは、ビデオコンテンツをダウンロードするために 3 でセットされたReverse ProxyサーバのURLにアクセスする。
8. Reverse Proxyサーバモジュールは、2でセットされたYouTubeサーバへアクセスし、ビデオのダウンロードを始める。
9. Reverse Proxyサーバは8でダウンロードされたビデオを逐次テレビへリレーする。
10. YouTubeビデオがテレビで再生される。

図10 Reverse Proxyを用いた、YouTubeビデオのテレビでの再生

このシーケンスにより、YouTubeビデオをテレビで再生することに成功しました。

加速するWebとデバイスとの連携

　クラウド - デバイス連携のサンプルとして、PCブラウザで検索したYouTubeビデオをテレビに再生する例を紹介し、そのアーキテクチャを説明しました。特に以下の2つの中核APIについて、その活用事例を紹介しました。

Web Intents

• YouTubeからテレビ操作アプリケーションへビデオURLを渡す
• テレビ操作アプリケーションから、テレビ操作バックグラウンドプロセスにアクセスするインターフェイスのURLを取得する

Socket API

• テレビ操作バックグラウンドプロセス内に、ローカルネットワーク上のテレビを発見するためのUPnPプロトコルを実装するために利用
• テレビ操作バックグラウンドプロセス内に、Reverse Proxyサーバを構築するために利用
• テレビ操作バックグラウンドプロセスのインターフェイスWebサーバを構築するために利用

　これら、2つのAPIを活用することで、実際にブラウザからテレビを操作できるようになることを説明しました。なお、これに関連する仕様として、現在OperaよりNetwork Service Discovery APIが提案され、試験実装も始まっています。このAPIは、手順2で示した、UPnPの探索や手順3で示したクロスオリジンでのAjaxの問題を解決するAPIとなっています。このAPIが標準化されることで、これらの機能はSocket APIやChrome拡張を使わずとも簡単に利用できるようになります。

　また、本記事では現行のテレビを操作するために専用のバックグラウンドプロセスを実装しましたが、このような機能をもしテレビメーカーが実装してくれれば、わざわざ複雑なプロセスをブラウザ内に実装しなくても簡単にテレビを操作できるようになります。これは、Web Intentsだけで、簡単にテレビとの連携アプリを作れるようになることを意味しています。

　このようなシナリオを目指した議論はW3Cですでに始まっており。SONYが提案するWeb Intents Addendum - Local Servicesがまさにそれに当たります。この仕様が標準化され、テレビメーカーなど各種デバイスメーカーがWeb Intents対応機器を提供するようになれば、Webとデバイスとの連携はより一層加速されていくことでしょう。

小松健作：1972年生まれ。NTTコミュニケーションズにてネットワークとWebとの関わりや、インタラクティブマルチデバイスWebサービスに関する研究開発・標準化活動に従事。Google API Expert（HTML5）、Microsoft Most Valuable Professional（Internet Explorer）