インターネット中継するための、配信のキホン

第4回Ustream.tvでPicture in Picture(PinP)配信をおこなおう

図1 Ustream Live Broadcasterを
利用した、iPhoneにおける配信
画像

先日、iPhone 3G/3GSだけでUstreamを利用したネット配信できるアプリUstream Live Broadcasterが一般公開され、とても手軽に配信できることからTwitterやblogなどで賑わいをみせていますね(AndroidやNokia端末でも配信のためのアプリが公開されています⁠⁠。

さて、それはさておき、ネット配信時に2つの映像を同時に配信したい場合があります。その際、片方の映像を小さく表示させて、もう1つの映像の隅に重ねてしまい、これを1つの映像として配信する手段がしばしば取られます。このように映像を重ねてしまうことを、一般的にPicture in Picture(PinP)と呼びます。

今回は、このPicture in Pictureを使った、お絵描き配信とスライド中心の配信を説明します。

なお、Picture in Pictureを用いたネット配信は、配信用のパソコンのCPU利用率が通常の配信方法よりもかなり高くなります。そのため、本番前にOutputデータがDropしすぎないかを確認するようにしましょう。

お絵描き配信v2:パソコン上の作業はSCFH DSFで、手の動きはWebカメラでキャプチャする

第2回で、絵を描くためのアプリケーション(Photoshop)を起動して、このアプリケーション上の模様を配信する方法(お絵描き配信)を説明しました。

ここではこのお絵描き配信にプラスして、実際の手元の動きをWebカメラで撮ってみます。その映像を小さいサイズにして、お絵描き配信で配信する映像の隅に表示させてしまい、1つの映像として配信してみましょう。

SCFH DSFでお絵描きアプリケーションのキャプチャ(第2回のおさらい)

Flash Media Live Encoderを利用した高画質配信を前提とします。まずは第2回と同じようにデスクトップ上のお絵描きアプリケーションをキャプチャします。

Flash Media Live Encoderを起動した後に、SCFH DSFを起動します。その際、SCFH DSFを起動する前に、Flash Media Live EncoderのVideo Deviceの設定だけでもSCFH DSFを選択しておくようにしましょう。

その後、SCFH DSFのSelect Process画面にてFlash Media Live Encoderを選択して詳細画面を開きます。そしてDrag Here.ボタンをドラッグして、絵を描くアプリケーションの画面を選択します。さらにオプションを設定します。

図2 SCFH DSFでお絵描きアプリケーションのキャプチャを設定
画像

Webカメラの映像をキャプチャ

次に、手元の作業をWebカメラで撮影しましょう。第3回で説明したようにUSB接続型のWebカメラは、パソコンにつなげばOSに認識されます。その後、kusunoki.tvやVLC media playerなどを利用して、Webカメラの映像をデスクトップ上に表示します。

図3 Webカメラの映像をデスクトップ上に表示する(ここではkusunoki.tvを利用)
画像
Note:
お絵描きアプリケーションとWebカメラの映像を表示させるとデスクトップ上が手狭になる(あるいはこれらのウィンドウが重なってしまう)場合には、Webカメラの映像はある程度小さいサイズで表示させても構いません。
というのも、今回、Webカメラの映像は小さいサイズで配信されるため、この配信されるサイズより大きいサイズで表示させておけば、ほぼ問題ありません(もちろん、この場合には映像の縮小処理が、デスクトップ上に表示させた時と、Picture in Pictureさせるときの2回されることになってしまうと思うのですが、それによる画質劣化は気にならないでしょう(もしかしたらPicture in Picture時の縮小処理では、映像ソース自体を参照しているのかもしれません⁠⁠。

続けて、すでにお絵描き配信の設定を行ったSCFH DSFの詳細画面の、一番下の「レイアウト」ボタンを押してください。すると、Layout画面が表示されます。ツールメニューから、⁠枠設定][プレビュー表示]をそれぞれONにします。そして、Flash Media Live EncoderのInput Size:の設定をUstreamの中継画面のデフォルトの480x360(またはニコニコ動画の標準サイズ512x384)を選択します。すると、SCFH DSFのLayout画面のサイズが自動的に調整され、以下の図のように表示されます。

図4 SCFH DSFのLayout画面(枠設定とプレビュー表示をONの状態⁠⁠。ここではInput Size:を512pxに設定してみた
画像
Note:
ここでは[プレビュー表示]をONにしましたが、CPUの使用率を少しでも下げるために、SCFH DSFの設定が完全に終わったらOFFにしたほうがよいでしょう。

そしてパネルメニューから[追加]を選択します。パネルを追加することで、元の詳細画面とLayout画面に2のタブが表示されます(いままでは1のタブでの作業でした⁠⁠。Layout画面には、新たに2のプレビュー画面(パネル2)も表示されます(表示されない場合は、Layout画面で2のタブを選択してください⁠⁠。

図5 パネル2を追加したときのLayout画面。パネル1と同じ映像が映っている
画像

SCFH DSFの詳細画面に戻り、2のタブを選択します。そしてDrag here.ボタンを、映像を映しているプレイヤーにドラッグすることで、Layout画面のパネル2では映像が表示されるようになります。

図6 パネル2の詳細設定。Drag Here.ボタンを映像を映しているプレイヤーにドラッグしてから、詳細な項目を調整する
画像

パネルは、いわゆる映像のレイヤーと考えてよいもので、後から追加したパネルはその前からあるパネルよりも上になります。これにより、Picture in Pictureが可能になります。

パネル2の大きさと位置が中途半端ですので調整しましょう。パネルの辺や頂点をドラッグすることでサイズ等を変えることができます。ここでは、画面隅の右下にぴったりと寄せつつ、画面の大きさを160px×120px(画面比が4:3であればOK)にしてみました。

図7 最終的なレイアウト。ここでのレイアウト状態が維持され、配信される。パネル2が選択できない場合には、2のタブを選択してから操作しましょう
画像

これでPicture in Pictureの設定は終了です。あとはFlash Media Live EncoderのVideo DeviceでSCFH DSFを選択すれば、Picture in Pictureで配信できるようになります。

図8 Flash Media Live Encoderの設定。Video DeviceでSCFH DSFを選択する。そのほかの設定は第3回と同じ
画像
Note:
SCFH DSFのレイアウト画面で、パネルはいくつも増やせます。その他表示させたいものがある場合には試してみてもよいでしょう(時計や音楽プレーヤーのタイトル表示部などを画面にレイアウトしている中継をよく見かけます⁠⁠。

スライド中心の配信:スライドはVGA分配器で、発表者はビデオカメラでキャプチャする

勉強会や研究会などの中継は、スライドの文字と発表者の声がきちんと配信できるかが重要です。そこで次に、スライドのみの映像を大きく映し、その映像の隅に小さめのサイズで発表者を映して、それを1つの映像として配信してみましょう。

スライド映像の取り込み

スライドの映像を取り込むにあたって、スライドが表示されているスクリーンをビデオカメラで撮るのではなく、スライドの映像を直接取り込んで配信してみましょう。これにより、スライドに記述されている文字をよりくっきりとした形で配信することができます。

Note:
発表者のスライドが入っているパソコンのデスクトップ上の映像をそのまま配信することになりますので、発表者のパソコンでデモをする際にも有効です。

まず前提とすることがあります。それは、発表者のスライド(XGAサイズ;1024px×768px)の入っているノートパソコンのVGA出力端子(D-Sub(15pin⁠⁠)から、D-Sub(15pin)端子ケーブルを利用してスクリーンに出力すると仮定します。

Note:
現状、スクリーンへの出力はまだまだD-Sub(15pin)が現役だと思いますので、このように仮定しました。また、MacBookなどではMini DisyplayPortが標準の出力端子ですので、発表者用のパソコンとしてMac Bookを利用する場合にはMini DisyplayPortをD-Sub(15pin)に変換するためのアダプタが必要です(多くの場合、発表者は変換アダプタを持参しているようです⁠⁠。

スライドの映像データを直接配信するには、一つはスクリーン出力のために、もう一つは配信用のために、発表者のパソコンのVGA端子(D-Sub(15pin⁠⁠)からの出力を分配する必要があります。

この分配と配信のために、VGA分配器と、D-Sub(15pin)を入力可能なビデオコンバータ、VGAケーブル(x2本。そのうち1本は10mあると良い)が必要になります。

Note:
スクリーン出力用のVGAケーブルは通常、会場に用意されているため、上記本数から外しています。

著者が利用しているVGA分配器はVGA-SP2です。VGA-SP2は、大きめの解像度の出力に対応しており、16:9の画面比の出力にも対応しているため、分配によるスクリーン出力の影響はないと考えてよいでしょう。

Note:
設備が良いイベント会場では、16:9のスクリーンが設置されている場合もあります。

また、D-Sub(15pin)の入力端子をもつビデオコンバータは、第3回でも取り上げたTwinpact 100を利用するのがよいでしょう。

これらをVGAケーブルとIEEE1394aケーブルでつなぎます。
[発表者のノートパソコン][VGA分配器][スクリーン]と、⁠発表者のノートパソコン][VGA分配器][ビデオコンバータ(Twinpact 100⁠⁠]-[配信用パソコン]という、つなぎ方になります。

VGA分配器は、発表者のノートパソコンがある位置に置くのがベストでしょう。そのため、発表者のノートパソコンとVGA分配器をつなぐVGAケーブルは1m程度の短いケーブルで問題ないと思います。また、配信用のパソコンの近くにビデオコンバータを置くことになると思いますが、その場所までVGAケーブルを引くために、このVGAケーブルにはそこそこの長さが必要になります。具体的には、発表者を別途ビデオカメラ等で撮ることから、最前列近くに配信用のパソコンが置かれることになると思います。そのため、VGA分配器とビデオコンバータをつなぐVGAケーブルの長さは10m程度あると良いでしょう。

Note:
VGA-SP2の取扱説明書によれば、5m以上のケーブルを使用した場合に、映像が荒くなる場合もあると注意書きがあります。しかしながら、通常10mのVGAケーブルを利用していて、映像が荒くなるという現象はないように思います。ただし、相当古い5mほどのVGAケーブルを利用した場合、分配された映像が荒くなりました。
Note:
ここまで読んでいただけると分かると思いますが、スライドと音声さえ配信できればOKとしてしまう場合には、デジタルビデオカメラやWebカメラがなくても十分に配信できてしまうことに気づくと思います。とはいっても、マイク用途にデジタルビデオカメラがあると便利です。

発表者の映像の取り込み

ここでは、発表者をデジタルビデオカメラで撮ってみることにしましょう。この場合、さらにもう一台のビデオコンバータ(D-Sub入力端子をもってなくてOK)が必要になります。

つなぎ方は第3回と同じで、⁠デジタルビデオカメラ][ビデオコンバータ][配信用パソコン]となります。

なお、配信用パソコンには、スライドの映像を入力するほかに、デジタルビデオカメラの映像を入力しますので、IEEE1394a入力端子が2つ必要になります。そのため、ノートパソコンでPicture in Pictureの配信を考えている場合には、IEEEカードの増設が必須でしょう(ノートパソコンではIEEE1394a端子は2つ以上ついている機種はないと思います⁠⁠。

Note:
もちろん、発表者をUSB接続のWebカメラで撮る場合には、ビデオコンバータは必要なくなりますし、配信用のパソコンのIEEE1394a端子は1つで良いということになります。

配信用のパソコンでの作業。SuperWebcamの利用

次に、配信用のパソコンでPicture in Pictureの設定をおこないます。ここでは、第3回で取り上げたSuperWebcamを利用します。というのもSuperWebcamは配信中に、後述の画面切替が楽にできたり、Picture in PictureのON/OFFが簡単だからです。

Note:
SuperWebcamは2年ほど前からバージョンアップされていません。そのため、Picture in Pictureで配信した場合に、配信用パソコンとの相性問題がでてしまう機種があるようです。
たとえば、第3回で紹介したTOSHIBA dynabook CX/47jを利用してPicture in Pictureの配信をおこなうと、配信の途中でパソコンが何度か完全にOSがフリーズしてしまいました(映像入力の方法は、標準付属のIEEE1394a端子とIEEE1394a端子増設用PCカードを使用⁠⁠。そのため、この機種を利用した配信は控えたほうが良いでしょう。著者の環境のみによるものなのか等を検証しなければならないと考えているのですが、時間が取れていません。なお、後述のThinkpad X61を利用した場合はフリーズしたことがありません。
Note:
ここでは、SuperWebcamを利用してソフトウェア的にPicture in Pictureをおこないますが、ハードウェア的にPicture in Pictureをおこなえるスキャンコンバータを利用する方法もあるようです。今度試してみたいです。

それではSuperWebcamを起動します。Video sourceメニューから、スライド映像のビデオデバイス(Microsoft Camera and VCR)を選択します。これにより、SuperWebcamの画面にスライドが表示されます。なお、第3回でも言及しましたが、SuperWebcamの映像画面は720x480で表示されてしまいますので、横に伸びた感じになりますがFlash Media Live Encoder上で調整するので無視して構いません。

Note:
スライド映像のビデオデバイスも発表者のビデオデバイスも、Microsoft Camera and VCRと表示されるため、とりあえず選択してみるしか判断つきません。一度選択してしまえば、もう一つが別のビデオデバイスだと判別できるため、特に支障はないと思いますが…。

スライド映像を表示させてみると分かりますが、黒ブチのマージンがとられるはずです。SuperWebcamの右側のFiltersのタブのZoomの+ボタンを何度か押すことで、画面全体に表示させることもできますが、そのようにした場合、逆に文字が荒っぽくなりがちで配信されるように感じられました。また、Ustreamの中継画面では広告も画面下部に表示されますし、総合的に判断して、著者としては1倍のままのほうが良いのかなと思います。

図9 Video souceメニューから、スライド映像のビデオデバイスを選択(発表者の映像のビデオデバイスと同じ名前で表記されるため分かりにくい)
画像

次に、FiltersのタブのFilterを選択できる個所から「Picture - in - Pictue」のアイコンを選択してOptions...ボタンを押します。すると、⁠Picture-in-picture option」画面が表示されます。

図10 ⁠Picture-in-picture option」画面。表1のとおりに設定済み
画像

以下の表を参照して、⁠Picture-in-picture option」画面の項目を設定してください。

表1 ⁠Picture-in-picture option」画面の設定項目
Video source:重ねたい映像(ビデオカメラで撮っている発表者の映像)のビデオデバイスを選択します。ここでも、スライド映像のビデオデバイスと名前が同じで分かりにくいです(スライド映像のビデオデバイスを選択してOKボタンを押すと、エラーメッセージのダイアログが表示されます⁠⁠。
Windows position:Top-left(左上⁠⁠、Top-right(右上⁠⁠、Bottome-left(左下⁠⁠、Bottom-right(右下)のどの隅に配置するかを選択します。個人的には右下が好み。
Margin:隅からのマージン(余白)を設定できます。スライダを一番左でマージンが0で、右にいくとマージンが増えます。通常はマージンを0にしたほうが見栄えが良いため、スライダの位置を一番左にしましょう。
Windows size:重ねたい映像のサイズを設定できます。スライダを左に動かすとサイズが小さくなり、右に動かすとサイズが大きくなります。中央あたりに合わせるのが良いでしょう。
Maintain source video proportions:縦横比を維持するかどうかのチェックボックスです。チェックされたままで構いません。
Draw window border:映像の外周に境界線(ボーダー)を描くかどうかを決められます。通常はチェックを外して、境界線を非表示にするのが良いでしょう。

設定後OKボタンを押すと、⁠Picture-in-picture option」画面は閉じられます。そして、optionボタンの隣にあるStart/Stopボタンを押して、Picture in Pictureを有効にしましょう。すると以下の図のように、右下にビデオカメラで撮った映像が表示されます。

図11 SuperWebcam上でPicture in Picutreの設定ができた
画像
Note:
「Picture - in - Pictue」のアイコンをダブルクリックすることでも、Picture in PictureのON/OFFの切り替えが可能です。

これでPicture in Pictureの設定ができました。次にFlash Media Live Encoderを起動して配信の詳細を設定しましょう。Video Device:にSuperWebcam Captureを選択し、そのほかの設定方法は第2回と同じような設定で問題ありません。

図12 Flash Media Live Encoderでの設定
画像
Note:
ここまで説明していませんでしたが、Flash Media Live EncoderのStartボタンを押さないと、画面上部のOutputの画面比が設定したサイズで表示されません図13⁠。
図13 Startボタンを押すことで、Outputの画面比が正しく調整される
画像

以下のように、中継画面でもスライドの文字をくっきりと表示させることができます。ただ、全体的に多少明るくなっており、背景の画像が若干飛んでいますね。スクリーン表示ではきれいに表示されましたので、TwinPact 100の処理でそうなってしまっているようです。Twinpact 100では付属のリモコンを使って明るさ等を調整できるようですので、上手に調整できるかもしれません(でも、そこまで画質を求めなくてもよいかと思います⁠⁠。

図14 くっきりとした文字でスライドを配信できる。18px程度でも認識できてるのが分かる

配信中はFlash Media Live Encoderの設定を変えることはできませんが、SuperWebcamの操作が自由におこなえます。そのため、Picture inPictureの発表者の映像をON/OFF(Start/Stop)できたり、Video sourceメニューから発表者の映像のほうを大きく映すこと(つまりVideo sourceの切り替え)も簡単にできます。

ただし、このSuperWebcamを利用したPicture in Pictureの配信のデメリットもあります。このPicture in Picture中に、発表者のノートパソコンの外部映像出力用につなげたD-Sub(15pin)端子ケーブルが抜かれると、SuperWebcamの中でPicture in Pictureで表示させている映像(発表者の映像)が、ケーブルを抜かれた時の映像で止ってしまいます(次の発表者がD-Sub(15pin)ケーブルをさすと映像がきちんと流れます⁠⁠。表示されたままでも問題はありませんが、気になる場合には発表者がD-Sub(15pin)端子ケーブルをパソコンから抜く前に、SuperWebcamのPicture in Picture表示をOFFにしましょう(そして、次の発表者のノートパソコンにD-Sub(15pin)端子ケーブルをつないだらPicture in Picture表示をONにするようにします⁠⁠。

Note:
もちろん、発表者用のノートパソコンが1台で進行する場合には、この問題は無視できます。

実際の中継例(2)

今回の最後に、いままでで一番滞りなく中継できたイベントかなと著者が思う、Wikiばな Vol.7のときのネット配信についてお話します。

4時間を超える配信でしたが、とても安定してPicture in Pictureの配信をおこなうことができました。配信構成は、先述した「スライドを中心とした配信」と同じです。配信用のパソコンはThinkPad X61 7675-A31(Core2 Duo 2.2GHz、メモリは1+1GB)を利用しました。音声の収録はデジタルビデオカメラのマイクを利用し、それをUSBオーディオ・インターフェースに入れて、パソコンにつなぎました。

ThinkPad X61はIEEE1394a入力端子が1つしかついていないため、IEEE1394a増設PCカードを利用しました。Flash Media Live EncoderのFrame rate:を15fpsを超えて設定するとDropされはじめるような感じでしたので、あまり動きのない中継内容と判断したため、10fpsで配信をおこないました。

Note:
はじめての会場、はじめてのイベントで配信する場合には、事前に会場設備を確認したり、スケジュールを把握することが重要です。⁠特に初めての中継会場では)開始時間の1時間程度前に会場入りすると、時間に余裕が持てるかと思います。

配信中に、配信用のパソコンでUstream.tvの中継画面ページを開いて、配信を確認していると、Flash Media Live EncoderのOutputエンコードがDropし始めました。そのため、配信(中継状況)の確認は別のパソコンでおこなったほうが良いでしょう。

図15 wikibana Vol.7の一部。映像:300kbps/10fps、音声:48kbps(Mono)だが視聴にまったく問題ないのが分かる。配信用のパソコンに余裕があるなら、動きの激しいデモがあるイベントの場合にはfpsを増やしたりするのも良いだろう

また、セッションごとに録画ファイルを作成したかったため、Ustream.tvの配信用の設定画面において、セッションの終わりごとに録画を切っていました。この作業のために、あらかじめエディタ上に、セッション(録画)のタイトル(Title)と概要(Description)をすべて記述しておき、ここからコピー&ペーストしてしまうのが良いと思います。タグ(Tags)もあらかじめ入力するものを決めておきましょう。

Note:
あとで編集もできるので、概要(Description)はタイトル(Title)と同じものをペーストして時間をかけないようにするのも良いでしょう。また、一度録画すると、設定画面を閉じるまでは、タグ(Tags)は先に録画したときのタグが自動入力されている状態になるため、それをそのまま利用すると良いでしょう。

まとめ

今回までで、著者が実践してきた映像入力方法はざっくりと説明できたつもりです。いかがでしたでしょうか。

次回があるかどうかは微妙なところですが、区切りが良いので、ここで謝辞を述べさせていただきます。

本連載を執筆するうえで、⁠エンジニアの未来サミット」等の配信でお世話になりましたcojiさん、IT系のイベントの配信で活躍され、その配信資料を公開されているKaigiFreaksのみなさまには深く感謝いたします。また、そのほかのblogやwiki等に配信ノウハウを掲載している方々の記述も、たいへん参考にさせていただきました。ここにお礼申し上げます。

おすすめ記事

記事・ニュース一覧