搭建视频直播平台 nginx rtmp obs 网页播放器
搭建视频直播平台
nginx搭建RMTP服务器
这条命令的作用是添加一个新的 tap（第三方软件仓库）到 Homebrew 的源列表中。（可能需要FQ）
brew tap denji/homebrew-nginx
安装nginx
brew install nginx-full --with-rtmp-module
查看nginx安装到哪里
brew info nginx-full
如果安装成功，可以输入
nginx -v
-->
nginx version: nginx/1.27.0
nginx -t
-->
nginx: the configuration file /usr/local/etc/nginx/nginx.conf syntax is ok
nginx: configuration file /usr/local/etc/nginx/nginx.conf test is successful
打开浏览器输入：http://localhost:8080/ 表示可以正常使用
配置文件，配置RTMP服务器
rtmp {
server {
listen 1935;
#直播流配置
application rtmplive {
live on;
#为 rtmp 引擎设置最大连接数。默认为 off
max_connections 1024;
}
application hls{
live on;
hls on;
hls_path /usr/local/var/www/hls;
hls_fragment 1s;
}
}
}
nginx -s reload
nginx -s stop
推流
OBS软件推流
推流配置：
rtmp://localhost:1935/rtmplive/stream_key
接收：（可以用视频播放器接收）
rtmp://localhost:1935/rtmplive/stream_key
推流配置：
rtmp://localhost:1935/hls/stream_key
接收：
网页播放器中，用http协议hls接收直播视频，需要配置nginx转发 http://localhost:1935/hls/stream_key.m3u8
server {
listen 8082;
server_name localhost;
# 配置 HLS 播放位置
location /hls {
# 跨域
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /usr/local/var/www/; # 这个地址要和hls直播推流的地址一致
add_header Cache-Control no-cache;
}
}
最后http的hls地址如下：http://localhost:1935/hls/stream_key.m3u8，在网页播放器中使用
ffmpeg推流
FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序
ffmpeg -version
----------------------------------------------------------------
ffmpeg version 7.1 Copyright (c) 2000-2024 the FFmpeg developers
网页搭建播放器
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HLS Stream Player</title>
<style>
/* 简单的样式，使视频播放器居中并适应屏幕大小 */
#video-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
}
video {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div id="video-container">
<!-- 视频标签将用于播放HLS流 -->
<video id="video-player" controls></video>
</div>
<!-- 引入hls.js库 -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
// 当页面加载完成后，初始化hls.js播放器
window.onload = function() {
var video = document.getElementById('video-player');
var videoSrc = 'http://localhost:8082/hls/stream_key.m3u8'; // 替换为你的HLS流URL
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
// 对于原生支持HLS的浏览器（如Safari和一些移动浏览器）
video.src = videoSrc;
video.addEventListener('loadedmetadata', function() {
video.play();
});
} else {
// 浏览器不支持HLS
console.error('Your browser does not support HLS.');
}
};
</script>
</body>
</html>
