环境/工具：
OBS(Windows PC)
VPS(BT)
nginx 1.18.0
nginx-http-flv
PHP
flv.js
首先在本地PC(配置好公网IP)或VPS上安装nginx以及nginx-http-flv插件，安装过程不再赘述。
修改nginx.conf文件：
user www www;
worker_processes auto;
error_log /www/wwwlogs/nginx_error.log crit;
pid /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;
stream {
log_format tcp_format '$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time';
access_log /www/wwwlogs/tcp-access.log tcp_format;
error_log /www/wwwlogs/tcp-error.log;
include /www/server/panel/vhost/nginx/tcp/*.conf;
}
events
{
use epoll;
worker_connections 1024;
multi_accept on;
}
# RTMP推流核心配置
rtmp {
server {
listen 1935; # RTMP默认端口
chunk_size 4096; # 数据块大小
application live { # 推流应用名称（OBS推流地址会用到）
live on; # 启用直播模式
record off; # 关闭录制
}
}
}
http
{
include mime.types;
#include luawaf.conf;
include proxy.conf;
lua_package_path "/www/server/nginx/lib/lua/?.lua;;";
default_type application/octet-stream;
server_names_hash_bucket_size 512;
client_header_buffer_size 32k;
large_client_header_buffers 4 32k;
client_max_body_size 50m;
sendfile on;
tcp_nopush on;
# 跨域配置（解决浏览器拉流问题）
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
keepalive_timeout 60;
tcp_nodelay on;
fastcgi_connect_timeout 300;
fastcgi_send_timeout 300;
fastcgi_read_timeout 300;
fastcgi_buffer_size 64k;
fastcgi_buffers 4 64k;
fastcgi_busy_buffers_size 128k;
fastcgi_temp_file_write_size 256k;
fastcgi_intercept_errors on;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/json image/jpeg image/gif image/png font/ttf font/otf image/svg+xml application/xml+rss text/x-js;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]\.";
limit_conn_zone $binary_remote_addr zone=perip:10m;
limit_conn_zone $server_name zone=perserver:10m;
server_tokens off;
access_log off;
server
{
listen 888;
server_name phpmyadmin;
index index.html index.htm index.php;
root /www/server/phpmyadmin;
location ~ /tmp/
{
return 403;
}
#error_page 404 /404.html;
include enable-php.conf;
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
}
location ~ .*\.(js|css)?$
{
expires 12h;
}
location ~ /\.
{
deny all;
}
listen 80; # HTTP访问端口
# HTTP-FLV拉流配置
location /flv
{
flv_live on; # 启用FLV直播流
chunked_transfer_encoding on; # 支持分块传输
add_header 'Access-Control-Allow-Origin' '*'; # 局部跨域配置
}
access_log /www/wwwlogs/access.log;
}
include /www/server/panel/vhost/nginx/*.conf;
}
主要是添加rtmp模块，以及在server模块上进行修改。启动（重载）nginx。
在OBS设置->直播->服务器输入rtmp://YOUR_IP:1935/live，其中1935是默认端口，live是应用名，推流码是test。进行相应设置后启动直播，就会开始推流。我们获得到的http地址为http://YOUR_IP/flv?app=live&stream=test
在VLC或Potplayer播放器中对该地址拉流可检测是否正常。
接下来，在网页配置flv.js，在url一行输入你获得的http地址。注意将文件夹中的flv.js移动到与index.php同一目录。
index.php
<!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="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: true, //关闭音频
hasVideo: true,
// cors: true,
stashInitialSize: 128,
enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
// url: 'http://192.168.2.234/flv/323223618780001'
url:'' //输入你的http地址
});
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>
效果演示（评论功能是后加的）：
