ubuntu搭建nginx+flv.js视频流显示框架

最新推荐文章于 2024-08-03 23:27:26 发布

BGM不迷路

最新推荐文章于 2024-08-03 23:27:26 发布

阅读量968

点赞数

文章标签： nginx ubuntu 服务器

本文链接：https://blog.csdn.net/u013378687/article/details/126885982

版权

记录下nginx+flv.js视频流显示框架搭建过程。

1、安装

从github下载nginx(nginx-1.21.6 )，及其nginx-http-flv-module-master

依次执行：

cd nginx-1.21.6；

./configure --add-module=/home/lw/WORK_I3399/nginx-http-flv-module-master；

make;sudo make install

注意：--add-modules要使用绝对路径。

建立软连接方便使用。

ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx;

2、nginx配置

参考：Ubuntu搭建基于nginx-http-flv-module的流媒体服务_flyawayl的博客-CSDN博客

#user nobody;
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;
}

rtmp {
server {
listen 1935;
chunk_size 4096;

# live on
application live {
live on;
record off;
gop_cache off;
#hls on; #这个参数把直播服务器改造成实时回放服务器。
#wait_key on; #对视频切片进行保护，这样就不会产生马赛克了。
#hls_path ./sbin/html; #切片视频文件存放位置。
#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;

#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 8081;
server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location /flv {
flv_live on;
chunked_transfer_encoding on;
}

location /hls {
types{
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias /test;
expires -1;
}

location / {
root /mnt/hgfs/AcCam_WORK/05_Demo/www/;
index index.html index.htm;
}

location /live {
flv_live on;
chunked_transfer_encoding on;
# 支持跨域的配置
   add_header 'Access-Control-Allow-Origin' '*';
   # 请求允许发送cookie
   add_header 'Access-Control-Allow-Credentials' 'true';
}



   location /cgi-bin/databaseManage{
   #配置fastcgi模块
   fastcgi_pass 127.0.0.1:9009;
   fastcgi_index databaseManage.exe;
   include fastcgi.conf;
   }
}

}

便前端可以使用flv.js播放视频流了

<script>

function start() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://192.168.137.129:8081/flv?port=1935&app=live&stream=test'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
}

document.addEventListener('DOMContentLoaded', function () {
start();
});

</script>