アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » LIFESTYLE STAGE » 連載 » インターネット中継するための,配信のキホン » 第4回 Ustream.tvでPicture in Picture(PinP)の配信をおこなおう

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

第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のレイアウト画面で,パネルはいくつも増やせます。その他表示させたいものがある場合には試してみてもよいでしょう(時計や音楽プレーヤーのタイトル表示部などを画面にレイアウトしている中継をよく見かけます)。

著者プロフィール

高橋和道

gihyo.jpの中で,はたらいています。みなさんも連載してみませんか。

URL:http://twitter.com/k_taka

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

C/C++プログラマのためのDTrace入門

よくカーネルのチューニングや解析で活用されるDTraceですが,実はユーザプログラムの開発においても非常に有用です。連載ではC/C++プログラマやテストに関わる方向けにDTraceの使い方を解説します。

Blogopolisから学ぶ計算幾何

計算幾何学は,図形に関するアルゴリズムを研究するコンピュータサイエンスの一分野です。本連載では,ビジュアルブログ検索エンジン「Blogopolis」で採用されている計算幾何のアプローチを例に取り上げながら,計算幾何の初歩を実践的に学習します。

検索エンジンはいかにして動くのか?

本連載では, 今や誰もが利用している検索エンジンの中身を,全体の仕組みやデータ構造,アルゴリズムから分散インデックスまで,最近の研究事例も交えて紹介します。

サイエンスに片思い

本連載では,サイエンスという学問を軸に,そこから広がる可能性やつながり,そしてWebの世界との関係について,前田邦宏氏がさまざまな取材を元に考察し,これからの可能性について展望します。

使ってみよう! Windows Live SDK/API

Windows Liveサービスの一部にはAPIやSDKとして提供されているものがあります。本連載では各API・SDKの紹介とそれらを利用したアプリケーションを開発していきます。

Lifelog~毎日保存したログから見えてくる個性

コンピュータを使って,日常のさまざまなことの記録(ログ)をとり,それを分析して活用することで,もう一段階上の「楽な生活」をめざす日々の研究報告です。

もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

本連載では,実践サンプルとともに,jQueryを上手に活用してサイト制作の品質向上・効率化を実現するための実践テクニックを解説します。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス