上海动漫音乐分享社区

FFmpeg推流到Nginx并使用播放器播放

FreeSWITCH中文社区2019-06-13 23:45:00

如今直播很火,下面就简单分享下我是如何直播的。必备工具:FFmpeg,Nginx,还有一个播放器。之前在实例解析中分享过如何用FreeSWITCH来做直 播,这次分享下如何用FFmpeg配合Nginx做直播。

首先更改Nginx(ngin v1.10.1)的配置,之前的文章讲过了如何在Nginx中添加RTMP的模块。先修改/etc/nginx/nginx.conf

Nginx 配置

修改nginx.conf 如下:

worker_processes  4;

error_log  logs/error.log;
pid        logs/nginx.pid; events {    worker_connections  1024; } rtmp {      server {          listen 1935;          chunk_size 4000;                  application hls {              live on;            hls on;            hls_fragment 5s;            hls_path /usr/local/nginx/html/hls;            record off;        }      }   } http {    include       mime.types;    default_type  application/octet-stream;    sendfile        on;        keepalive_timeout  65;        server {        listen       80;        server_name  localhost;        index  index.html index.htm;        root html;              location /hls {        types {        application/vnd.apple.mpegurl m3u8;        video/mp2t ts;        }                    root   html;        add_header Cache-Control no-cache;        expires -1;                    }        error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;        }    } }

nginx -t 检查下没有错误就可以了。如下:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

推流

重点来了,我们刚才是把视频流保存到本地。现在要推到Nginx的服务器上去。mac上首先使用brew install ffmpeg安装FFmpeg。版本为ffmpeg version 3.3.4

ffmpeg -re -i /date/test.mp4 -vcodec copy -acodec copy -f flv rtmp://192.168.3.107:1935/hls/1 //首先推个视频试一下,看看好用不


ffmpeg -f avfoundation -framerate 15 -video_size 1280x720 -i "0:2" -vcodec libx264 -preset ultrafast -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.3.162:1935/hls/1   //一本正经的推流

当看到你的摄像头灯亮了,你就成功了一半。

用VLC播放试一下。可以的话,就进行下一步。

播放器

我使用了一个免费播放器ckplayer:(http://www.ckplayer.com/)

官网有很详细的帮助文档。

git clone https://gitee.com/niandeng/ckplayerX.git
cd ckplayerX/
unzip ckplayer.zip cd /usr/local/nginx/html/
cp -R /home/ckplayerX/* .

修改index.html文件

<!DOCTYPE html><html>

    <head>
        <meta charset="UTF-8">
        <title>ckplayer</title>
        <script type="text/javascript" src="ckplayer/ckplayer.js" charset="UTF-8"></script>
        <style type="text/css">
            body {                margin: 0;                padding: 0px;                font-family: "Microsoft YaHei", YaHei, "微软雅黑", SimHei, "黑体";                font-size: 14px
            }        </style>

    </head>

    <body>
        <div id="video" style="width: 600px; height: 400px;"></div>
        <script type="text/javascript">
            var videoObject = {                //playerID:'ckplayer01',
                container: '#video', 
                variable: 'player', 
                loaded: 'loadedHandler', 
                loop: true, 
                autoplay: true, 
                //duration: 500, 
                cktrack: 'material/srt.srt', 
                poster: 'material/poster.jpg', 
                preview: { 
                    file: ['material/mydream_en1800_1010_01.png', 'material/mydream_en1800_1010_02.png'],
                    scale: 2
                },
                config: '', 
                debug: true, 
                flashplayer: true, 
                drag: 'start', 
                seek: 0, 
                //playbackrate:1,
                mobileCkControls:true,
                live:true,
                video: [
                    ['http://192.168.3.107/hls/1.m3u8', 'video/m3u8', '中文标清', 0],
                ]  //这里改成你自己m3u8的地址
            };            var player = new ckplayer(videoObject);            function loadedHandler() {
                player.addListener('error', errorHandler); 
                
            }            function errorHandler() {                console.log('出错')
                changeText('.playerstate', '状态:视频加载错误,停止执行其它动作,等待其它操作');
            }            function endedHandler() {
                changeText('.endedstate', '播放结束');
            }        </script>
    
    </body></html>

这样打开浏览器输入地址后就可以看到直播的视频了。

© 2017 Gogs 当前版本: 0.11.19.0609 页面