Posts Tagged ‘ZENPRE’

    はてなブックマーク - JAWS-UGでAWS採用事例の話をしてきました
    このエントリーをはてなブックマークに追加

    Fusic 平田です。
    JAWS-UG 福岡勉強会のLT枠で、事例の話をしてきました。

    で、いくつか補足や訂正などなど。

    CloudFrontは不要?

    今のところS3が十二分に速いとは言え、当然CloudFrontのほうがその数倍は速いです。
    で、「外れました」と言ってましたが実際は今もCloudFrontで元気に動作しておりました。
    誤解を与えてしまい、大変申し訳ありません。。。

    ただまあ、東京リージョンのS3は国内からアクセスするとかなりの速度が出ます。
    シンガポールのS3とざっくり比較してみたら3.7倍くらい速かったですし、さくらVPS+Apacheと比較してもおおよそ同等でした。
    # 計算違いでなければ、HTTPで35~40Mbpsくらいは出ています。

    s3fsをちょっと補足

    公式はGoogle Codeのほうにあります。
    かなり駆け足で喋ったので、改めて資料を見ていただくのがいいと思いますが。
    実際にマウントしてみると、体感で分かるくらいのラグは生じます。
    今回は採用しましたが、場面によっては採用できないこともありそうです。

    ZENPRE for iPhone

    今回のLTはZENPRE+iPhoneで行いました。
    1/2倍速で聞きたかったと言われるくらいに駆け足でプレゼンしたのですが、3G回線でもほぼ問題なく。

    screen1

    アプリを起動して、右下の「設定」を選択すると

    「Fastest Mode」のON/OFFが切り替えられます。
    これはiPhone側にスライド画像を表示しないモードで、非常に高速です。
    ちゃっちゃとページめくる派なので、このモードなしでは生きていけません。
    今回のLTくらいのスピードでも気持ちよくプレゼンできます。:-)

    まとめ

    と言いたいんですが、特に事例2のほうは構成固まってなかったりもするので、まとまった時点でまた話ができればと思います。

      はてなブックマーク - USTREAM Flash Client APIの使い方
      このエントリーをはてなブックマークに追加

      はじめまして、Fusicの杉本です。

      Fusic Advent Calenderのルーレットをノリで作った張本人です。
      ここまで同じ人に複数回当たったり、言い出しっぺの弊社小山が当たっていなかったりと、バグって偏っているのではと責められてきましたが、やっと自分が当たって疑いが晴れた感じです。

      USTREAM API

      USTREAMといえば、先日宇多田ヒカルさんのライブを中継して話題になりましたね。
      同時アクセス10万以上、ユニークユーザ34万5000人、加えてあの画質と音質、USTREAMすごい!と感動した方も少なくないのではないでしょうか。
      また弊社でもUSTREAMを使ったサービスZENPREを提供しています。ご存じない方は是非一度アクセスしてみて下さい。

      さて、USTREAM APIの情報については、こちらに公開されています。

      • Data API Documentationは、ユーザ情報やチャンネルのURL、タイトル、概要などをhtml/json/xml/php形式で返してくれるAPI情報です。
      • Flash Client API Documentation (AsDoc)は、LIVE動画や録画動画のビューワや動画配信するブロードキャスターのFlashをカスタム実装するためのAPI情報です。

      今回はUSTREAMのFlash Client APIについて、ご紹介したいと思います。

      Flash Client API

      ドキュメントはASDoc形式になっていて見慣れた感じですが、コメントが少なく非常に分かりづらいです。
      実装の仕方はここにサンプルなどがあります。ここではビューワの実装方法について説明していきます。
      まずは提供されているswfをロードします。

      Security.allowDomain("*");
      var 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);

      LoaderのCOMPLETEイベントでtv.ustream.viewer.logicパッケージのLogicクラスをインスタンス化します。

      private function onRslLoad(e:Event):void {
      	var logicClass:Class = viewerLoader.contentLoaderInfo.applicationDomain.getDefinition("tv.ustream.viewer.logic.Logic") as Class;
      	viewer = new logicClass();
      }

      Display Class

      表示するUSTREAM映像の大きさを指定します。上記viewerオブジェクトのdisplayプロパティで値を設定します。width=300,heigth=200くらいが最小値のようです。

      viewer.display.width = 360;
      viewer.display.height = 240;

      Channel ClassとRecorded Class

      チャンネルの設定や動画の再生・停止、音量調整などはこちらのクラスを使います。
      Channel ClassがLIVE配信用、Recorded Classが録画再生用となっています。基本的に使い方は同じですが、動画をロードするメソッドが異なります。

      // LIVE配信用のロード
      viewer.createChannel(channelId);
      // 録画用のロード
      viewer.createRecorded(channelId);

      channelIdが少し分かりづらいですが、以下のようになっています。
      LIVE配信用は、ライブ配信ページのURL「http://www.ustream.tv/broadcaster/*******」の一番最後のスラッシュ以下の数字
      録画再生用は、録画動画受信ページのURL「http://www.ustream.tv/recorded/*******」の一番最後のスラッシュ以下の数
      となっています。このメソッドをたたくと、USTREAMにchannelIdを渡して、動画を読み込み始めます。
      余談ですが、サービスでこのchannelIdをユーザに入力してもらうのは難しいと思いますので、今回は紹介していないUSTREAMのData APIと連携し、番組名の登録でchannelIdを取得するようにしてみてはいかがでしょうか。(ZENPREではそうしています)

      イベント

      次に、その際に発生するイベントについて発生する順番で説明をしていきます。

      • found・・・指定したchannelIdの動画が見つかった時
      • video・・・ビデオが見つかった時
      • audio・・・音声が見つかった時
      • createStream・・・動画ストリームがつながった時
      • getProgressive・・・動画のダウンロードが開始した時
      • progress・・・動画のバッファを読み込む毎に

      その他のイベントについても簡単に説明をします。

      • finish・・・動画が最後まで再生された時
      • destroy・・・インスタンスを削除(destroyメソッドを叩いた)した時
      • muted・・・ミュートした時

      これらイベントは、LIVE配信時と録画再生時では参照するプロパティが異なりますので、注意して下さい。以下に例を示します。

      // LIVE配信時
      viewer.channel.addEventListener("found", function(e:Event):void {
      				// 処理を入れる
      });
      // 録画再生時
      viewer.recorded.addEventListener("found", function(e:Event):void {
      				// 処理を入れる
      });

      動画の再生・停止のイベントがないのがちょっと不便です。これらは自前で実装する必要があります。

      主要なメソッドとプロパティ

      最後にプレーヤを実装する上で注意が必要なメソッドとプロパティを説明をします。

      【メソッド】

      • seek(percent:Number, bufferOnly:Boolean = false):Boolean

      →シーク先の値は、録画動画のトータル再生時間における割合(値は0以上1以下)を第1引数に渡します。後述のプロパティdurationを使って算出します。

      【プロパティ】

      • bufferProgress: Number[読み取り専用]

      →動画データのダウンロードしたバッファーのプログレス値。値は0以上1以下です。

      • duration: Number[読み取り専用]

      →動画のトータル再生時間。単位は秒。

      • seekTo: Number[読み書き込み]

      →seekメソッドと同じ。こちらも値は録画動画のトータル再生時間における割合(値は0以上1以下)のため注意。

      • time: Number[読み取り専用]

      →現在の動画再生時間。単位は秒。

      • volume: Number[読み書き込み]

      →動画の音量。値は0以上1以下です。

      まとめ

      以上、USTREAM Flash Client APIの使い方の紹介でした。
      紹介した以外にも色々なAPIが用意されていますので、興味のある方は是非カスタムプレーヤを作ってみて下さい。またLIVE配信をする時は、通常USTREAMが用意したFlash(Web)かProducerを使うと思いますが、このAPIを使うと自前でブロードキャスタも作れます。

      今年Ustream Asia Inc.も設立され、ストリーム配信が盛り上がってきています。TVやラジオといったメディアの形が見直され、いつでもどこでも誰でも簡単に配信できる環境ができてきています。
      いままで当たり前だったことが崩され、変化していくというのはおもしろいですよね。自分が持っているものでコンテンツ化できるものがないか考えてみると、新しいサービスやビジネスが思いつくかもしれません。その第一歩として、弊社サービスZENPREを使ってみるのはいかがでしょうか。
      と、宣伝をいたしまして終わりたいと思います。
      (私は社内一まじめな人間なので、他の人みたいにボケたり、オチを入れたりしません。)

      長文を最後までお読みいただき、ありがとうございました。
      それでは良いお年を(もう当たらんだろう)

        はてなブックマーク - Titanium Mobile 社内勉強会の裏側 ~Ustream配信で使った機器
        このエントリーをはてなブックマークに追加

        Advent Calendarの途中ですが、ここでブレイクを。

        すみません、山本です。
        個人的に、年内15エントリーを目標に掲げておるものですから、割り込み失礼します。

        技術ネタが多いなか、今日はコラム的なものを。

        皆さん、Ustreamはご存知かと思いますが、見るのではなく配信をされたことはあるでしょうか。
        カメラとマイクとネット環境さえあれば、年中いつでもどこでも全世界に映像を配信できるサービスですが、実際に配信された方は少ないかと思います。
        そもそも配信するコンテンツがないから、というケースが多いかもしれませんが、いざ配信しようとしたときに、何を用意すればいいのかわからないという方もいらっしゃると思います。

        そこで今回は、11/25にZENPRE上でTitaniumMobile勉強会を配信した際に使用した機器などをご紹介します。

        カメラ


        Logicool QVP-30SV
        (発売当初のオンラインストア価格は2,480円)

        Logicool製の、お手頃価格なカメラですね。
        2007年発売というのもありまして、動画の画素数は30万画素と低めです。
        これを使って撮った映像が以下です。

        多少の粗さが目立ちますね。
        それでも、人の表情は認識できるレベルです。

        ちなみに、不測の事態に備えて、この模様はMacBookProのカメラでも撮っていました。
        その映像が以下です。

        MBPに搭載されているiSight130万画素で、Logicoolのカメラよりも多いですが、あまり変わりないですね。

        マイク

        このコンテンツを配信するにあたって重要なのは、映像よりも音声でした。
        資料はZENPREのスライド上に表示されるので見える必要はないのですが、音声に関しては発表者が何を言っているのかはっきりと認識できるレベルが必要でした。

        単一指向性か無指向性か

        まず、無指向性を試しました。
        これは会議によく使われるタイプで、より大勢の音声が拾えるよう設計されたマイクですね。
        これでテストしたところ、やはり発表者の声が小さくなってしまいました。
        そのコンテンツが発表者重視なのか、会場の雰囲気重視なのかで選択肢は変わると思いますが、今回は発表者メインですので、単一指向性にしました。


        audio-technica AT9904
        メーカー価格4,410円

        テレビでよく見かけるピンマイクですね。
        発表者の音声がちゃんと拾えてます。

        ちなみにMacBookProで撮った方も、音声の聞き取り度は高いですね。

        まとめ

        何か書いていて、「MacBookProさえあればUstreamを簡単に配信できる」というタイトルに変更しようかと思うくらい、
        MBPは便利ですね。
        でも、持っていない方でも、1万円以内で機材を揃えることができますし、今ならHD対応のウェブカメラも安価で購入できます。
        もっと探せば、同程度の機材であれば5,000円以内に収まると思います。

        今日もどこかで勉強会やセミナーが行われていることでしょうが、
        多くの人に見てもらうため、認知度向上のためにも、オンラインで配信される機会が増えればと思います。
        いち地方都市で開催されるような東京に比べたら集客数は減る勉強会でも、オンライン配信すれば擬似的な参加者は格段に上がるはずですから。
        また、逆に東京でしか行われない勉強会も、物理的に行けない人のために積極的にオンライン配信が行われればと思います。
        配信すること自体は、特別難しいことではないですから。

        で、画面が粗いので資料の識字ができないって時に、ZENPREを使っていただけたらと思います。