因为angie 已经内置了不少方便的模块（包含了vod 模块），vod 对于视频的处理是一个很常用的模块（m3u8 播放）主要进行下测试
环境准备
基于docker-compose 部署，核心是配置
- vod 配置
主要包含了核心配置以及特定协议支持配置angie 为了与nginx 不一样，使用了不同的名称 - angie.conf
# package: angie-module-auth-jwt
#load_module modules/ngx_http_auth_jwt_module.so;
# package: angie-module-auth-spnego
#load_module modules/ngx_http_auth_spnego_module.so;
# package: angie-module-brotli
#load_module modules/ngx_http_brotli_filter_module.so;
#load_module modules/ngx_http_brotli_static_module.so;
# package: angie-module-cache-purge
#load_module modules/ngx_http_cache_purge_module.so;
# package: angie-module-dav-ext
#load_module modules/ngx_http_dav_ext_module.so;
# package: angie-module-echo
#load_module modules/ngx_http_echo_module.so;
# package: angie-module-enhanced-memcached
#load_module modules/ngx_http_enhanced_memcached_module.so;
# package: angie-module-eval
#load_module modules/ngx_http_eval_module.so;
# package: angie-module-geoip2
#load_module modules/ngx_http_geoip2_module.so;
#load_module modules/ngx_stream_geoip2_module.so;
# package: angie-module-headers-more
#load_module modules/ngx_http_headers_more_filter_module.so;
# package: angie-module-image-filter
#load_module modules/ngx_http_image_filter_module.so;
# package: angie-module-keyval
#load_module modules/ngx_http_keyval_module.so;
# package: angie-module-lua
#load_module modules/ngx_http_lua_module.so;
#load_module modules/ngx_stream_lua_module.so;
# package: angie-module-ndk
#load_module modules/ndk_http_module.so;
# package: angie-module-njs
#load_module modules/ngx_http_js_module.so;
#load_module modules/ngx_stream_js_module.so;
# package: angie-module-perl
#load_module modules/ngx_http_perl_module.so;
# package: angie-module-redis2
#load_module modules/ngx_http_redis2_module.so;
# package: angie-module-rtmp
#load_module modules/ngx_rtmp_module.so;
# package: angie-module-set-misc
#load_module modules/ngx_http_set_misc_module.so;
# package: angie-module-subs
#load_module modules/ngx_http_subs_filter_module.so;
# package: angie-module-upload
#load_module modules/ngx_http_upload_module.so;
# package: angie-module-vod
load_module modules/ngx_http_vod_module.so;
# package: angie-module-xslt
#load_module modules/ngx_http_xslt_filter_module.so;
user angie;
worker_processes auto;
worker_rlimit_nofile 65536;
error_log /var/log/angie/error.log notice;
events {
worker_connections 65536;
}
http {
include /etc/angie/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"';
log_format extended '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" rt="$request_time" '
'"$http_user_agent" "$http_x_forwarded_for" '
'h="$host" sn="$server_name" ru="$request_uri" u="$uri" '
'ucs="$upstream_cache_status" ua="$upstream_addr" us="$upstream_status" '
'uct="$upstream_connect_time" urt="$upstream_response_time"';
access_log /var/log/angie/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
vod_mode local;
vod_metadata_cache metadata_cache 16m;
vod_response_cache response_cache 512m;
vod_last_modified_types *;
vod_segment_duration 9000;
vod_align_segments_to_key_frames on;
vod_dash_fragment_file_name_prefix "segment";
vod_hls_segment_file_name_prefix "segment";
vod_manifest_segment_durations_mode accurate;
open_file_cache max=1000 inactive=5m;
open_file_cache_valid 2m;
open_file_cache_min_uses 1;
open_file_cache_errors on;
#gzip on;
include /etc/angie/http.d/*.conf;
}
#stream {
# include /etc/angie/stream.d/*.conf;
#}
- default.conf
特定站点开启hls 支持
server {
listen 80;
server_name localhost;
#access_log /var/log/angie/host.access.log main;
location / {
root /usr/share/angie/html;
index index.html index.htm;
}
location /status/ {
api /status/;
allow 127.0.0.1;
deny all;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/angie/html;
}
location /hls/ {
vod hls;
alias /opt/static/videos/;
add_header Access-Control-Allow-Headers '*';
add_header Access-Control-Allow-Origin '*';
add_header Access-Control-Allow-Methods 'GET, HEAD, OPTIONS';
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with angie's one
#
#location ~ /\.ht {
# deny all;
#}
}
- web site 直接支持hls 播放
基于了hls video 库
index.html
<html>
<head>
<title>angie vod module learning </title>
</head>
<body>
<script src="hls.js"></script>
<center>
<h1> angie vod module learning </h1>
<video height="600" id="video" controls></video>
</center>
<script>
var video = document.getElementById('video');
if (Hls.isSupported()) {
var hls = new Hls({
debug: true,
});
hls.loadSource('http://localhost/hls/1.mp4/master.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
video.muted = true;
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'http://localhost/hls/1.mp4/master.m3u8';
video.addEventListener('canplay', function () {
video.play();
});
}
</script>
</html>
启动&效果
- 启动
docker-compose up -d
- 效果
说明
为了方便体验，我直接构建了一个完整的docker 镜像，直接可以使用dalongrong/angie:1.3.1-alpine-vod，但是默认模块在构建上似乎有一个问题
目前还好属于警告
audio_encoder_process_init: failed to get AAC encoder, audio encoding is disabled. recompile libavcodec with libfdk_aac to enable it
参考资料
https://github.com/rongfengliang/angie_vod_module_learning
https://angie.software/en/install/#install-docker
https://github.com/webserver-llc/angie
https://github.com/kaltura/nginx-vod-module
https://hub.docker.com/repository/docker/dalongrong/angie