dash.js - stuck at buffering when trying to watch (new) live stream - nginx

Question

This is my setup:
I have a webpage which uses dash.js to view a live stream. The live stream is coming from my computer which is running OBS and NGINX. This works without a problem except when I call up the webpage within the first 30 seconds (or so) after the stream has started.
I tell dash to open up index.mpd on my computer, but only when it's available. In pseudo code:
START: If index.mpd is available
initialize stream and view it
Else
go to START
End
As soon as index.mpd is available, this means there's also a video/audio chunk available so it should be able to start playing. But it stalls instead (grey screen with rotating pin wheel). This probably has to do with the fact the settings ask for a 20 second buffer and a video/audio chunk is 8.3 seconds. (BTW, I have no idea why those chunks are 8.3 seconds - I could not find a setting anywhere in OBS or NGINX that reflects those 8.3 seconds)
The problem is, it never stops stalling (is it trying to buffer? I don't know). Even when all chunks are available and NGINX starts FIFO-ing the chunks. It never recovers from the stall.
Only when I open the page at a time when the entire buffer is available (which, again for some unknown reason, is about 30 seconds instead of the 20 I have set it to) will it start (dis)playing the stream.
Here is the complete NGINXG.conf:
worker_processes 1;
error_log logs/error.log;
events {
worker_connections 1024;
}
rtmp {
server {
listen 1935;
chunk_size 4096;
application live {
live on;
interleave on;
meta on;
session_relay on;
max_connections 1500;
record_path recordings;
record_suffix all-%d-%b-%y-%T.flv;
push rtmp://localhost/dash;
}
application dash {
live on;
dash on;
dash_nested on;
dash_cleanup on;
dash_fragment 5s;
dash_playlist_length 20s;
dash_path temp/tmp_dash;
}
}
}
http {
keepalive_timeout 60;
send_timeout 10;
keepalive_requests 10;
client_body_timeout 10;
sendfile on;
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;
server {
listen 8050;
server_name localhost;
access_log logs/host.access.log main;
add_header Strict-Transport-Security "max-age=63072000;";
index index.php index-nginx.html index.html index.htm;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root site;
}
location / {
location ~* \.m3u8$ {
add_header Cache-Control no-cache;
}
try_files $uri $uri/ =404;
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Strict-Transport-Security' 'max-age=31536000';
add_header 'X-Content-Type-Options' "nosniff" 'always';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Max-Age' 1728000;
# add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
root site;
index index.php index.html index-nginx.html index.htm index.m3u8 index.mpd;
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root site;
}
location /tmp_dash {
alias temp/tmp_dash;
autoindex on;
autoindex_localtime on;
autoindex_exact_size off;
expires -1;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length';
}
types {
application/dash+xml mpd;
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
text/html html;
}
}
}
}
And here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://cdn.dashjs.org/latest/dash.all.min.js"></script>
<script>
window.addEventListener( "load", init );
var XMLHttp;
var streamActive = false;
var url = "/tmp_dash/stream/index.mpd";
function init(){
XMLHttp = new XMLHttpRequest();
XMLHttp.onreadystatechange = function() {
if( XMLHttp.readyState == 4
if( XMLHttp.status == 200 ) {
// Index.mpd exists
if( ! streamActive ) {
player = dashjs.MediaPlayer().create();
player.initialize( document.querySelector( "#videoPlayer" ), url, true);
}
} else if( XMLHttp.status == 404 ) {
setTimeout( checkStreamReady, 5000 ); // Check again in 5 seconds
}
}
}
checkStreamReady();
}
function checkStreamReady() {
XMLHttp.open( "GET", url, true );
XMLHttp.send();
}
</script>
</head>
<body>
<div id="videocontainer">
<video id="videoPlayer" controls></video>
</div>
</body>
</html>