obs+nginx-flv+flv实现http-flv在页面播放
obs+nginx-flv+flv实现http-flv
-
-
- 下载 [obs studio ](https://obsproject.com/)
- 下载 nginx+ rtmp-flv-module
- 修改conf
- 进入nginx文件夹进入控制面板
- 5.obs进行推流
- 6.通过flv.js 将视频导入
-
-
下载 obs studio
-
下载 nginx+ rtmp-flv-module
可直接百度解析版nginx+ rtmp-flv-module
也可下载未解析版，对rtmp-flv-module进行编译windows编译
-
修改conf
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;
}
#pull rtmp://58.200.131.2:1935/livetv/hunantv;
#rtmp_auto_push on;
#rtmp_auto_push_reconnect 1s;
#rtmp_socket_dir /tmp;
//rtmp 模块配置
rtmp {
out_queue 4096;
out_cork 8;
max_streams 128;
timeout 10s;
server {
listen 1935; //obs推流端口
application live {
live on;
#wait_key on;
#interleave off;
}
ping 10s;
application hls {
#gop_cache off; #open GOP cache for reducing the wating time for the first picture of video
gop_cache off;
live on;
hls on;
meta copy; #�Ƿ���ֱ����Ԫ������Ϣ
session_relay on; #�Ựת��ģʽ
drop_idle_publisher 10s; #10sû���������Զ��Ͽ�ֱ����
interleave off;
wait_key on;
hls_fragment 2s;
hls_playlist_length 10s;
hls_nested on;
#on_publish http://127.0.0.1:8089/api/publish;
#on_done http://127.0.0.1:8089/api/done;
#on_play http://127.0.0.1:8089/api/play;
#on_record_done http://127.0.0.1:8089/api/recordDone;
recorder chunked
{
#record_append on; #��ֱ����¼����ģʽ
record all;
#record_max_size 5120K;
record_interval 60m;
#record_unique on;
record_path www/record;
record_suffix _%Y-%m-%d-%H-%M-%S.flv;
}
}
}
}
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 8080; //设置得ip端口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
}
location /live {
flv_live on;
chunked_transfer_encoding off; #open 'Transfer-Encoding: chunked' response
add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
add_header 'Cache-Control' 'no-cache';
}
location /flv {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Range';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
return 204;
}
add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Range';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
alias www/yamdi_record;
autoindex on;
}
location /image {
add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Range";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
alias www/image;
autoindex on;
}
location /urecord {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Range';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
return 204;
}
add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
alias www/urecord;
autoindex on;
}
}
server {
listen 8089;//设置得nginx本地端口
server_name 127.0.0.1;
location / {
proxy_set_header Host $host;
proxy_set_header Remote_Addr $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_connect_timeout 1;
add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
}
}
-
进入nginx文件夹进入控制面板
nginx.exe -t 如下显示正常 D:\Nginx>nginx.exe -t nginx: the configuration file D:\Nginx/confinx.conf syntax is ok nginx: configuration file D:\Nginx/confinx.conf test is successful D:\Nginx>启动服务器
start nginx
访问一下配置的nginx端口，看看是否开启
localhost:8089
5.obs进行推流
推流地址有两种
一种本地服务器推流地址
//1935为配置文件配置的rtmp推流端口
//live配置文件，配置的app名称
软件推流
rtmp ://localhost:1935/live
软件拉流
rtmp ://localhost:1935/live
一种http-flv地址
//本地ip地址
//live为配置文件配置的app，名称
推流
rtmp://192.168.0.10/live/
//stream=test为推流密匙
//8080为本地ip端口，配置文件有设置
http://192.168.0.10:8080/live?port=1935&app=live&stream=test
这个就是获取到得http-flv视频流
注：推rtmp后 ,ip流跟rtmp流都是可以通过拉流获取到得
6.通过flv.js 将视频导入
http://192.168.0.10:8080/live?port=1935&app=live&stream=test
这个就是获取到得http-flv视频流
flv.js可直接进入文件夹通过 进行下载
npm i flv.js
flv.js 也可通过 cdn直接引入
以下是通过flv.js将http-flv视频导入页面代码
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 576px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 10px;
}
.logcatBox {
border-color: #CCCCCC;
font-size: 11px;
font-family: Menlo, Consolas, monospace;
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
</style>
<!-- <link rel="stylesheet" href="/flv.js/demo/demo.css"> -->
</head>
<body>
<div class="mainContainer">
<!-- atuopaly-->
<video name="videoElement" class="centeredVideo" id="videoElement" controls width="1024" height="576" muted>
Your browser is too old which doesn't support HTML5 video.
</video>
</div>
<!--<script src="./flv.js?v=2"></script>-->
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.js"></script>
<script>
if (flvjs.isSupported()) {
startVideo()
}
function startVideo(){
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
// enableConstVideoViewSize: true,
// enableDurationMonitor: true, // true表示监测当前直播流延时，当发现延时过大时，主动追赶
// enableVideoFrozenMonitor: true, // 监测视频解码是否停滞（画面卡停），当因为某些原因导致无法解码时，将上报VIDEO_FROZEN事件，收到后建议重拉流
// videoStateMonitorInterval: 5000,
// maxDurationGap: 2,
// decreaseDurationStep: 0.4,
// frozenTimesThreshold: 5,
type: 'flv',
enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
isLive: true, //直播模式
hasAudio: false, //关闭音频
hasVideo: true,
// cors: true,
stashInitialSize: 128,
enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
// url: 'http://192.168.2.234/flv/323223618780001'
url:'http://192.168.0.10:8080/live?port=1935&app=live&stream=test'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
videoElement.addEventListener('click', function(){
alert( '是否支持点播视频：' + flvjs.getFeatureList().mseFlvPlayback + ' 是否支持httpflv直播流：' + flvjs.getFeatureList().mseLiveFlvPlayback )
})
function destoryVideo(){
flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer = null;
}
function reloadVideo(){
destoryVideo()
startVideo()
}
</script>
</body>
</html>