Ustreamがいつの間にかFlash無しでもライブ配信が見れるようになってたんで、HTML5のVideoプレーヤーをカスタマイズしてiPad用のオレオレUstreamViewerを作ってみたよ。小ネタ。

Ustream Data APIを使うと、配信中の動画、ユーザー、チャンネルとかの情報が取得できます。例えばチャンネル情報だとこんな感じ。

http://api.ustream.tv/json/channel/チャンネル名/getInfo

APIからはXML、JSON、PHP、HTMLの形式から取得できます。今回はJSONで取得します。必要なのは、「チャンネルのID」「Twitterのハッシュタグ」「チャンネルのサムネイル画像」クロスドメインな環境になるので、JSONPで取ってきます。jQueryでやるならこんな感じ。callback=?は忘れずに。

$.getJSON(
  "http://api.ustream.tv/json/channel/" + チャンネル名 + "/getInfo?callback=?",
  function(data, status){
    cid = data.id;
    cimg = data.imageUrl.medium;
    hashtag = data.socialStream.hashtag;
});

ストリーミングを配置

ストリーミングは（今んとこ）こんな感じのURLから直に取ってこれるようです。

http://iphone-streaming.ustream.tv/ustreamVideo/チャンネルのID/streams/live/playlist.m3u8

これをVideoのソースに指定してあげると再生してくれます。かんたんですねー。デフォルトのUIだと寂しいんでCSSでカスタマイズできるVideo.jsを使って、Vimeo風なUIにしてみました。

Video JS | HTML5 Video Player

<div id="player" class="video-js-box vim-css">
  <video id="video" class="video-js" width="1024" height="516"controls>
    <source src="http://iphone-streaming.ustream.tv/ustreamVideo/http://api.ustream.tv/json/channel/チャンネルのID/streams/live/playlist.m3u8" type="video/mp4">
  </video>
</div>

こんな感じでHTMLを用意して、JSとCSSを読み込んで初期化時にVideoJS.setup();を叩けばいいだけです。

ただ、iPadのvideoは本体のplayerに依存してるのか、vdeoタグの領域上にレイヤーを重ねると、表示がおかしかったり、フォームにフォーカスがいかななかったりするんで、コントローラーは外側に出されるようになっているよーなんで。PC上で確認する時には注意。

（追記100819）
Video.jsだと動的な読み込みがうまくいかないんで、 「Tutorial: How to Build an HTML5 Video Player」 を参考にCSSとJSで直に実装するように修正しました。やってることは同じなんですが。。詳しくはソースを見て。

TwitterのTLを取得

これだけじゃさびしいんで、SocialstreamのチャンネルTLを流すようにしてみます。極力JSで解決したかったんで、

・ハッシュタグなどでtwitter検索した結果を表示して自動更新するjavascript

この記事を参考、とうかそのままを使って、ハッシュタグを検索したTLを読み込みます。TLは横にしてフリックでスクロールさせたいんで、jQuery.flickableを使って実装します。

jQuery.flickable

こんな感じにスクロールさせたいブロックのIDを指定するだけ。

$('#flickable1').flickable();

できたできた。

チャンネル名を入力するフォームとかを追加。iPadだけで動けばいいんでCSS3の手習いも兼ねて、角丸とかグラデはCSSにまかせてみますｗ。詳しくはソース見れ。できたのはこつら↓

USTView for iPad 02 (iPadで見てね)

チャンネル名を入力してPLAY。iPhoneだとインラインで再生できないんで、ムービープレーヤーの方に飛ばされる。ちなみに動画がiPhone/iPad対応されてないとそもそも再生されません。なんかホーム画面に登録すると動画が再生されぬ。Video JS使わない方がいいのかも。。

（追記100819）
ホームに登録しても再生できるようになりました。でもSafariからはボリュームは操作できない様子。んー。

まとめ

もっといろいろ機能を足したいけど、わかんないとこがいっぱい出てきたから止め。JS勉強して出直してきます。。

ゲームボーイの音楽制作ソフトLittle Sound DJやNanoloopのMIDIケーブルを、Arduinoで作るライブラリArduinoboyで、Max/MSP(Live)を同期させてみたよ。

Max/MSPを始めた記念になんかMIDIで鳴らしたい。でもそんな機材持ってないし。んーじゃ代わりにMIDI同期できるLSDjでゲームボーイでも鳴らすかー。たしかArduino使って同期できるライブラリかシールドがあったはずだし。。とガラクタ箱を漁ること半日、ゲームボーイとその一式を発掘して繋げてみた。

構成はこんな感じ。実装にはArduinoとGB上のLSDjやNanoloopを通信させるMIDI I/Oシールドを実装するスケッチ「Arduinoboy」を使います。こんな感じにMIDIインターフェースの回路を作るか、USBを繋げてMIDIメッセージを送受信します。今回はMAX/MSPからMIDIメッセージを送信させたいのでUSBで繋げます。以下いるもの。

・ゲームボーイ（初代、ポケット、カラー等）
・LSDj、Nanoloop、mGB
・ゲームボーイ通信ケーブル（DMG-004等）
・Arduino
・LED × 5（任意）
・抵抗 330Ω × 5（任意）

通信ケーブルはGEOとかゲーム探偵団とかの中古屋を回るとショーウィンドウの片隅に転がってたりしますｗ（￥200～￥500くらい）。LEDは状態のモニタ用なんで必要なければいりませんが、雰囲気も大事なんで付けてみます。

GameBoyとArduinoを接続

通信ケーブルを加工

通信ケーブルを剥いて中のラインを出します。今回は初代GB用のDMG-004を使います。ケーブルの解体方法も公開されてるんで参考に。中にはDATA IN（橙）、DATA OUT（赤）、GND（青）、CLOCK（緑）の４本がまとめられています。ケーブルによって仕様が違うんでよく確認してください。ブレッドボードで使うんで端子とかも付けておきましょう。

Arduinoと接続

通信ケーブルとArduinoは回路図を参考に次のように接続。

CLOCK（緑）→Analog 0
DATA IN（橙）→Analog 1
DATA OUT（赤）→Analog 2
GND（青）→GND

DIGITAL 8～12 →LED

Arduinoboyのライブラリを修正していきます。動作モードを4（Midi Input to mGB）、USBモードをON、回路上のボタンは使わないんでメモリ機能をONにしてアップロードします。

Arduinoboy1_1_0.pde を編集

boolean forceMode = true;
int mode = 4;
int numberOfModes = 5;
boolean usbMode = true;

MAX/MSPとArduinoを接続

前回はArduinoとの通信にMaxduinoを使いましたが、今回はスタンドアローンのArduinoと通信させたいので、Serialオブジェクトを使って直接シリアルポートを叩くパッチを組んでみます。後はコントローラーか、曲を再生させてMIDIメッセージをシリアルに送ってあげれば、GBから音が出てくれるはず。

動かしてみた

鳴ったー。ちなみにデモではフルMIDIコントロールできるArduinoboy付属のmGBを使ってます。曲を流す場合には若干BPMを落としてあげた方がいいです。タイトルに偽りありになっちゃたけど、Arduinoboyのモードを変えるとLSDjやNanoloopと同期させることもできるよーですよ。

まとめ

パースとか必要なOSCよりもMIDIの方が単純な構造な分、楽に変換できてよいですね。１トラックがモノフォリックで鳴ってるんで、曲全部ならそうとすると結構大変？。いっぱいGB並べるのも楽しそうだけど。。

参考資料：

• Arduinoboy
• Little Sound DJ
• Nanoloop
• 通信ケーブルのPINの仕様