项目简介：视频直播网站由三个部分构成：1.推流端 2.服务器 3.拉流端。在该项目中，推流端用OBS完成，服务器由NGINX+RTMP模块完成，拉流端使用video.js完成。
一、开发环境：
- 推流端：系统：UBUNTU 16.04 工具：obs
- 服务器：系统: UBUNTU 16.04 工具：NGINX+RTMP
- 拉流端：系统：WINDOWS 10 工具：H5
二、 构建服务器
服务器由NGINX+RTMP构成。NGINX是HTTP服务器，RTMP是附加模块。
其中NGINX我选择的是用源码编译方式进行安装，因为这种方式可以自定义安装指定的模块以及最新版本。
首先配置各项依赖库。
下载 nginx 1.7.11.3 Gryphon
下载链接: http://nginx-win.ecsds.eu/download/nginx 1.7.11.3 Gryphon.zip
下载完成后解压；
将解压后的目录名:
nginx 1.7.11.3 Gryphon
改成:
nginx-1.7.11.3-Gryphon
三、 下载服务器状态检查程序 stat.xsl
https://github.com/arut/nginx-rtmp-module/
将nginx-rtmp-module-master.zip解压后复制到目录:nginx-1.7.11.3-Gryphon下，
保证stat.xls的目录为:
nginx-1.7.11.3-Gryphon\nginx-rtmp-module\stat.xsl(注意地址必须为nginx-rtmp-module)
四、 配置文件 conf\nginx-win-rtmp.conf 内容如下:
#user nobody;
# multiple workers works !
worker_processes 2;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 8192;
# max value 32768, nginx recycling connections+registry optimization =
# this.value * 20 = max concurrent connections currently tested with one worker
# C1000K should be possible depending there is enough ram/cpu power
# multi_accept on;
}
rtmp {
server {
listen 1935;
chunk_size 4000;
application live {
live on;
}
}
}
http {
#include /nginx/conf/naxsi_core.rules;
include mime.types;
default_type application/octet-stream;
#log_format main 'remoteaddr:remote_port - remoteuser[time_local] "request" ' # 'status bodybytessent"http_referer" '
# '"httpuseragent""http_x_forwarded_for"';
#access_log logs/access.log main;
# # loadbalancing PHP
# upstream myLoadBalancer {
# server 127.0.0.1:9001 weight=1 fail_timeout=5;
# server 127.0.0.1:9002 weight=1 fail_timeout=5;
# server 127.0.0.1:9003 weight=1 fail_timeout=5;
# server 127.0.0.1:9004 weight=1 fail_timeout=5;
# server 127.0.0.1:9005 weight=1 fail_timeout=5;
# server 127.0.0.1:9006 weight=1 fail_timeout=5;
# server 127.0.0.1:9007 weight=1 fail_timeout=5;
# server 127.0.0.1:9008 weight=1 fail_timeout=5;
# server 127.0.0.1:9009 weight=1 fail_timeout=5;
# server 127.0.0.1:9010 weight=1 fail_timeout=5;
# least_conn;
# }
sendfile off;
#tcp_nopush on;
server_names_hash_bucket_size 128;
## Start: Timeouts ##
client_body_timeout 10;
client_header_timeout 10;
keepalive_timeout 30;
send_timeout 10;
keepalive_requests 10;
## End: Timeouts ##
#gzip on;
server {
listen 80;
server_name localhost;
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root nginx-rtmp-module/;
}
location /control {
rtmp_control all;
}
#charset koi8-r;
#access_log logs/host.access.log main;
## Caching Static Files, put before first location
#location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
# expires 14d;
# add_header Vary Accept-Encoding;
#}
# For Naxsi remove the single # line for learn mode, or the ## lines for full WAF mode
location / {
#include /nginx/conf/mysite.rules; # see also http block naxsi include line
##SecRulesEnabled;
##DeniedUrl "/RequestDenied";
##CheckRule "SQL >= 8" BLOCK; ##CheckRule "RFI >= 8" BLOCK;
##CheckRule "TRAVERSAL >= 4" BLOCK; ##CheckRule "XSS >= 8" BLOCK;
root html;
index index.html index.htm;
}
# For Naxsi remove the ## lines for full WAF mode, redirect location block used by naxsi
##location /RequestDenied {
## return 412;
##}
## Lua examples !
# location /robots.txt {
# rewrite_by_lua '
# if ngx.var.http_host ~= "localhost" then
# return ngx.exec("/robots_disallow.txt");
# end
# ';
# }
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000; # single backend process
# fastcgi_pass myLoadBalancer; # or multiple, see example above
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME documentrootfastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl spdy;
# server_name localhost;
# ssl on;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_timeout 5m;
# ssl_prefer_server_ciphers On;
# ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
# ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:ECDH+3DES:RSA+AESGCM:RSA+AES:RSA+3DES:!aNULL:!eNULL:!MD5:!DSS:!EXP:!ADH:!LOW:!MEDIUM;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
五、 启动服务器
进入windows的cmd;
cd nginx-1.7.11.3-Gryphon
nginx.exe -c conf\nginx-win-rtmp.conf
六、安装OBS视频推送流
七、OBS设置直播源
八、设置OBS来源
九、H5实现web端视频流
<!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="800" height="600" 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: [{
src: 'rtmp://127.0.0.1/live/kalista',
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>
十、推送流正常查看
十一、下载实例安装包和相关代码
