ffmpeg、nginx、rtmp、web搭建视频直播点播流媒体服务器

水深无声 2023-07-12 09:19 47阅读 0赞

> 利用ffmpeg、nginx、rtmp、web搭建一个流媒体服务器，ffmpeg实现window上采集摄像头和麦克风视频声音并推送到nginx-rtmp服务器，web服务器端拉取nginx服务器端的rtmp视频流  
> 参考文章  
> [利用ffmpeg实现rtmp推流 - 简书][ffmpeg_rtmp_ -]

## 安装ffmpeg ##

*  window 安装ffmpeg  
    window 64位 下载地址

https://ffmpeg.zeranoe.com/builds/win64/static/

将ffmpeg/bin路径写入到环境变量path中，比如我的路径为`D:\softwareLocation\ffmpeg\ffmpeg-20190502-7eba264-win64-static\bin`

查看摄像头和麦克风设备

ffmpeg -list_devices true -f dshow -i dummy

如果设备名称有中文，会出现乱码，想看设备原名，可以去设备管理器中查看

> 检查摄像头和麦克风设备

ffplay -f dshow -i video="HD WebCam"

或者

ffplay -f vfwcap -i 0

## window 安装nginx ##

具体的下载安装参照博客[Nginx在windows下的安装、运行，以及配置文件讲解\_运维\_周末未至-CSDN博客][Nginx_windows_-CSDN]  
为了接收rtmp视频流，配置nginx-rtmp-module  
配置conf/nginx.conf

rtmp {  
        server {  
            listen 1935;      #监听的端口号
            application myapp {     #自定义的名字
                live on;  
           }  
            application hls {  
                live on;  
                hls on;  
                hls_path /tmp/hls;   
                hls_fragment 1s;
                hls_playlist_length 3s;  
           }  
        } 
    }

nginx.conf完整配置

#user  nobody;
    worker_processes  1;
    
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    
    #pid        logs/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    # rtmp视频流
    rtmp {  
        server {  
            listen 1935;      #监听的端口号
            application myapp {     #自定义的名字
                live on;  
           }  
            application hls {  
                live on;  
                hls on;  
                hls_path /tmp/hls;   
                hls_fragment 1s;
                hls_playlist_length 3s;  
           }  
        } 
    }
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        sendfile        on;
        #tcp_nopush     on;
    
        #keepalive_timeout  0;
        keepalive_timeout  65;
    
        #gzip  on;
    
        server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   html;
                index  index.html index.htm;
            }
    		
    		location /hls{
    			types{
    					 application/vnd.apple.mpegurl m3u8; 
    					 video/mp2t ts;
    			}
    			alias D:/output/;
    			expires -1;
    			add_header Cache-Control no-cache;
            }
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    }

> 注意：有些版本的nginx 启动后 会出现`unknown directive "rtmp"`错误，推荐使用集成了rtmp模块的nginx 1.7.11.3 Gryphon，下载地址`http://nginx-win.ecsds.eu/download/`

## 视频和麦克风本地推送 ##

ffmpeg -f dshow -i video="HD WebCam":audio="麦克风 (2- Realtek High Definition Audio)" -s 640x360 -vcodec libx264 -b:v 1000k   -ab 128k -f flv rtmp://localhost:1935/myapp

HD WebCam 本机摄像头名称  
麦克风 (2- Realtek High Definition Audio) 本机麦克风名称  
rtmp://localhost:1935/myapp 本地的推流地址 nginx-rtmp服务器

## 搭建云服务器端的nginx和rtmp ##

> 我部署的云服务是阿里云的ubuntu16.04，输入下列命令ubuntu16.04 安装nginx和Nginx-rtmp-module

sudo apt-get install software-properties-common python-software-properties
    sudo add-apt-repository ppa:nginx/stable
    sudo apt-get update
    sudo apt-get install nginx
    sudo apt-get install libnginx-mod-rtmp

配置/etc/nginx/nginx.conf

user www-data;
    worker_processes auto;
    pid /run/nginx.pid;
    include /etc/nginx/modules-enabled/*.conf;
    
    events {
    	worker_connections 768;
    	# multi_accept on;
    }
    
    rtmp {  
        server {  
            listen 1935;      #¼፽µĶ˿ں
            application myapp {     #ؔ¶¨ӥµŃ
                live on;  
           }  
            application hls {  
                live on;  
                hls on;  
                hls_path /tmp/hls;   
                hls_fragment 1s;
                hls_playlist_length 3s;  
           }  
        } 
    }
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
        #                  '$status $body_bytes_sent "$http_referer" '
        #                  '"$http_user_agent" "$http_x_forwarded_for"';
    
        #access_log  logs/access.log  main;
    
        sendfile        on;
        #tcp_nopush     on;
    
        #keepalive_timeout  0;
        keepalive_timeout  65;
    
        #gzip  on;
    
        server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   html;
                index  index.html index.htm;
            }
    		
    		location /hls{
    			types{
    					 application/vnd.apple.mpegurl m3u8; 
    					 video/mp2t ts;
    			}
    			alias /data/;
    			expires -1;
    			add_header Cache-Control no-cache;
            }
          }
    }

nginx启动

service nginx start
    
    service nginx restart
    
    service nginx reload
    
    service nginx stop

## 推送到云服务器nginx-rtmp ##

在windows命令行输入

ffmpeg -f dshow -i video="HD WebCam":audio="麦克风 (2- Realtek High Definition Audio)" -s 640x360 -vcodec libx264 -b:v 1000k   -ab 128k -f flv rtmp://118.178.195.62:1935/myapp

参数同ffmpeg本地推送的一致

## 搭建接收rtmp视频的web服务器 ##

快速搭建springboot，编写接收直播的网页

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Video.js 7</title>
    	<link href="css/video-js.min.css" rel="stylesheet">
    	<style>
    		body{background-color: #191919}
    		.m{ width: 640px; height: 264px; margin-left: auto; margin-right: auto; margin-top: 100px; }
    	</style>
    </head>
    
    <body>
    	<div class="m">
    		<video id="rtmpVideo" class="video-js" controls preload="auto" width="640" height="264" data-setup='{ "html5" : { "nativeTextTracks" : false } }'>
    		
    		  </video>
    		<script src="js/video.min.js"></script>
    		<script src="js/videojs-flash.min.js"></script>
    		  <script type="text/javascript">
    		   //设置中文
    		  videojs.addLanguage('zh-CN', {
    			  "Play": "播放",
    			  "Pause": "暂停",
    			  "Current Time": "当前时间",
    			  "Duration": "时长",
    			  "Remaining Time": "剩余时间",
    			  "Stream Type": "媒体流类型",
    			  "LIVE": "直播",
    			  "Loaded": "加载完毕",
    			  "Progress": "进度",
    			  "Fullscreen": "全屏",
    			  "Non-Fullscreen": "退出全屏",
    			  "Mute": "静音",
    			  "Unmute": "取消静音",
    			  "Playback Rate": "播放速度",
    			  "Subtitles": "字幕",
    			  "subtitles off": "关闭字幕",
    			  "Captions": "内嵌字幕",
    			  "captions off": "关闭内嵌字幕",
    			  "Chapters": "节目段落",
    			  "Close Modal Dialog": "关闭弹窗",
    			  "Descriptions": "描述",
    			  "descriptions off": "关闭描述",
    			  "Audio Track": "音轨",
    			  "You aborted the media playback": "视频播放被终止",
    			  "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
    			  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
    			  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
    			  "No compatible source was found for this media.": "无法找到此视频兼容的源。",
    			  "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
    			  "Play Video": "播放视频",
    			  "Close": "关闭",
    			  "Modal Window": "弹窗",
    			  "This is a modal window": "这是一个弹窗",
    			  "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
    			  ", opens captions settings dialog": ", 开启标题设置弹窗",
    			  ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
    			  ", opens descriptions settings dialog": ", 开启描述设置弹窗",
    			  ", selected": ", 选择",
    			  "captions settings": "字幕设定",
    			  "Audio Player": "音频播放器",
    			  "Video Player": "视频播放器",
    			  "Replay": "重播",
    			  "Progress Bar": "进度小节",
    			  "Volume Level": "音量",
    			  "subtitles settings": "字幕设定",
    			  "descriptions settings": "描述设定",
    			  "Text": "文字",
    			  "White": "白",
    			  "Black": "黑",
    			  "Red": "红",
    			  "Green": "绿",
    			  "Blue": "蓝",
    			  "Yellow": "黄",
    			  "Magenta": "紫红",
    			  "Cyan": "青",
    			  "Background": "背景",
    			  "Window": "视窗",
    			  "Transparent": "透明",
    			  "Semi-Transparent": "半透明",
    			  "Opaque": "不透明",
    			  "Font Size": "字体尺寸",
    			  "Text Edge Style": "字体边缘样式",
    			  "None": "无",
    			  "Raised": "浮雕",
    			  "Depressed": "压低",
    			  "Uniform": "均匀",
    			  "Dropshadow": "下阴影",
    			  "Font Family": "字体库",
    			  "Proportional Sans-Serif": "比例无细体",
    			  "Monospace Sans-Serif": "单间隔无细体",
    			  "Proportional Serif": "比例细体",
    			  "Monospace Serif": "单间隔细体",
    			  "Casual": "舒适",
    			  "Script": "手写体",
    			  "Small Caps": "小型大写字体",
    			  "Reset": "重启",
    			  "restore all settings to the default values": "恢复全部设定至预设值",
    			  "Done": "完成",
    			  "Caption Settings Dialog": "字幕设定视窗",
    			  "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
    			  "End of dialog window.": "结束对话视窗"
    			});
    
    		   videojs.options.flash.swf = 'js/video-js.swf';
    
    		   // 初始化视频，设为全局变量
    var myPlayer = videojs('rtmpVideo', {
        autoplay: true,
        controls: true,//控制条
      
        muted: true,// 静音
        preload: "auto",// 预加载
        language: "zh-CN",// 初始化语言
        playbackRates: [1, 2, 3, 4, 5, 8, 10, 20],// 播放速度
    	 'techOrder': ['flash'],
              
                sources: [{
                        /*rtmp://live.hkstv.hk.lxdns.com/live/hks*/
                    src: 'rtmp://118.178.195.62:1935/myapp/',
                    type: 'rtmp/flv'
                }]
    }, function () {
        console.log("--------------成功初始化视频--------------");
        myPlayer.one("playing", function () {         // 监听播放
            console.log("开始播放");
        });
        myPlayer.one("error", function (error) {      // 监听错误
            console.error("监听到异常，错误信息：%o",error);
        });
    });
    		</script>
    	</div>
    
    </body>
    </html>

[ffmpeg_rtmp_ -]: https://www.jianshu.com/p/c141fc7881e7
[Nginx_windows_-CSDN]: https://blog.csdn.net/zorro_jin/article/details/84927408