Ustream Flash Client APIて公式のAPIがこっそり公開されてるみたいなんで、Photoshop、FireworksやFlashのカスタムパネル上で中継を再生させてみたよ。

東京とか東京でおもしろそうなイベントがやってても、現地に行けるわけでもなし、会社で仕事に勤しみながら、Ustreamの中継をありがたく拝見するんですが、ブラウザが背面に回ってると盛り上がってる場面を見逃す事もしばしば。 デスクトップで再生できるガジェットとかアプリも特に見当たらず。サーバーを介して読ませる方法もスマートじゃなかった。そいやSaqooshaの人も何か作ってたけど、やり方よくわかんないし。そもそもFlashのAPIって無いの？ってGoogle先生に訪ねてみたら「あるよ」って答えが帰ってきた。なんだそりゃ。

AIRでガジェットぽくしてもいいけど、当たり前すぎてつまんない。SWFを埋め込めるカスタムパネルを使えば、作業中でも勉強会とかサッカーの中継もチラ見できるんじゃね？会社で見てもサボってるように見えないんじゃね？ステキじゃね？と思ったわけです。はい。

Ustream Flash Client API

Ustream Flash Client APIはUstream.tvのデベロッパーページにひっそり公開されています。デベロッパー登録しろってあるけど、Flashクライアントを使うには必要ないです。

・共有ライブラリ
・サンプル
・Viewer実装のチュートリアル
・Flash Client API Documentation (AsDoc)

フォーラムは過疎ってるんで、後はソース読め。って感じw。APIはViewerとBroadcasterが提供されてます。とりあえずViewerのサンプルを元に実装していきます。

実装するよ

手順はこんな感じ。Ustream.tvから共有ライブラリをロード→Class化→ステージにビューワーを配置→チャンネルに接続→再生。かんたんだねー。

package
{ 
 import com.bit101.components.InputText;
 import com.bit101.components.PushButton;
 
 import flash.display.Loader;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.net.URLRequest;
 import flash.system.ApplicationDomain;
 import flash.system.LoaderContext;
 import flash.system.Security;
 
 import tv.ustream.tools.Debug;
 
 [SWF(width=244,height=184,backgroundColor=0xffffff,frameRate=60)]
 
 public class TestUstreamView01 extends Sprite
 {
  private var viewerLoader:Loader;
  private var viewer:Object;
  //private var viewer:Logic;
  private var playButton:PushButton;
  private var cId:InputText;
  
  private var channelId:String;
  
  public function TestUstreamView01()
  {
   playButton = new PushButton(null, 2, 161, "PLAY", onPlayButtonClick);
   playButton.width = 82;
   this.addChild(playButton);
   
   cId = new InputText(null, 88, 161);
   cId.height = 20;
   cId.width = 152;
   this.addChild(cId);
   
   Debug.enabled = false;
  }
  
  private function onPlayButtonClick(e:MouseEvent):void 
  { 
   if (viewerLoader == null) {
    getRsl();
   } else {
    if (viewer.playing) {
     viewer.playing = false;
     playButton.label = "PLAY";
    } else {
     viewer.destroy();
     playChannel();
    }
   }
  }
  
  private function getRsl():void 
  {
   Security.allowDomain("*");
   viewerLoader = new Loader();
   viewerLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onRslLoad);
   
   this.addChild(viewerLoader);
   
   var applicationDomain:ApplicationDomain = ApplicationDomain.currentDomain;
   var loaderContext:LoaderContext = new LoaderContext();
   var request:URLRequest = new URLRequest("http://www.ustream.tv/flash/viewer.rsl.swf");
   
   loaderContext.applicationDomain = applicationDomain;
   viewerLoader.load(request, loaderContext);
  }
  
  private function onRslLoad(e:Event):void
  {
   var logicClass:Class = viewerLoader.contentLoaderInfo.applicationDomain.getDefinition("tv.ustream.viewer.logic.Logic") as Class;
   viewer = new logicClass( );
   //viewer = new Logic();
   
   viewer.display.x = 0;
   viewer.display.y = 0;
   viewer.display.width = 244;
   viewer.display.height = 160;
   this.addChild(viewer.display);
   
   playChannel();
  }
  
  private function playChannel():void 
  {
   if(loaderInfo.parameters.cid) {
    channelId = loaderInfo.parameters.cid
   }
   if (cId.text.length > 0) {
    channelId = cId.text;
   }
   
   viewer.createChannel(channelId);
   viewer.playing = true;
   
   playButton.label = "STOP";
  }
  
 }
}

動かしてみる

さくっと実行してみます。このサンプルだと普通のurlに付いてるチャンネルIDでなく、cidてやつが必要です。Ustream.tvに行って適当なチャンネルを表示、embedのソースを表示してcid=0000000とかなってる数字のIDを取ってきます。そのIDを入力して「PLAY」して、映像が出てきたら成功です。再生されなかったらログを表示させて、原因を探ってみてください。

Debug.enabled = true;

Photoshopのカスタムパネルで再生

さて、本題w。Photoshop CS4しか対応してないけどAdobe Configuratorてのを使うと簡単にカスタムパネルの中にSWFを埋め込めます。

・Adobe Configurator

Fireworks / Flashのカスタムパネルで再生

Extensionとかmxpとか面倒だなぁ。どーすんのかわかんねーと思ってたら。SWFをフォルダに放り込んだら読めるよ。って隣の席の人に教えてもらったw。てなわけで以下のフォルダに、作ったSWFを置いてください。

【Fireworks】
(Windows)
C:\Documents and Settings\＜ユーザー＞\Application Data\Adobe\Fireworks CS4\Command Panels
(MacOS)

【Flash】
C:\Documents and Settings\＜ユーザー＞\Application Data\Adobe\Flash CS4\Command Panels
(MacOS)

わりと違和感なくて楽しげw

プレビューみたく右上に置いてあげるとだいぶ違和感ないw。すばらしい。どーやるかわかんないけど、APIにはIRCのチャットとか、プレーヤーに必要なものはほとんど実装されてるみたいなんでいじってみると良いかも。

あ。ソースはだいぶ適当なんで、作業中にPhotoshopが落ちても当方は責任はおいかねます。。