モーグルとカバとパウダーの日記

モーグルやカバ(EXカービング)山スキー(BC)などがメインの日記でした。今は仕事のコンピュータ系のネタが主になっています。以前はスパム対策関連が多かったのですが最近はディープラーニング関連が多めです。

Red5とFlowPlayerとPukiWikiでストリーミング動画配信サービス

ちょっと前から、ストリーミング動画配信が出来る環境を構築したくて、ちょこちょこと調べたり作ったりしていました。
とりあえず、やりたいことがだいたい出来るようになったのでまとめ。


フリーのツールでストリーミング動画配信する場合、Red5というオープンソースのフラッシュサーバを使うか、Darwin Streaming Server(DSS)というQuickTime Streaming Serverのオープンソース版を使うか、という選択肢になると思う。
あと完全なストリーミングではないが、lighttpdを使うとhttpで疑似ストリーミング動画配信が可能で、ニコニコとかはこれを使ってるんだと思う。
lighttpd で Flash Video (.flv) をストリーミング配信 (2) | METAREAL


Red5とDSSを試してもらって、QTだとインストールされてない環境が心配なのと、予想外にQTのほうがフラッシュ動画プレイヤーより重かったということがあり、Red5を使ってフラッシュ動画配信で行くことにしました。
フラッシュ動画プレイヤーには、オープンソースのFlowPlayerを利用しました。
これにPukiWiki用のFlowPlayerプラグインを作って、PukiWikiで簡単にストリーミング動画を紹介できるように準備しました。
ちなみにサーバはUbuntuを使い、1.2万くらいの激安サーバに突っ込んであります。


Red5のインストールは、aptでred5を入れるだけ。
もしくは本家サイトにDebian/Ubuntu用のdebファイル Red5_0.7.0_all.debRed5 v0.7.0 final 02.23.2008 Open Source Flash
に用意されているのでそれを使えば良いだろう。
インストールしたら、olfaDemoでストリーミング動画が見れるか確認しておく。

あと、フラッシュ動画にエンコードする環境を整えるには、以前書いたエントリーを参照してください。
UbuntuでRed5用にフラッシュ動画にエンコードする - モーグルとカバとパウダーの日記

エンコードしたフラッシュ動画はoflaDemoの動画があるところと同じ、
/usr/lib/red5/webapps/oflaDemo/streams/
に置いておきます。


次にフラッシュ動画プレイヤーのFlowplayerを準備。

現在Flowplayerは3.0.2が最新なのだけど、これだとどうしてもうまくRed5のストリーミング動画を再生できなかったため、2.x系のものを落としてくる。
本家のサイトやsourceforgeからはもう落としてこれないため、
FlowPlayer download - FlowPlayer 3.0.2 / 3.0.0-rc3
のページの下のほうにある過去のバージョン2.2.4をダウンロードしてきました。

FlowplayerとRed5の連携についてはこちらの
「Red5」で自宅PCをオレ専用YouTubeにしてしまえ :教えて君.net
ページが大変参考になりました。というかやりたいことそのまま。


うちの場合、さらにPukiWikiと連携させたいため、PukiWikiのほうも合わせて環境を整えてやります。
Flowplayer-2.2.4の./examplesにあるjsフォルダをそのままPukiWikiのルートディレクトリ(pukiwiki.ini.phpがあるところ)上にコピーします。
うちはPukiWikiサーバとフラッシュ動画配信サーバが別になるのですが、フラッシュの置いてあるサーバとストリーミングファイルが置いてあるサーバは(設定で回避可能だが)同じ必要があるため、Flowplayer-2.2.4開けてすぐにあるFlowPlayerLP.swfなどswfファイルは、フラッシュ動画配信サーバに
/usr/lib/red5/webapps/root/demos/flowplayer2
などとフォルダを作って、そちらに入れておきます。

PukiWikiから簡単に呼び出せるよう、u2b.inc.phpをベースに適当に改造したプラグインを準備します。
だいぶ適当で、まだ完全に直してない部分が多々あるので、あくまで参考程度に。
でもこれで、例えば動画配信したいファイル名が「samplemovie.flv」だったとすると

&wikitv(samplemovie);

と書くと、そこに動画を貼り付けることが出来るようになります。

<?php
/**
 * WikiTV
 * wikitv.inc.php based on u2b.inc.php
 *
 * @copyright   Copyright &copy; 2006, Katsumi Saito <katsumi@jo1upk.ymt.prug.or.jp>
 * @version     $Id: u2b.inc.php,v 0.1 2006/04/16 17:52:00 upk Exp $
 * @license     http://opensource.org/licenses/gpl-license.php GNU Public License
 *
 */

if (!defined('WIKITV_URL')) {
        define('WIKITV_URL','rtmp://red5.example.jp/oflaDemo');
}
if (!defined('WIKITV_PLAYER_URL')) {
        define('WIKITV_PLAYER_URL','http://red5.example.jp/demos/flowplayer2/FlowPlayerLP.swf');
}

function plugin_wikitv_convert()
{
        $argv = func_get_args();
        $argc = func_num_args();

        foreach($argv as $arg) {
                $val = split('=', $arg);
                $val[1] = (empty($val[1])) ? htmlspecialchars($val[0]) : htmlspecialchars($val[1]);

                switch ($val[0]) {
                case 'clearl': return '<div style="clear:left;display:block;"></div>';
                case 'clearr': return '<div style="clear:right;display:block;"></div>';
                case 'clear' : return '<div style="clear:both;"></div>';
                case 'width':
                case 'w':
                        $width = $val[1];
                        break;
                case 'height':
                case 'h':
                        $height = $val[1];
                        break;
                case 'align':
                case 'right':
                case 'left':
                case 'center':
                        $align = $val[1];
                        break;
                case 'r':
                        $align = 'right';
                        break;
                case 'l':
                        $align = 'left';
                        break;
                case 'c':
                        $align = 'center';
                        break;
                case 'small':
                case 's':
                        $width = 320;
                        $height = 240+23;
                        break;
                case 'large':
                        $width = 640;
                        $height = 480+23;
                        break;
                case 'id':
                default:
                        $id = $val[1];
                        break;
                }
        }

        if (empty($id)) return '#wikitv: ID parameter must be set.';
        if (empty($width) || empty($height)) {
                $width = 320;
                $height = 240+23;
        }
        if (empty($align)) $align = 'center';

    $wikitv_url = WIKITV_URL;
    $wikitv_player_url = WIKITV_PLAYER_URL;
    $wikitv_file = $id . ".flv";
    $wikitv_id = "wikitv_" . $id;

    return <<<EOD
<script type='text/javascript' src='js/flashembed.min.js'></script>
<script>
flashembed('$wikitv_id',
  {
    src:'$wikitv_player_url',
    width: 320,
    height: 263
  },
  {
    config: {
      autoPlay: false,
      autoBuffering: true,
      loop: false,
      initialScale: 'orig',
      controlBarBackgroundColor:'0x72ffc2',
      streamingServer: 'red5',
      streamingServerURL: '$wikitv_url',
      videoFile: '$wikitv_file'
    }
  }
);
</script>
<div id='$wikitv_id' style='float:$align'></div>
EOD;
}
?>


ところで、YouTubeをはじめ、タダで動画配信してくれるサービスが山ほどあるのに、なぜあえて自分達でサーバ準備して使う必要があるの?という方もいると思います。
これは、逆にユーザを絞りたいという要望があるためです。といって有料サービスということではないです。
自分らの場合、地域ケーブルテレビのコンテンツ蓄積があり、そのケーブル網を使ってインターネット接続が出来るようになってるのですが、元々その地域の人達用に作られたコンテンツなんで、それを無制限に世界中からアクセスされるようになるとなにかと問題が起こる可能性があるためです。
もともとケーブルテレビで流しているコンテンツなので、同じユーザしか見れないケーブルインターネット内だけでアクセス出来るようにするなら問題ないだろうと。

ケーブルインターネットをサービスしているところなら、非常に格安でオンデマンド放送が可能になる、予定です。
例えば、過去に地域のケーブルテレビで流れた、地域の運動会の様子だとか保育園のお遊戯の様子なんかが、Wikiから見れるようになるわけです。これならおじいさんたちもパソコン触る機会増えるかなと。


(関連)

動画をストリーム配信するためのツール・サービス - モーグルとカバとパウダーの日記
UbuntuでRed5用にフラッシュ動画にエンコードする - モーグルとカバとパウダーの日記
「Red5」で自宅PCをオレ専用YouTubeにしてしまえ :教えて君.net
美麻Wiki - モーグルとカバとパウダーの日記