使用flowplayer在html中嵌入实时RTMP流(nginx-rtmp-module)

时间:2018-02-05 01:23:18

标签: html nginx live rtmp flowplayer

我有一个带有rtmp-module的nginx服务器。我使用ffmpeg从rtsp转码到rtmp。我可以使用VLC查看直播,但我无法将视频嵌入到html中。这是我的nginx.conf:

worker_processes  1;
 events {
    worker_connections  1024;
 }
 # HTTP server
 http {
    include       mime.types;
    default_type application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        # path to HLS application service
           location /media_server {
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /usr/local/nginx-streaming/html;
            add_header Cache-Control no-cache;
        }
        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
 }
 # RTMP media server
 rtmp {
    server {
        listen 1935;
        chunk_size 4000;
        # Transcoding (ffmpeg needed)
        application media_server {
            live on;
            hls on;
            hls_path /usr/local/nginx-streaming/html/media_server;
            hls_nested on;
            hls_variant _low  BANDWIDTH=640000;
            hls_variant _hi  BANDWIDTH=2140000;
            # ffmpeg static execution
            exec_static /usr/bin/ffmpeg -rtsp_transport tcp -i rtsp://myipaddress:554 -framerate 6 -video_size 1280x720 -vcodec libx264 -preset veryfast -maxrate 6144k -bufsize 3968k -pix_fmt yuv420p -g 60 -c:a aac -b:a 128k -ar 44100 -f flv rtmp://localhost/media_server/test;
        }
    }
 }

这是我的HTML:

<!DOCTYPE html>
<html><head>
    <title></title>
    <meta charset="utf-8">

    <!-- for video tag based installs flowplayer depends on jQuery 1.7.2+ -->
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

    <!--
        include flowplayer JavaScript file that does
        Flash embedding and provides the Flowplayer API.
    -->
    <script type="text/javascript" src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script>

</head>
<body>
    <!-- widescreen container, 1280x720 (clip dimensions) * 1.15, center splash -->
    <div id="theplayer" style="width:512px;height:288px;margin:0 auto;text-align:center"><object id="theplayer_api" name="theplayer_api" data="http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf" type="application/x-shockwave-flash" width="100%" height="100%"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="quality" value="high"><param name="bgcolor" value="#000000"><param name="flashvars" value="config={&quot;clip&quot;:{&quot;url&quot;:&quot;test&quot;,&quot;live&quot;:true,&quot;scaling&quot;:&quot;fit&quot;,&quot;provider&quot;:&quot;rtmp&quot;},&quot;plugins&quot;:{&quot;rtmp&quot;:{&quot;url&quot;:&quot;http://releases.flowplayer.org/swf/flowplayer.rtmp-3.2.13.swf&quot;,&quot;netConnectionUrl&quot;:&quot;rtmp://localhost:1935/media_server/telesanremo&quot;},&quot;controls&quot;:{&quot;url&quot;:&quot;http://releases.flowplayer.org/swf/flowplayer.controls-3.2.16.swf&quot;}},&quot;playerId&quot;:&quot;theplayer&quot;,&quot;playlist&quot;:[{&quot;url&quot;:&quot;test&quot;,&quot;live&quot;:true,&quot;scaling&quot;:&quot;fit&quot;,&quot;provider&quot;:&quot;rtmp&quot;}]}"></object></div>

<script type="text/javascript">
    $f("theplayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {

    clip: {
        url: 'test', 
        live: 'true', 
        provider: 'rtmp' 
    },
    plugins: {
        rtmp: {
            url: 'flowplayer.rtmp-3.2.13.swf', 
            netConnectionUrl: 'rtmp://localhost:1935/media_server'
        } 
    } 
    });
</script>


</body></html>

我得到的错误是:

  

201:无法加载流或剪辑文件连接失败

我做错了什么?

0 个答案:

没有答案