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

Seven Du

发布于 2020-12-21 16:18:03

1.8K0

发布于 2020-12-21 16:18:03

文章被收录于专栏：FreeSWITCH中文社区FreeSWITCH中文社区

如今直播很火，下面就简单分享下我是如何直播的。必备工具：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>

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-03-09，如有侵权请联系 cloudcommunity@tencent.com 删除

云直播