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

gihyo.jp » LIFESTYLE STAGE » 連載 » インターネット中継するための,配信のキホン » 第2回 Ustream.tvでお絵描きの模様を高画質配信してみよう

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

第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)。

図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ファイル(以降,プロファイル)を保存します。

図3 チャンネル設定ページの「Advanced」メニュー

画像

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

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

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

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

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

図4 Windowサイズ!の設定画面

画像

これらを確認して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)。

図5 Flash Media Live Encoderの画面

画像

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ボタンを押します。

図6 SCHF DSFの「Select process」画面

画像

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

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

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

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

図7 SCHF DSFの詳細設定画面

画像

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

著者プロフィール

高橋和道

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

URL:http://twitter.com/k_taka

コメント

コメントの記入

パスサポ

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

ピックアップ

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

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

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

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

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

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

一行クイックアンケート

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

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

その他の連載

読むウェブ ~本とインタラクション

ディスプレイで読む活字とそのインタラクション(interaction:相互作用)について,最新Webを紹介しながら読み解いていく。

いま,見ておきたいウェブサイト

この連載では,国内外の最新のウェブサイトを隔週更新で取り上げ,これら最新サイトの特徴や素晴らしい部分を,さまざまな角度から解説していきます。

Windows phoneアプリケーション開発入門

Windows Marcketplace for Mobileがサービス開始され,作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか?

ここは知っておくべき!Windows Server 2008技術TIPS

5年ぶりのサーバOSとなったWindows Server 2008が出荷されて早2年。2009年にはR2が出荷され,再び注目を集めています。発売前から実施したトレーニングによって感じた,インフラエンジニアの方々に知っておいていただきたい機能を中心にご紹介します。

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

連載一覧

gihyo.jp

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

書籍案内

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

定期刊行物一覧

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