第2回　Ustream.tvでお絵描きの模様を高画質配信してみよう

最近Twitterを眺めていると、漫画やイラストを描いているところを中継している人たちが増えているように思います。今回は、このお絵描き配信を取り上げます。

これだけですと前回のデスクトップ配信と同じ手順できてしまうため、今回はFlash Media Live Encoderを新たに利用することで、映像を高画質にして配信してみます。

今回配信する内容は、横1024px、縦768px（いわゆるXGA）のウィンドウサイズのPhotoshopで、作業している模様を配信すると仮定して話を進めていきます。

Note:: 今回は1024x768のサイズにしますが、Ustream.tvの中継画面（480x360）と同じ比率、つまり4:3であることが重要です。そのため、配信したいサイズを800x600などにしてもOKです。

Flash Media Live Encoderを利用した高画質化の概要

まずはじめに、このFlash Media Live Encoderを利用することで、配信方法と映像の画質がどう変化するかを簡単に説明します。

前回の配信方法は、デスクトップをSCFH DSFでキャプチャして、Ustream.tvの設定画面でVideo Soucreを選択して配信するというものでした。前回は言及しませんでしたが、キャプチャされた映像は、Ustream.tvの配信サーバ側で配信に適切な動画データに変換（エンコード）されます。しかしこの標準のエンコードでは、そこまで高画質には変換されません。そのため、多少荒い感じの映像が配信されてしまいます（図1⁠）⁠。

今回の配信方法は、SCFH DSFでキャプチャするのは変わらないのですが、その映像データをFlash Media Live Encoderに入力し、パソコン上でエンコードしてからUstream.tvの配信サーバーに送る、という方法を取ります。Flash Media Live Encoderを通すことで、エンコードの細かな設定ができるようになります。これにより、くっきりとした映像で配信できるようになります（図2⁠）⁠。

図2　今回説明する配信方法で、今回の内容を配信した場合の中継画面（つまり、Flash Media Live Encoderを利用した場合）

ただし、Flash Media Live Encoderを通すことで、以下のデメリットも生まれてしまいます。

配信するまでにFlash Media Live Encoderの設定を行う必要があるため、配信するまでの時間が少し増える
Flash Media Live Encoderでエンコードするため、パソコンのCPUやメモリの使用率がその分増える
配信中に、画質やフレームレート等が変更できない
中継のタイムラグが長くなる（前回の配信方法よりもプラス10秒弱程度の遅延）

このようなデメリットはありますが、Flash Media Live Encoderを使用して高画質配信を試す価値は十分にあるでしょう。

Note:: Flash Media Live EncoderはWindows用です。Macでは、高画質化のためにQuickTime Broadcasterを利用するという手があります（しかしUstream.tvでの利用は、かなりテクニカルのようです⁠）⁠。

チャンネル設定ページから、Flash Media Encoder用のプロファイルをダウンロードする

Flash Media Live Encoderを使用した配信方法のイメージをつかんだところで、実際に配信してみましょう。

まずはUstream.tvのサイト上で、配信するチャンネルを決めましょう。既存のチャンネルを利用するか、新しくチャンネルを作成することになります。配信するチャンネルが決まったら、そのチャンネル設定ページに移動します。

ユーザーメニューより「Advanced」を選びます（図3⁠）⁠。そして、「⁠Flash Media Encoder XML File:」の項目にあるDownloadボタンを押して、このFlash Media Encoder用のXMLファイル（以降、プロファイル）を保存します。

保存されたプロファイルのファイル名には、チャンネル名が利用されます。チャンネルが間違っていないかを確認しておきましょう。このプロファイルは、のちほど利用します。

Windowサイズ！を使って、中継したいウィンドウのサイズを調整する

さて、次にPhotoshop（配信したいウィンドウ）を起動します。そして、Photoshopのウィンドウサイズを横1024px、縦768pxにします。といっても、手作業でpx単位でウィンドウサイズを変更するのは面倒ですので、ソフトウェアを利用します。本稿ではWindowサイズ！を利用します。Windowサイズ！は、特定のウィンドウを指定したサイズに調整できるソフトウェアです。

Note:: Windowサイズ！はWindows Vistaでの動作保証がされていないようなのですが今回の利用用途には十分でした。この手のソフトウェアはたくさんあります。

ダウンロード後、解凍したフォルダの中のwinsize.exeを実行します。Windowサイズ！の設定画面が表示されたら、「⁠サイズ:」の項目の「横」に1024、「⁠縦」に768と入力します。場合によってはさらに、ディスプレイ左上からの距離設定する「左上:」の項目を有効にしてもいいでしょう。その後、サイズを調整したいウィンドウ（今回はPhotoshop）をデスクトップに表示させた状態で、の画像ボタンをサイズを調整したいウィンドウまでドラッグします。すると、「⁠タイトル:」に設定したいウィンドウのタイトルが表示されます（図4⁠）⁠。

これらを確認してSetボタンを押すと、指定したウィンドウサイズになります。なお、中継したいウィンドウは、ウィンドウ全領域がデスクトップ上に表示されるようにしてください。

Flash Media Live Encoderのインストールと起動

ここで、Flash Media Live Encoderをインストールと起動を行っておきます。

Adobe Flash Media Live Encoderのダウンロードは、Adobeのページの「Adobe Flash Media Live Encoderの無償ダウンロード」という見出し以下の「Version 3.0*」をクリックします。Adobe ID（無料で取得できます）が必要になりますが、Adobe IDでログインすればすぐにダウンロードできます。実際のインストールは、インストール画面の手順に従って作業すればOKです。

Note:: 上記のページ移動ですと、英語のページでAdobe IDを取得する必要があるため、日本語のページでAdobe IDを取得しておくと分かりやすくて、よいかもしれません（日本語のページで取得したAdobe IDが利用できるそうなので⁠）⁠。

その後、Flash Media Live EncoderをSCFH DSFに認識させるため、Flash Media Live Encoderを先に起動しておきましょう（図5⁠）⁠。

Note:: SCFH DSFを先に起動していた場合には、後述のSCFH DSFの「Select process」画面にてRefreshボタンを押す必要があります。
Note:: 細かな話になりますが、以降のSCFH DSFを設定し終えるまではブラウザやAdobe Flash Media Live Encoder等は最小化しておいたほうが作業がしやすいです。

キャプチャソフト「SCFH DSF」の設定

前回と同じように、SCHF DSFを起動すると「Select process」画面が表示されます（図6⁠）⁠。その中からNameの項目にFlashMediaLiveEncoder.exeを選択して、OKボタンを押します。

詳細な設定画面が表示されたら、Drag here.ボタンをドラッグして、キャプチャしたいウィンドウを指定します。指定すると、自動的にキャプションや「範囲」のX、Y、サイズにドラッグしたウィンドウの数値が入ります。

Note:: Drag here.ボタンでの範囲指定は、ウィンドウに限らず、パネルやボタンのみでも検知されてしまいますので注意しましょう。現在、どのパネルやウィンドウが選択されているかについては、Drag here.ボタンをドラッグ中は常に黒いフチの枠で囲まれますし、詳細設定画面のキャプションの項目名にも常に囲んでいるものが表示されます。

ドラッグ後、SCHF DSFの詳細設定画面の範囲の項目のXとYもそれぞれ自動的に変更されます。Windowsサイズ！でサイズ指定を行っているため、サイズには現在のサイズ1024x768に変更されるはずです。

また、オプションは前回と同じように設定します。図7を参考にしてください。

これらの設定は自動的に適用されますが、設定後に適用ボタンを押しておきましょう。以上でSCFH DSF側の設定は終了です。

Flash Media Live Encoderの設定

続いて、Flash Media Live Encoderのウィンドウを表示させてください。SCFH DSFでキャプチャした映像のエンコードの設定等を行います。

Fileメニューから「Open Profile」を選択し、Ustream.tvのサイトからダウンロードしたFlash Media Encoder用のXMLファイル（プロファイル）を開きます。すると、「⁠Profile Validation」という、いくつかの項目が正しくありませんというダイアログが表示されますが、特に問題ないのでOKボタンを押します。

Note:: プロファイルを読み込むことで、「⁠Stream to Flash Media Server」の項目を埋めるのが重要です。

Flash Media Live Encoderは、上部左にInput（入力される映像と音量⁠）⁠、上部右にOutput（Ustream.tvのサーバーに配信される映像）が表示されます。その下には「Encoding Options」「⁠Encoding Log」の2つのタブがあり、まずは「Encoding Options」で配信設定を調整します。

「Encoding Options」は、VideoとAudioに関する設定項目（左側）と、配信先（Stream to Flash Media Server）の設定項目（右側）に分かれています。先に、VideoとAudioの項目を設定しましょう。

Videoのエンコード設定

Videoの設定項目は以下の表のとおりです。適宜、調整してください。

表1　Videoの設定項目（Flash Media Live Encoder）

Device:	「SCFH DSF」を選択します。これにより、Input画面にPhotoshopの画面領域が映るはずです（Flash Media Live Encoderがその画面領域にある場合は、この画面が映ってしまいますが⁠）⁠。
Format:	「H.264」と「VP6」が選択できます。「⁠H.264」のほうが画質が良いとされますが、現状は閲覧者側でのCPU負荷が少ない「VP6」を選択するのが良いのではないかと思います。また、Settingsボタンを押すとより詳細な設定ができますが、デフォルトのままで良いでしょう（特に「Quality:」が気になると思います。パソコンの性能がとても高い場合には「Best Quality - Lower Framerate」を選択しても良いかもしれませんが、デフォルトの「Good Quality - Good Framerat」で十分でしょう⁠）⁠。
Frame Rate:	プロファイルを読み込むと20fpsが設定されますが、安定して配信するためには10～15fpsまで落とすことをお勧めします。今回は10fpsにしました。（⁠安定配信のためには、この項目が一番の懸案事項になります⁠）⁠。
Input Size:	Inputされる動画サイズを再設定できるようです（Ustream.tvの場合には設定が効いていないような気がします。未確認です⁠）⁠。ここでは4:3の比率で入れていることを踏まえて、Output Sizeと同じサイズ（480x360）を選択するようにします。
Maintain Aspet Ratio:	Input Sizeのアスペクト比（単純に縦横比）を、Output Sizeでも保持するかを設定できます。この項目をチェックしていると、アスペクト比が保持されます。
Bit Rate:	画質を表す数値として解釈しましょう。数値が大きいほど良いのですが、その分、ネットワークの帯域を利用することになります。プロファイルを読み込むと300kbpsに設定されます。通常は300kbpsで十分でしょう。
Output Size:	Ustream.tvの映像部分のウィンドウサイズが横480px×縦360pxですので、480x360を選択するのが基本です。ただし、ニコニコ動画へ再アップしたい場合には、ニコニコ動画の標準サイズの512x384を選択しておきましょう（個人的には、480x360でも512x384でも変化が見受けられないような気がしていますので、512x384を通常選択しています⁠）⁠。
Crop:	Inputされた動画の上下左右をそれぞれ切り落とせます。Output時にアスペクト比などを調整する場合、ここで調整します。
Timecode:	Flashで利用する場合の、指定したフレーム数ごとにタイムコードを設定になるようです。通常は設定しないため、チェックを外しておきます。

これら項目の詳細については、Flash Media Live EncoderのHelpメニューを参照してください。

Note:: 映像のエンコードでは、H.264にするかどうかが気になるかと思います。個人的には、表内でも触れたとおり、現状はVP6で問題ないと思います。; ただし、今回のテーマ、お絵かき配信の場合に気になる点があります。それは色の再現性です。今回のサンプルを見る限り、VP6とH.264ではVP6のほうが若干暗色の再現性がよいというか、暗くなる気がしました（以下の図2再掲、図9を参照⁠）⁠。このあたりは、実際に配信してみて確認してみましょう。

Audioのエンコード設定

Audioの設定は以下の表のとおりです。適宜、調整してください。

表2　Audioの設定項目（Flash Media Live Encoder）

Device:	今回もパソコンのサウンド出力をそのままサウンド入力として扱うことにします。「⁠ステレオミキサー」を選択してください。もちろん、外部からマイク端子（ステレオミニジャック）を通して音データを入力しても構いません。その場合には、マイク端子のDeviceを選択します。
Format:	「MP3」または「NellyMoser」が選択できます。両者を比較した場合、CPU使用率が低いとされ、フォーマットとして加工しやすいMP3を通常選択していますが、音質と絡めた検証したことがありません。
Channels:	「Mono（モノラル⁠）⁠」または「Stereo（ステレオ⁠）⁠」を選択できます。演奏などがメインの中継ではなければMonoを選択して良いと思います。
Sample Rate:	44100Hzまたは22050Hzのどちらかを選択しましょう。演奏などがメインの中継ではなければ22050Hzでも十分だと思います
Bit Rate:	ネットワーク回線の帯域が狭いとき以外は、基本的に48kbpsを選択するようにしましょう。
Volume:	Volumeを設定できます。Windowsのサウンド画面の録音デバイスで若干調整できるので、なるべく大きく入れるのがコツです。

Note:: 音声の配信をしない場合には、「⁠Audio」の前にあるチェックボックスのチェックを外します。これにより、音声が配信されなくなります。変更が後で効くという意味では、後述のUstream.tvの配信設定画面で設定したほうが良いのですが、エンコードやネットワークの帯域を心配する場合にはFlash Media Live Encoder上で決めてしまっても良いかと思います。
Note:: 「Volume:」の下に、今回の配信による、必要なネットワークの帯域が「Total bandwidth required to stream:」という名目で表示されます。現状ですと、400kbps前後で配信するのがベターなのではないか、と思います（あくまで一意見です⁠）⁠。; また、エンコードに設定した帯域すべてが実際に常に使用されるかというと、そうでもありません。実際の使用帯域は、後述のEncoding LogのタブのStatisticsを参照しましょう。

Stream to Flash Media Serverの設定

そして、VideoとAudioの設定が終わったところで、右側のStream to Flash Media Serverの設定を行います。

表3　Stream to Flash Media Serverの設定項目（Flash Media Live Encoder）

FMS URL:	プロファイルを読み込むことで、配信先のFlash Media Server（FMS）のURLが記述されます。
Bakup URL:	配信先バックアップ用のFlash Media ServerのURLを記述できます。空欄のままで問題ありません。
Stream:	プロファイルを読み込むことで、Flash Media Serverに送信される動画データの識別情報が記述されます。
Connectボタン	このボタンを押すことで、配信先のFlash Media Serverと接続されます。
Auto Adjust:	デフォルトでは無効です。Outputのコマ落ち（Drop）が起きるときに、「⁠Drop Frames（Frame Rateを落とす⁠）⁠」と「Degrade Quality（Bit Rateを落とすか⁠）⁠」を優先的に選択することができます。Settingsボタンを押すことで、より詳細な設定が可能です。ただ、デフォルトで無効になっているとおり、通常は利用しなくて問題ありません。
Save to File:	ローカルのパソコンに、Outputデータ（flvファイル）を保存することができます。ニコニコ動画等への再利用を考えている場合には、これを有効にして保存先を指定するのがお勧めです。ただしこれにより、配信時に常にハードディスクに書き込まれている状態になるため、通常の操作によってハードディスクへのアクセスが起きるデスクトップ配信ではあまり使用しないほうが良いと思われます。
Limit By Size:	「Save to File:」が有効な時に設定できます。ローカルのパソコンに保存する際に、保存するファイルのファイルサイズの上限を設定できます。通常は有効にしません。
Limit By Duration:	「Save to File:」が有効な時に設定できます。ローカルのパソコンに保存する際に、保存時間を設定できます。通常は有効にしません。

以上で、Flash Media Live Encoderの設定が終わりました。

Stream to Flash Media Serverの項目のConnectボタンを押して、FMSと接続されていることを確認してください。その後に、Flash Media Live Encoderの画面下の中央のStartボタンを押すことでUstream.tv側の配信サーバーにエンコードされた動画データが配信されます（配信を止める場合には、隣のStopボタンを押します⁠）⁠。

Note:: STOPボタンを押すのは、後述のUstream.tvの配信設定画面で、配信や録画を停止してから押すようにしてください。

ドロップ（Drop）しすぎに気をつける

Flash Media Live Encoderを利用した配信で気をつけることは、エンコードが追いつかなかったり、帯域が狭かったりすることで、Outputのデータがコマ落ち（Drops）し続けてしまうことです。

このOutputのDropsは、Encoding Logのタブ画面のStatisticsのAverageの項目で確認することができます（図10⁠）⁠。実際に利用されている帯域やOutputのDropsに注目しましょう。特にOutputのDropsがどんどん増え続ける場合には、フレームレートを落とすなり、対策を立てたほうが良いでしょう。

Note:: 配信中にほかのアプリケーションを立ち上げてたり、長時間配信していると、どうしてもドロップしてしまうでしょう。また、配信し始めも、ほかのアプリケーションをいろいろと設定すると思いますので,ドロップしがちです。そのため、たまにドロップする分には無視して構わないと思います。
Note:: InputのDropsは通常ほぼ出てこないと思いますが、こちらが増えるようだとInputのさせ方に問題があると考えられます。

Ustream.tvでの設定画面で配信する

それでは、Ustream.tvのチャンネル設定ページから、Broadcast Nowボタンを押してUstream.tvの配信設定画面を表示させてみます。

すると、Adobe Flash Player設定の確認ダイアログは表れずに、配信の設定画面が表示されます。設定画面もよく見ると、前回のデスクトップ配信のときとは違い、Video SourceやAudio Source、Volumeは設定できないような形になっています。

Note:: Adobe Flash Player設定の確認ダイアログが表れてしまう場合には、時間をおくか、ブラウザを再起動させてみてください。

あとは前回のように、START BROADCASTボタンを押せば配信が開始されますし、START RECORDボタンを押せば録画が開始されます。また、映像と音声のON/OFF（Video Broadcast、Audio Broadcastチェックボタン）だけは、配信/録画中に関わらず、この画面で設定できます。

配信させたいウィンドウ（Photoshop）に、ほかのウィンドウをかぶせてしまうと、そちらが中継画面にも表示されてしまいますので、注意しましょう。

Note:: この現象は、SCFH DSFが選択領域の最前面に表示されているものをキャプチャしてしまうためです。

また、配信中にUstream.tvのチャットとソーシャルストリームを別ウィンドウに表示させておくのも良いでしょう。Social StreamボタンやChat popupボタンを押すことで、それが可能です（図12⁠）⁠。

まとめ

今回取り上げたFlash Media Live Encoderは、Ustream.tvにおいて高画質配信するための要になります。そのため、Webカメラやデジタルビデオカメラを利用する前に、説明しておきたいという思惑がありました。

ということで次回は、Webカメラやデジタルビデオカメラを利用していきます。