ノート
訪問者数 2482      最終更新 2009-06-01 (月) 12:15:07

臨時メモ JavaScriptでMP3を再生するライブラリの作り方

臨時メモ PHPとMingで作るFlashサーバー 〜 SWFムービーを作成するWebサーバーを無償ツールだけで構築する

09/05/30 oreganoにフロントエンド4 〜 JavaScriptならどうか?

2D情報をホストから端末に送り、端末上のJavaScriptなど汎用の環境で表示するという構成を考える。

この考えはかなり試みられているが、いまだに標準・共通のものになっていないようだ。

もう1つの枠組みとして、端末側をFlashにする。ホスト−端末間は適当にエンコードして転送(XMLHttpRequest)してもよし、何かFlashの仕組があれば使ってもよし。すぐ思いつくのは、端末側でjavascriptからFlashに対して描画コマンドを発する方法。
まずはAction Scriptそのものについて ⇒ ActionScript入門
簡単なクライアント・サーバー間通信: Flash Remotingの初めの方
要調査: AMFPHP〜Action Message Format(AMF)

09/05/29 oreganoにフロントエンド3

出力側について、考える。

疑問1>>flashビデオをHTMLサーバーに置くには?
そこらによく書いてあることだが、一応試しておく。
サーバー側に(HTMLファイルと同レベルで)flvファイル(xxx.flv)を置く。
サーバー側に、更に2つファイルを用意する。1つは、xxx.flvをアクセスせよという ことを記述したhtmlファイル、もう1つは端末画面上にflvを形よく表示するためのjavascriptファイル。
まずはjavascriptファイル。『そこら』からもらってきたもの。

function foutput(myURL, fname){
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
 codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
 width="328" height="282" id="fxb01_ffmpeg" align="middle">
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="movie" value="' + myURL + 'fxb01_ffmpeg.swf?fff=' + fname + '" /><param name="quality" value="high" />
 <param name="bgcolor" value="#ffffff" />
 <embed src="' + myURL + 'fxb01_ffmpeg.swf?fff=' + fname + '"
  quality="high" bgcolor="#ffffff" width="328" height="282" name="fxb01_ffmpeg" align="middle" allowScriptAccess="sameDomain"
  type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
 </object>');  〜〜document.writeからここまで改行無しで書く
}

次にこのfoutputを起動させるような、サーバー側に置くhtmlファイル。ユーザは端末側からこれを最初に呼び出す。

<html>
<body>
  <script type="text/javascript" src="上記のjavascriptファイルffmpeg.js"></script>
  <script language="javascript">foutput("サイトURL http://..../", "flvファイル名");</script>
</body>
</html>

疑問2>>ffmpegがストリーム出力を出来るか?
ffmpegの出力をstdoutに向けてみる。stdoutの先には、名前付きパイプを用意する。
名前付きパイプを作っておくには、linuxのmkfifoコマンドを使えばよさそう。たとえば mkfifo xxx.flv。
  注: ffmpegは出力のビデオフォーマットを出力ファイルの拡張子から決めるらしい。
     だから、"|" ではなくて、名前付きパイプを試す。 やってみたこと:

mkpipe xxx.flv     pipeを作っておく
cat xxx.flv > yyy.flv &  pipeの出力側をcatにつなぐ。ここではファイルyyy.flvにコピー
cat WS.yuv | ffmpeg -y -f yuv4mpegpipe -i - -vcodec flv -aspect 4:3 xxx.flv  ffmpegからpipeに出力

で、一応yyy.flvがうまく作られ、flvファイルとして再生できた。

疑問3>>apacheが名前付きパイプからflvファイルを端末表示できるのか?
残念ながら、これはだめ。Apacheではファイルが完結しないとだめみたい。

で、ライブストリーミングサーバーが必要。FlashだとFree版ではRed5が有名どころ。

では、この辺 や この辺でも 見ながらRed5導入。

埋め込みなどについては、たとえばこのページが役立つかも。

09/05/25 oreganoにフロントエンド2

フロントエンド化するためには、(0)プログラムを起動する仕組、と、 (1)入力を渡す仕組、と、(2)出力を表示する仕組、が必要だろう。

(0)起動する仕組 ⇒ PHPからCプログラムを起動する。
このとき、入力を引数で渡すことを考えたらどうか。

(1)入力を渡す仕組 ⇒ 起動時のみ渡すのであれば(つまり、途中で ダイアログ画面を出して入力を読み込むのでなければ)、起動時の引数で 渡してしまうことが出来る。
ダイアログを出して、とか、グラフィクスを出してその上で点を指定、とかを Webべーすでやるとなると、もう少し考える必要があるので、この点はペンディング。

(2)出力を表示する仕組 ⇒ 文字、静止画ならWeb画面(HTMLなりpngなり)を 作ればいいから、比較的簡単。
たとえばMRTG(ネットワークトラフィックなどを遠隔から監視〜解説記事1解説記事2、 後継はRRDTool〜解説記事)では、 グラフ表示を、pngの絵を生成してHTMLにはめ込む形で実現しているらしい。
動画となると、ちょっと考える必要あり。いくつか考えられるが、たとえば

FlashのFLVを生成することを考えると、FFmpeg(FFmpegのホーム日本語の簡単な紹介記事)がお手軽なオープンソースかも知れない。こんなもの(PHPで動画形式の各種変換が行えるffmpegのラッパークラスライブラリ「ffmpeg」)もある。

更に、もしffmpegに動画フレーム(たとえばRGB、本当はYUV?とか)をストリーム的に(つまり全部のフレームが完成してからffmpegを起動するのではなく、予め動いているffmpegに対してフレームをレンダラーで1枚ずつ生成しながらffmpegに渡す)ことがやりたいだろう。それを、パイプで行う議論が、Pipe RGB data to ffmpegにあった。要するにyuv4mpegpipeというフォーマットでできるらしい。

RGB to YUV ? http://www.mis.med.akita-u.ac.jp/~kata/image/rgbtoyuv.html http://www.sm.rim.or.jp/~shishido/yuv.html http://www.fourcc.org/fccyvrgb.php

このyuv4mpegpipeというフォーマットは、MJPEG Toolsというプロジェクトで使われている交換フォーマットらしい。rpmがあるがデペンデンシーファイルのバージョンがあわない(古いライブラリを使っている)ので、ソースからインストールする。./configure ⇒ make なのだが、./configureで足りないものがあった。1つはlibjpegで、これは/usr/lib/libjpeg.so.64をlibjpeg.soにリンク。make時に足りなかったlibjpeg関係のヘッダーファイルを/usr/includeに追加(本当はおかしい?)、更にX11lib-develをyumでインストールして、ようやくmakeが通った。
で、MJPEGtoolsパッケージの使い方はMJPEG HOWTO。 で、4.1 Creating videos from images によると、

You can use jpeg2yuv to create a yuv stream from separate JPEG images.
This stream is sent to stdout, so that it can either be saved into a file,
encoded directly to a mpeg video using mpeg2enc or used for anything else.

Saving an yuv stream can be done like this:
> jpeg2yuv -f 25 -I p -j image%05d.jpg > result.yuv
Creates the file result.yuv containing the yuv video data with 25 FPS.
The -f option is used to set the frame rate. Note that image%05d.jpg means that
the jpeg files are named image00000.jpg, image00001.jpg and so on.
(05 means five digits, 04 means four digits, etc.)
The -I p is needed for specifing the interlacing. You have to check which type you have.
If you don't have interlacing just choose p for progressive

で、Windows上でWinShotを使って動画画面を連続キャプチャ、JPEGに変換したものを用意して、この処理を実験。
/usr/local/libを検索パスに含んでいない問題発生 (参照:?) ⇒ rootでldconfigコマンドを実行する。
JPEGファイルが0番からスタートしていない問題(WinShotの問題) ⇒ 仮に2番をコピーして0番と1番とする。
更にエラー:Image dimensions are 425x344なのだが、**ERROR: [jpeg2yuv] The image width isn't a multiple of 16, rescale the image。 これはJPEGファイルのサイズを作り直して(たとえば400x240にした)、再度挑戦。今度は

[yamanouc@oregano MJPEGtools]$ jpeg2yuv -f 10 -I p -j WS%06d.JPG > WS.yuv
  INFO: [jpeg2yuv] Parsing & checking input files.
  INFO: [jpeg2yuv] YUV colorspace detected.

  INFO: [jpeg2yuv] Starting decompression
  INFO: [jpeg2yuv] Image dimensions are 400x240
  INFO: [jpeg2yuv] Movie frame rate is:  10.000000 frames/second
  INFO: [jpeg2yuv] Non-interlaced/progressive frames.
  INFO: [jpeg2yuv] Frame size:  400 x 240
  INFO: [jpeg2yuv] Number of Loops 1
  INFO: [jpeg2yuv] Number of Frames -1
  INFO: [jpeg2yuv] Start at frame 0
  INFO: [jpeg2yuv] Now generating YUV4MPEG stream.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000000.JPG, size 9699
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000001.JPG, size 9699
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000002.JPG, size 9699
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000003.JPG, size 10086
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000004.JPG, size 9998
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000005.JPG, size 9806
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000006.JPG, size 9838
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000007.JPG, size 9824
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000008.JPG, size 9921
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000009.JPG, size 9959
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000010.JPG, size 9541
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000011.JPG, size 9634
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000012.JPG, size 9687
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000013.JPG, size 9694
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000014.JPG, size 8944
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000015.JPG, size 9724
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000016.JPG, size 9438
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000017.JPG, size 9933
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000018.JPG, size 10822
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000019.JPG, size 10964
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000020.JPG, size 11083
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000021.JPG, size 10948
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000022.JPG, size 11214
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000023.JPG, size 10595
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000024.JPG, size 10976
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Processing non-interlaced/interleaved WS000025.JPG, size 10921
  INFO: [jpeg2yuv] Rescaling color values.
  INFO: [jpeg2yuv] Read from 'WS000026.JPG' failed:  No such file or directory
  INFO: [jpeg2yuv] No more frames.  Stopping.

という感じで成功。

次に、これをFFmpegでちゃんと処理できるかどうか確認。

まずffmpegのインストール ⇒ 面倒なのでyumでインストール(元サイトはソースからが基本らしい)。rpmが見つからないので、ここを参考にした。

rpm --import http://ATrpms.net/RPM-GPG-KEY.atrpms
vi /etc/yum.repos.d/atrpms.repo
ここからペースト
[atrpms]
name=Fedora Core $releasever - $basearch - ATrpms
baseurl=http://dl.atrpms.net/f$releasever-$basearch/atrpms/stable
gpgkey=http://ATrpms.net/RPM-GPG-KEY.atrpms
gpgcheck=1
ここまでペースト
yum install ffmpeg

これでうまく行った。後でソースが無いと困るかも。

それで、ffmpegの入力をyuv4mpegpipeにしてみる実験。

[yamanouc@oregano MJPEGtools]$ cat WS.yuv | ffmpeg -y -f yuv4mpegpipe -i - -target ntsc-dvd -aspect 4:3 WS.mpg
FFmpeg version 0.5-30.fc10, Copyright (c) 2000-2009 Fabrice Bellard, et al.
 configuration: --prefix=/usr --libdir=/usr/lib --shlibdir=/usr/lib --mandir=/usr/share/man --enable-shared --enable-gpl
 --enable-postproc --enable-swscale --enable-avfilter --enable-avfilter-lavf --enable-pthreads --enable-x11grab --enable-vdpau
 --disable-avisynth --disable-libamr-nb --disable-libamr-wb --enable-libdc1394 --enable-libdirac --enable-libfaac
 --enable-libfaad --enable-libfaadbin --enable-libgsm --enable-libmp3lame --enable-libschroedinger
 --enable-libspeex --enable-libtheora --enable-libvorbis --enable-libx264 --enable-libxvid
 --extra-cflags=-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector
 --param=ssp-buffer-size=4 -m32 -march=i386 -mtune=generic -fasynchronous-unwind-tables
 --disable- tripping --extra-cflags=-I/usr/include/nvidia-graphics --extra-ldflags=-L/usr/lib/nvidia-graphics
  libavutil     49.15. 0 / 49.15. 0
  libavcodec    52.20. 0 / 52.20. 0
  libavformat   52.31. 0 / 52.31. 0
  libavdevice   52. 1. 0 / 52. 1. 0
  libavfilter    0. 4. 0 /  0. 4. 0
  libswscale     0. 7. 1 /  0. 7. 1
  libpostproc   51. 2. 0 / 51. 2. 0
  built on Mar 15 2009 14:10:20, gcc: 4.3.2 20081105 (Red Hat 4.3.2-7)
Input #0, yuv4mpegpipe, from 'pipe:':
  Duration: N/A, bitrate: N/A
    Stream #0.0: Video: rawvideo, yuv420p, 400x240, PAR 1:1 DAR 5:3, 10 tbr, 10 tbn, 10 tbc
Output #0, dvd, to 'WS.mpg':
    Stream #0.0: Video: mpeg2video, yuv420p, 720x480 [PAR 8:9 DAR 4:3], q=2-31, 6000 kb/s, 90k tbn, 29.97 tbc
Stream mapping:
  Stream #0.0 -> #0.0
frame=   75 fps=  0 q=2.0 Lsize=     586kB time=2.47 bitrate=1944.2kbits/s
video:560kB audio:0kB global headers:0kB muxing overhead 4.685941%

というわけで、そこそこ成功。
Flashビデオ(flv)にしたいので、vcodecを指定すると、(この辺はFlashからアップロードした動画をffmpegでflvに変換してみた(最低限動くVer)を参考)

yamanouc@oregano MJPEGtools]$ cat WS.yuv | ffmpeg -y -f yuv4mpegpipe -i - -vcodec flv -aspect 4:3 WS.flv
FFmpeg version 0.5-30.fc10, Copyright (c) 2000-2009 Fabrice Bellard, et al.
  configuration: --prefix=/usr --libdir=/usr/lib --shlibdir=/usr/lib --mandir=/usr/share/man --enable-shared
  --enable-gpl --enable-postproc --enable-swscale --enable-avfilter --enable-avfilter-lavf --enable-pthreads
  --enable-x11grab --enable-vdpau --disable-avisynth --disable-libamr-nb --disable-libamr-wb --enable-libdc1394
  --enable-libdirac --enable-libfaac --enable-libfaad --enable-libfaadbin --enable-libgsm --enable-libmp3lame
  --enable-libschroedinger --enable-libspeex --enable-libtheora --enable-libvorbis --enable-libx264
  --enable-libxvid --extra-cflags=-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector
  --param=ssp-buffer-size=4 -m32 -march=i386 -mtune=generic -fasynchronous-unwind-tables --disable- stripping
  --extra-cflags=-I/usr/include/nvidia-graphics --extra-ldflags=-L/usr/lib/nvidia-graphics
  libavutil     49.15. 0 / 49.15. 0
  libavcodec    52.20. 0 / 52.20. 0
  libavformat   52.31. 0 / 52.31. 0
  libavdevice   52. 1. 0 / 52. 1. 0
  libavfilter    0. 4. 0 /  0. 4. 0
  libswscale     0. 7. 1 /  0. 7. 1
  libpostproc   51. 2. 0 / 51. 2. 0
  built on Mar 15 2009 14:10:20, gcc: 4.3.2 20081105 (Red Hat 4.3.2-7)
Input #0, yuv4mpegpipe, from 'pipe:':
  Duration: N/A, bitrate: N/A
    Stream #0.0: Video: rawvideo, yuv420p, 400x240, PAR 1:1 DAR 5:3, 10 tbr, 10 tbn, 10 tbc
Output #0, flv, to 'WS.flv':
    Stream #0.0: Video: flv, yuv420p, 400x240 [PAR 4:5 DAR 4:3], q=2-31, 200 kb/s, 90k tbn, 10 tbc
Stream mapping:
  Stream #0.0 -> #0.0
frame=   26 fps=  0 q=5.9 Lsize=     126kB time=2.60 bitrate= 396.7kbits/s
video:125kB audio:0kB global headers:0kB muxing overhead 0.469853%

以上そこそこ使えそう。ただ、FLVファイルをパイプできるかどうか(apache側がそれを認めるかどうか)は不明。ストリーム用のサーバーが必要かな?

また、HTML側でFLVを制御するために(swfを使わないらしい)『Adobe製、AjaxでFLVを制御するオープンソース「Flash-Ajax Video Component」』というのもあるようだ。

08/02/11 oreganoにフロントエンド

oreganoは計算処理サーバーだが、それにフロントエンドを追加したい

認証は一応外側でしてあるのでいいのかな?

2つファイルをアップロードする必要がある。mtzファイルとpdbファイル。

ファイル名は、クライアント側のファイル名を生かすと、(1)漢字、(2)MS Windowsファイル名にある空白、がUNIX上で問題になるのがいやだ。
さし当たって、結果さえ返せればいいので、サーバー側で名前を付けよう。

全体の流れとしては、

パラメタ設定+アップロードファイル指定画面
「実行」ボタンを押すと
mtzファイルとpdbファイルがアップロードされて
  システムが適当に付けたファイル名smpl01.mtzとsmpl01.pdbにして
  ファイルの内容を一応チェックして
  epmrを起動する  mpirun -n 8 epmr LDH.mtz LDH.pdb (もっと多くのパラメタ)
    その前に、mpdを起動しておく必要あり
  正常に起動されたら、「待ってね」画面になり(計算進行中である表示をする?)
計算が終わると
  生成されたpdbファイルをダウンロードし、かつ
  画面上で画像表示する(必要か??)

SELinux効果で、EPMRの実行起動が出来ない。設定変更。

アクセスがとても遅い。

PHPとセッション

EPMRのいろいろなパラメタ設定を、ユーザ(セッション)ごとに保存したい。 そのためには、セッション管理が必要。

PHPにはセッション管理の機能が付いている。

LDAP認証 〜〜〜 (apacheではなくて)PHPの中で自分でやる場合

apacheでページアクセス時に認証するときは、httpd.confに書いておくことになる。
これの欠点は、PHPプログラムの中で認証情報(ユーザIDにせよ、LDAPに書かれた 付随情報にせよ)がアクセスできない(もしくは別途アクセスせねばならない)こと。
別途アクセスも可能なのだが、ユーザIDが分からないと、別途アクセスのし様もあるまい。

ということで、PHPの中で認証する。これにはパッケージPEAR::Authが便利そう。

で、ここに出てくるサンプルを実験した結果が、

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PHP LDAP test</title>
</head>

<body>

<?php
require_once "Auth/Auth.php";

//Function for showing LOGIN form
function loginFunction($username, $status) {
    if ($status == AUTH_WRONG_LOGIN) {
        print("Wrong User Name / Password<br>");
    }
    print("<form method=\"post\" action=\"" . $_SERVER['PHP_SELF'] . "\">");
    print("<table><tr><td>UserName</td><td>");
    print("<input type=\"text\" name=\"username\">");
    print("</td></tr><tr><td>Password</td><td>");
    print("<input type=\"password\" name=\"password\">");
    print("</td></tr><tr><td colspan=\"2\">");
    print("<input type=\"submit\" value=\"LOGIN\">");
    print("</td></tr></table>");
    print("</form>");
}

//Auth_Container_LDAP options
$authldapparams = array(
    "url"        => "ldap://ldap.toho-u.ac.jp:389",
    "basedn"     => "ou=RIGAKUBU,ou=GAKUSEI,dc=toho-u,dc=ac,dc=jp",
    "userfilter" => "(objectClass=*)",
    "attributes" => array('*')
     );

$authobj = new Auth ("LDAP", $authldapparams, "loginFunction");
$authobj->start();

if ($authobj->getAuth()) {
    print("Authorized <br>");
    $givenName = $authobj->getAuthData("givenName");
    $tohoAdGroup01 = $authobj->getAuthData("tohoAdGroup01");
    $tohoAdGroup02 = $authobj->getAuthData("tohoAdGroup02");
    $title         = $authobj->getAuthData("title");
    print("Name: " . $givenName . " Faculty: " . $tohoAdGroup02 . " Title: " . $title . "<br>");
}

?>
</body>
</html>

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