videojs的播放flv格式RTMP流需要浏览器运行flash插件，但是chrome现在已经不支持flash了，所以我们使用flvjs前端插件作为替代方案，并在流媒体服务器上加入了权限验证功能限制用户访问。
此方案是基于上一节中的方案进行的优化，所以没有提及的地方和原方案保持不变。
一. 在nginx中安装nginx-http-flv-module插件
有编译好的版本直接使用就行，然后修改nginx.conf文件。
#user nobody;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
worker_processes 10;
events {
worker_connections 10240;
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;
rtmp{
out_queue 4096;
out_cork 8;
max_streams 128;
timeout 2s;
drop_idle_publisher 16s;
log_interval 5s;
log_size 1m;
server{
listen 1935;
server_name localhost;
application live{
live on;
gop_cache on;
on_play http://localhost:8080/ROOT/admin/monitor/monitorAuth; # 播放请求验证接口
}
application hls{
live on;
hls on;
hls_path E:/nginx/html/hls;
}
application dash{
live on;
dash on;
dash_path E:/nginx/html/dash;
}
}
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8002;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
location /live{
flv_live on;
chunked_transfer_encoding on;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
}
location /hls{
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root E:/nginx/html/hls;
add_header 'Cache-Control' 'no-cache';
}
location /dash {
root E:/nginx/html/dash;
add_header 'Cache-Control' 'no-cache';
}
location /stat {
#configuration of push & pull status
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root E:/nginx/nginx-http-flv-module;
}
location /control {
rtmp_control all; #configuration of control module of rtmp
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root E:/nginx/html;
}
}
}
路径配置
路径配置按个人需求来就行，nginx的权限验证可以看官方文档
二. 使用flvjs插件播放流
<html>
<meta charset="utf-8">
<title>单屏显示</title>
<script src="<%=basePath%>flvjs/flv.min.js"></script>
<body>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: 'http://localhost:8002/live?port=1935&app=live&stream=room&userName=admin&password=admin'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
</body>
</html>
