document

example

準備の様子|早稲田大学の学園祭「早稲田祭2008」公式サイト <http://www.wasedasai.net/2008/feature/douga/premovieclips.html>

Flash Full-HD 配信テスト (自作 SONY HDR-SR11 + TMPGEnc MPEG-4 AVC) <http://www.goto.info.waseda.ac.jp/~wei/work/flash_video/test080915mp4.html>

Flash Full-HD 配信テスト (1080p 23MB) <http://www.goto.info.waseda.ac.jp/~wei/work/flash_video/full_hd.html>

Flash Full-HD 配信テスト (adobe 1080p 23MB) <http://www.goto.info.waseda.ac.jp/~wei/work/flash_video/full_hd.html>

Flash Full-HD 配信テスト (1080p 100MB) <http://www.goto.info.waseda.ac.jp/~wei/work/flash_video/full_hd_100mb.html>

Flash 通常サイズ 配信テスト (フリーソフト利用) <http://www.goto.info.waseda.ac.jp/~wei/work/flash_video/test.html>

Flash Full HD 配信

AVCHDカメラで撮った映像を編集ソフトを使ってmp4(H.264)に出力する。

でそのファイルをWEBサーバーに上げてjw_flv_playerで見れるようにする。

普通画質と低画質として.flvでも出力する。

理想的にはH.264の.flv形式で出力できればいいが2008年現在対応しているソフトがない。

早稲田祭2008の後に発売されたPremiere Pro CS4だとできるかも。AVCHDにも対応してるし一番理想的

基本的なフロー

画像の変換のフローは
研究室のカメラの場合

AVCHDカメラ{.m2ts}→(Videostudio12){編集用のソフトAVCHDで出力}→TMPGEnc 4.0 XPress FLV4{エンコード用mp4で出力}→(QTindexswapper)→jw_flv_player
Videostudio12は編集していない部分はエンコードしないので劣化もなく速くて良かった
H.264にこだわったがOn2 VP6 でのflv出力も結構きれいだった。。。

放送研究会のカメラの場合

放送研究会カメラ→CS3でキャプチャー→CS3で編集後mp4に出力→(QTindexswapper)→jw_flv_player

放送研究会とのやり取りのフローは

  1. 放送研究会にマシンとカメラとメモリースティックを貸す。
  2. 事前映像をもらいアップロードだめだったら作りなおしてもらう
  3. Tmpegで出力した.mp4の場合QTIndexSwapper?を使ってインデックス変換処理
  4. それでも駄目だったらRTMPのサーバーを使って配信する

編集とエンコード

エンコードは下のマニュアルに大体書いてあります。

  • 放送研究会の持ってるPremiere Pro CS3の場合はHDVに対応してるので最終的には.mp4 .flvすべてそのCS3で完結するようにした。
  • エンコードで注意するのはビットレートで6M,1M,300Kで統一したが、CS3の場合はプリセットがあるので1Mと300Kに関してはプリセットに従った。
  • あとTmpegにもプリセットを作ったが来年あるかわからないので、とりあえずビットレートとサイズが間違ってなければOK。あと2パスエンコーディングをできれば使うように!2パスだとエンコード時間がかかる分少しきれいになる。

以下放送研究会用に作成したマニュアル

	今回はVideostudio12で編集して取ったカメラに合った最高画質で出力します。
	出力ファイルをTMPGEnc 4.0 XPressでエンコードします。
	
	
	■VideoStudio12での作業
	1.ファイル取り込み
	2.編集(ここら辺はまかせます)
	3.完了タブのビデオファイル作成を押す
	4.HDVなら「HDV 1080i - 60i (PC)」を選ぶ
	  後藤研のカメラ(AVCHD)なら最高画質でとった場合「AVCHDのHD 1920」を選んでください。
	5.出力その後プロジェクトを保存してください。
	
	■TMPGEncでの作業
	VideoStudio12で出力されたファイルを三つの画質にエンコードする。
	1.入力設定でファイルを選ぶ
	2.新しい画面が出るので右下のOKを押す
	3.出力設定を押す
	4.新しい画面が出るので下に「ユーザー出力テンプレート」の中のHD、中画質、低画質を選ぶ
	5.画面が変わるので上のエンコードボタンを押す
	6.新しい画面が出るのでファイル名を設定して、左下のフィルム(エンコード)ボタンを押してください。
	#注意、HDだけ出力ファイルがmp4になります。あとはflv
	7.出力その後プロジェクトを保存してください。

Flashの画面サイズとビットレート

横*縦になります。

HD画質に関してはAVCHDのHDDレコーダーの設定を参考にギリギリの6Mbpsとした
http://www.goto.info.waseda.ac.jp/~wei/weiki/index.php?log%2F2008-09-14#b70f9453

http://www.goto.info.waseda.ac.jp/~wei/weiki/index.php?log%2F2008-05-31#rab459ca

20というのはプレーヤーの幅なので、画像サイズ+20となります。

HD画質:後藤研カメラの場合(HD.mp4):1920*(1080+20)→6Mbps
HD画質:放送研究会カメラの場合(HDV.mp4):1440*(1080+20)→6Mbps
普通画質:960*(540+20)→1Mbps
低画質:240*(135+20)→300Kbps

QTIndexSwapper? でH.264ダウンロードしながら再生できるようにする

QTIndexSwapper? AIR Application for Flash Player H.264 files

http://renaun.com/blog/2007/08/22/234/

http://www.goto.info.waseda.ac.jp/~wei/work/flash_video/test081022_qtp.html

これでTmpegで出力したH.264をプログレッシブダウンロードができるので
Flash Media Server やWowza Media Server がなくてもmp4をダウンロードしながら再生できる。

作者によるとインデックスファイルが後にあるか先にあるかの違いみたい。

先にあればプログレッシブダウンロードみたいになる。

ただし Premiere Pro CS3はいらない

Adobe Premiere Pro CS3 のH.264はQTIndexSwapper?がいらない

Premiere Pro CS3で出力したH.264でQTIndexSwapper?を通したらエラーがでた。

ためしにアップしてみたら、そのままでプログレッシブダウンロードができた。

多分Tmpegと違ってインデックスファイルを最初に持ってきているのだろう。

さすが本家!

cf:
http://www.goto.info.waseda.ac.jp/~wei/weiki/index.php?log%2F2008-10-22#q22dfd31

Wowza media server で RTMP ストリーミング配信

http://www.goto.info.waseda.ac.jp/~wei/work/flash_video/test081106_Wowza_media_server.html

Flash Media Serverのlinux版がRHEL5に対応してなかったので、断念

Wowza media serverは安いし、free版の使用制限が緩いからいい、また現時点でRED5が対応してないH.264にも対応してるので性能は十分

Linuxにインストール

http://www.wowzamedia.com/store.html

を参考に

  sudo chmod +x WowzaMediaServerPro-1.5.3.rpm.bin
  sudo ./WowzaMediaServerPro-1.5.3.rpm.bin

インストール

  • 起動
    cd /usr/local/WowzaMediaServerPro/bin
    ./startup.sh
    しかし、CentOS5のJAVAがSUNのJAVAではないので、そのままでは入らない
  • JAVAインストール
    http://blog.quall.net/linux/227
    http://park15.wakwak.com/~unixlife/java/j2sdk.html
    http://blogs.sun.com/thaniwa/entry/ja_fedora9
    を参考にJAVAをインストールして
      $ java -version
    java version "1.5.0_16"
    Java(TM) 2 Runtime Environment, Standard Edition (build 1.5.0_16-b02)
    Java HotSpot(TM) Client VM (build 1.5.0_16-b02, mixed mode, sharing)
    と表示されればOK
  • 起動スクリプトの設定
    sudo /sbin/chkconfig --level 345 WowzaMediaServerPro on

コンテンツ配信

http://www.wowzamedia.com/quickstart.html

When playing video on demand content (pre-recorded content), the files can be stored in directory structures where it is necessary to specify the relative path to the content.
For example, you might store your H.264 content in a sub-directory of the [install-dir]/content folder such as myvideos.
To play the video file “[install-dir]/content/myvideos/mycoolvideo.m4v” you would use the stream name:
mp4:myvideos/mycoolvideo.m4v

例:

/usr/local/WowzaMediaServerPro/applications

の下にvideoというディレクトリを作る.その後

/usr/local/WowzaMediaServerPro/content

の下に配信したいファイル「habuti_HD.mp4」を置く

jw_flv_playerでのアクセス

<script type="text/javascript">
	var s1 = new SWFObject("player.swf","single","1920","1080","9");
	s1.addParam("allowfullscreen","true");
	s1.addParam('wmode','opaque');
	s1.addVariable('flashvars','&file=habuti_HD.mp4&streamer=rtmp://wasedasai.goto.info.waseda.ac.jp/video/');
	s1.write("player1");
</script>

のように

s1.addVariable('flashvars','&file=habuti_HD.mp4&streamer=rtmp://wasedasai.goto.info.waseda.ac.jp/video/');

と書けばOK

streamer=rtmp://wasedasai.goto.info.waseda.ac.jp/video/'

のvideoがapplicationsの下に作ったvideoというディレクトリ

file=habuti_HD.mp4

がcontentのしたに置いたファイル

flash media server で RTMP ストリーミング配信

windowsに入れた。普通にクリックしたら入った。

インストールしたらコンテンツが見れるようになるので、 同じディレクトリにファイルを入れたら見れるようになった。

http://www.goto.info.waseda.ac.jp/~wei/work/flash_video/test081012_flash_media_server.html

http://www.goto.info.waseda.ac.jp/~wei/work/flash_video/test081012mp4_highprofile5-1L_1920x1080_10000k.html

サンプル映像を見るために

rtmpの場所をrtmp://133.9.81.204/vod/に変更
fileを&file=sample.flvと変更
	<script type="text/javascript" src="/embed/swfobject.js"></script>
	 
	<div id="player">This text will be replaced</div>
	 
	<script type="text/javascript">
	var so = new SWFObject('/embed/player.swf','mpl','470','290','9');
	so.addParam('allowscriptaccess','always');
	so.addParam('allowfullscreen','true');
	so.addParam('flashvars','&file=sample.flv&streamer=rtmp://133.9.81.204/vod/');
	so.write('player');
	</script>

jw_flv_playerの設定

ファイルをもらいQTIndexSwapper?で変換した後はアップロードして
jw_flv_playerから見れるようにする。
jw_flv_playerの書き方は2種類
ブログなどどのページにも貼り付けられるembed型とscriptタグで囲う方法がある。

  • embed型の例
    <embed src="http://wasedasai.goto.info.waseda.ac.jp/2008/flash/player.swf"
    bgcolor="undefined"
    allowscriptaccess="always"
    allowfullscreen="true"
    flashvars="file=http://wasedasai.goto.info.waseda.ac.jp/2008/flash/habuti_300K.flv&amp;image=http://wasedasai.goto.info.waseda.ac.jp/2008/img/thum_pre_03.JPG" width="240" height="155">
  • scriptタグの例
    <script type="text/javascript">
    	var s1 = new SWFObject("player.swf","single","1440","1100","7");
    	s1.addParam("allowfullscreen","true");
    	s1.addVariable("file","fukazawa_HDV.mp4");
    	s1.addVariable("image","../img/thum_pre_04_HD.jpg");
    	s1.write("player1");
    </script>
    パラメータ
    var s1 = new SWFObject("player.swf","single","1920","1100","9");
    • player.swfはプレーヤーの場所、相対リンクでも絶対リンクでもOK
    • 1440は横のサイズ
    • 1100は縦のサイズ
s1.addVariable("file","fukazawa_HDV.mp4");
  • fukazawa_HDV.mp4はファイルの場所、相対リンクでも絶対リンクでもOK
	s1.addVariable("image","../img/thum_pre_04_HD.jpg");
  • ../img/thum_pre_04_HD.jpgはサムネイルの場所、相対リンクでも絶対リンクでもOK

最後に

s1.write("player1");

で出力する。

Flash再生負荷を下げるリンクのパラメータ

通常のリンクでページを開いた場合はブラウザにツールバーなどがあるのでCPU負荷が高い。そこで

<a href="http://wasedasai.goto.info.waseda.ac.jp/2008/flash/clip_01_HD.html" onclick="window.open(this.href,'HDwindow','location=no,status=no,menubar=no, toolbar=no, scrollbars=yes,resizable=yes'); return false;">HD画質で見る</a>

として新しいwindowで開くようにして、

location=no,status=no,menubar=no, toolbar=no

としてツールバーやメニューバーを表示しないことでCPU負荷が少し下がる

リンク先のページでは

<script language="JavaScript">
<!--
 window.moveTo(0,0);
 window.resizeTo(window.screen.availWidth,window.screen.availHeight);
 window.focus();
 //-->
</script> 

を<head>タグのなかに設定することによってフルサイズで表示できるようにする

サムネイルを作る

普通画質を再生中にwinshotで

JPEG保存→矩形範囲指定

で切り出す。

HD画質にはそのサムネイルに注意書きを入れるといい。全画面表示した場合はさらにCPU負荷が下がるので映像がスムーズに映し出される可能性がある http://wasedasai.goto.info.waseda.ac.jp/2008/img/a.png


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-01-08 (木) 20:01:58 (3811d)