HTTP-FLV环境部署

创建保存文件的文件夹

1
2
3
4
mkdir /usr/local/nginx-flv
# 创建了一个安装目录
mkdir /home/flv-tools
# 存储所需软件

下载nginx

1
wget http://nginx.org/download/nginx-1.18.0.tar.gz

下载直播模块

1
wget https://github.com/winshining/nginx-http-flv-module

解压文件

1
2
tar 文件名
unzip 文件名

进入解压好的nginx下目录，并进行安装前的配置

1
2
3
4
cd nginx-1.18.0
./configure --prefix=/usr/local/nginx-flv --add-module=/home/flv-tools/nginx-http-flv-module-master
# --prefix: 配置安装路径
#--add-module: 添加安装插件

编译及安装

1
make && make install

配置文件修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
worker_processes  1;

rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;

rtmp{
	out_queue 4096;
	out_cork 8;
	max_streams 128;
	timeout 15s;
	drop_idle_publisher 15s;
	log_interval 5s;
	log_size 1m;
	server {
		listen 1935; # 推流端口
		server_name zege;
		
		application live {	# 配置推流地址
			live on; # 打开推流
			# gop_cache on;
			# rtmp://123.123.123.123:1935/live/test
		}
	}
}

events {
    worker_connections  1024;
}

配置文件http拉流部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
http {
	include       mime.types;
	default_type  application/octet-stream;
	sendfile        on;
	keepalive_timeout  65;
	server {
		listen       8080; # 拉流通过8080去拉流
		# http://123.123.123.123:8080/live/?port=1935&stream=test
		server_name  localhost;
		location /live {
			flv_live on;
			chunked_transfer_encoding  on;
			add_header 'Access-Control-Allow-Origin' '*';
			add_header 'Access-Control-Allow-Credentials' 'true';
		}
	}
}

关闭旧有服务

1
2
3
/usr/local/nginx-rtmp/sbin/nginx -s stop
/usr/local/nginx-rtmp/sbin/nginx -s reload
# 重启

开启新服务

1
/usr/local/nginx-flv/sbin/nginx -c /usr/local/nginx-flv/conf/nginx.conf

vue实现拉流

安装flv.js开源工具，进行拉流

1
cnpm install flv.js --save

导包

1
import flv from 'flv.js';

构建页面标签，播放标签

1
2
3
<video id="videoElement" controls muted>
  	Your browser is too old which doesn't support HTML5 video.
</video>

进行初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  mounted() {
    var videoElement = document.getElementById('videoElement');
    var flvPlayer = flv.createPlayer({
      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://39.105.79.238:8080/live?port=1935&app=live&stream=test'
      url: 'http://47.93.48.154:8080/live?port=1935&app=live&stream=test'
    })
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
}