准备工作
NGINX下载地址
Rtmp扩展下载地址
下载完进行解压
nginx点播设置
worker_processes 1;
events {
worker_connections 1024;
}
##################RTMP服务#################
rtmp {
server {
listen 1935; #//服务端口
chunk_size 4096; #//数据传输块的大小
application video {
play /usr/local/data/video; #//视频文件存放位置，访问方式rtmp://localhost:1935/video
#如视频路径存有视频welcome.mp4访问路径即为rtmp://localhost:1935/video/welcome.mp4
}
}
}
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;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
nginx直播设置
worker_processes 1;
events {
worker_connections 1024;
}
##################RTMP服务#################
rtmp {
server {
listen 1935;
chunk_size 4096;
application video {
play /usr/local/data/video;
}
application live{
#第一处添加的直播字段
live on;
}
}
}
####启动浏览器查看http://localhost:80/stat
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location /stat {
#第二处添加的location字段。
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
#第二处添加的location字段。
root /usr/local/nginx/nginx-rtmp-module/;
}
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
nginx 直播回放配置
worker_processes 1;
events {
worker_connections 1024;
}
##################RTMP服务#################
rtmp {
server {
listen 1935;
chunk_size 4096;
application video {
play /usr/local/data/video;
}
application live {
live on;#直播模式
hls on; #这个参数把直播服务器改造成实时回放服务器。
wait_key on; #对视频切片进行保护，这样就不会产生马赛克了。
hls_path /usr/local/data/hls; #切片视频文件存放位置。
hls_fragment 10s; #每个视频切片的时长。
hls_playlist_length 60s; #总共可以回看的事件，这里设置的是1分钟。
hls_continuous on; #连续模式。
hls_cleanup on; #对多余的切片进行删除。
hls_nested on; #嵌套模式。
}
}
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root /usr/local/nginx/nginx-rtmp-module/;
}
location /live {
#这里也是需要添加的字段。
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias /opt/video/hls;
expires -1;
add_header Cache-Control no-cache;
}
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
启动nginx rtmp服务
nginx.exe -c conf\nginx-win-rtmp.conf
都弄完了之后安装OBS
安装obs
百度也可以查到OBS的官网进行下载，但是慢
OBS的github下载地址
默认就是中文版的，不要瞎找，自己按需下载
安装之后的设置
服务器地址照着我的写就行，直播秘钥对应的是拉流地址，
拉流地址等于 服务器地址+秘钥
需要在输出里面设置模式为高级，不然会推流不成功
最后进行推流
点击开始推流，，成功推流
拉流
播放器的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>测试rtmp直播源</title>
<script src="http://vjs.zencdn.net/5.5.3/video.js"></script>
<link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
</head>
<body>
<div class="openFlashTips" style="width:300px;position:absolute;top:20px;left:225px;z-Index:9999;color:white">
视频无法正常播放，请点击下方启用flash</div>
<video id="my-video" style="color:black;width:750px;height:350px" class="video-js" autoplay controls preload="auto"
width="750" height="350" data-setup="{}">
<source src='rtmp://127.0.0.1:1935/live/test' type='rtmp/flv' />
</video>
<embed width="300" height="70" class="openFlash" style="position:absolute;top:130px;left:225px;z-Index:9999;"
type="application/x-shockwave-flash">
<script type="text/javascript" language="JavaScript">
function flashChecker() {
var hasFlash = 0; //是否安装了flash
var flashVersion = 0; //flash版本
var isIE = /*@cc_on!@*/ 0; //是否IE浏览器
if (isIE) {
var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (swf) {
hasFlash = 1;
VSwf = swf.GetVariable("$version");
flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
}
} else {
if (navigator.plugins && navigator.plugins.length > 0) {
var swf = navigator.plugins["Shockwave Flash"];
if (swf) {
hasFlash = 1;
var words = swf.description.split(" ");
for (var i = 0; i < words.length; ++i) {
if (isNaN(parseInt(words[i]))) continue;
flashVersion = parseInt(words[i]);
}
}
}
}
return {
f: hasFlash,
v: flashVersion
};
}
var fls = flashChecker();
var s = "";
if (fls.f) {
document.getElementsByClassName("openFlash")[0].style.display = "none";
document.getElementsByClassName("openFlashTips")[0].style.display = "none";
// document.write("您安装了flash,当前flash版本为: " + fls.v + ".x");
} else {
document.getElementsByClassName("openFlash")[0].style.display = "block";
document.getElementsByClassName("openFlashTips")[0].style.display = "block";
// document.write("您没有安装flash");
}
</script>
</body>
</html>
最终效果
