ねこライブ配信システム WEBで動画再生FlowPlayer（その5）

LINEで送る






さて、gstreamerによる撮影からストリーミングサーバへのデータ送り込み。




そしてストリーミングサーバ crtmpserverによる配信の体制が整いました。




あとは、サーバからの配信を受けとって映像化する、その他の処理が可能になります。




ここでは、まず配信されているビデオをWebページで再生する方法を解説します。




Webページで再生するためのツールはいくつかありますが、我が家ではFlowPlayerを使っています。




FlowPlayerはWebページで動画を再生するためのソフトウエアパッケージで、Webサーバの中に組み込んで利用します。




この例は最小限の構成でビデオを再生するためのコードです。 




<!doctype html>
<html>
<head>

    <title>RTMP video player : Flowplayer</title>
    <style>
        body{
            width:982px;
            margin:50px auto;
            font-family:sans-serif;
        }
    </style>



    <!-- flowplayer javascript component -->
    <script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script>

    </head>

<body>
    <!-- set up player container  -->
<a id="livevideo" style="display:block;width:800px;height:448px;">
</a>

<script>
// install flowplayer into container
$f("livevideo", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
    plugins: {
        rtmp: {
            url: "flowplayer.rtmp-3.2.13.swf",
            netConnectionUrl: 'rtmp://rtmp_server/flvplayback',

        }
    },
    clip: {
        url: 'camera1',
        provider: 'rtmp',
        live: true,
        bufferlength: 0,
    }
});
</script>
</body>
</html>





上記の例では、flowplayer本体、rtmpプラグインモジュールをFlowplayerサイトから利用する方式で書いていますが、実際には自前のサーバにダウンロードしてそこから提供するようにします。




netConnectionUrl: 'rtmp://rtmp_server/flvplayback' の行でcrtmpserverの動作しているサーバおよび設定ファイルで指定したアプリケーション名を記述します。




url: 'camera1' で、ビデオストリーム名を指定してやります。




ここを参考にしています。とてもたくさんの事例がデモとともに紹介されているので、勉強になります。
http://flash.flowplayer.org/plugins/streaming/rtmp.html




うまくいくと、こんな映像がっ！





指をだされるとつい。




ねこライブ配信システム 全体（その１）
ねこライブ配信システム gstreamerでカメラから転送（その２）
ねこライブ配信システム v4l-utilsでカメラ制御（その３）
ねこライブ配信システム crtmpserver配信の主役（その４）
ねこライブ配信システム WEBで動画再生FlowPlayer（その５）
ねこライブ配信システム 便利ツールffmpegの準備（その６）
ねこライブ配信システム ffmpegでサムネイル生成（その７）

コメントを残す

メールアドレスが公開されることはありません。


2 × = 十四