Немонстроузный web-проигрыватель бесконечного DASH потока с IP камеры.

'use strict'

function Dash( id )
{
    var _ = this;
    _.v = document.getElementById( id );
    var url = _.v.src;
    _.v.src = undefined;
    var slash = url.lastIndexOf("/");
    _.path = url.substring( 0, slash + 1 );
    _.mpd = url.substring( slash + 1 );
    _.init = true;
    _.xhr = [];
    _.load_mpd( false );
    _.video_update  = function() { _._video_update(); };
    _.video_updated = function() { _._video_updated(); };
    _.video_updating = false;

    _.v.addEventListener( 'click', _.toggle.bind(_), false );

    _.v.addEventListener( 'pause', function ()
    {
        console.log( 'paused' );
        this.removeEventListener( 'timeupdate', _.video_update );
        if( _.videoSource.updating ) _.videoSource.abort();
        _.xhr.forEach( function ( xhr ) { xhr.abort(); } );
    }, false);

    _.v.addEventListener( 'play', function()
    {
        console.log( 'playing' ); 
        this.addEventListener( 'timeupdate', _.video_update, false );
    }, false);

    _.v.addEventListener( 'ended', function()
    {
        console.log( 'ended' );
        this.removeEventListener( 'timeupdate', _.video_update );
    }, false);

    _.v.addEventListener( 'error', function(e) { console.log( 'video error: ' + e ); }, false );
    _.v.addEventListener( 'emptied', function() { console.log( 'emptied' ); }, false );
}

Dash.prototype.play = function() { this.load_mpd( true ); }
Dash.prototype.stop = function() { this.v.pause(); }
Dash.prototype.toggle = function()
{
    if( this.v.paused == true ) this.play();
    else                        this.stop();
}

Dash.prototype.mpd_parse = function( data )
{
    var _ = this, e, g;
    e = data.querySelectorAll("Representation")[0];
    g = e.getAttribute.bind( e );
    _.id        = g( 'id' );
    _.mimetype  = g( 'mimeType' );
    _.codecs    = g( 'codecs' );
    _.width     = g( 'width' );
    _.height    = g( 'height' );

    e = data.querySelectorAll( 'SegmentTemplate' )[0];
    g = e.getAttribute.bind( e );
    _.timescale = g( 'timescale' );
    _.ini       = g( 'initialization' );
    _.seg       = g( 'media' );
    _.start     = g( 'startNumber' );

    _.ini = _.ini.replace( '$RepresentationID$', _.id );
    _.seg = _.seg.replace( '$RepresentationID$', _.id );

    _.duration = [];

    data.querySelectorAll("S").forEach( function( v, i )
    {
        _.duration[i] = v.getAttribute( 'd' ) / _.timescale;
        if( i == 0 ) _.ts = v.getAttribute( 't' );
    } );
}

Dash.prototype.load_mpd = function( start )
{
    var _ = this;
    _.xhr[0] = new XMLHttpRequest();
    _.xhr[0].onreadystatechange = function ()
    {
        if( this.readyState != this.DONE ) return;
        if( this.status != 200 ) return;

        var parser = new DOMParser();
        var xmlData = parser.parseFromString( this.response, 'text/xml' );

        _.mpd_parse( xmlData );

        if( start )
        {
            _.video_updating = false;
            _.num = parseInt( _.start ) + 1;
            _.ts_current = _.v.currentTime;
            _.load_seg();
        }

        if( _.init )
        {
            _.v.width  = _.width;
            _.v.height = _.height;
            _.mediaSource = new window.MediaSource();
            _.mediaSource.addEventListener( 'sourceopen', function (e) {
                _.videoSource = _.mediaSource.addSourceBuffer( _.mimetype + '; codecs="' + _.codecs + '"' );
                _.videoSource.mode = 'sequence';
                _.videoSource.addEventListener( 'updateend', _.video_updated, false );
                _.load_ini();
            }, false );
            _.v.src = URL.createObjectURL( _.mediaSource );
        }
    }
    _.xhr[0].open( 'GET', _.path + _.mpd );
    _.xhr[0].send();
}

Dash.prototype.append = function( f )
{
    var _ = this;
    _.xhr[1] = new XMLHttpRequest();
    _.xhr[1].responseType = 'arraybuffer';
    _.xhr[1].onreadystatechange = function ()
    {
        if( this.readyState != this.DONE ) return;
        if( this.status != 200 ) return;
        _.videoSource.appendBuffer( new Uint8Array( this.response ) );
    };
    _.xhr[1].open( 'GET', _.path + f );
    _.xhr[1].send();
}

Dash.prototype.load_ini = function()
{
    this.append( this.ini );
}

Dash.prototype.load_seg = function()
{
    var n = this.num.toString();
    if( n.length < 5 ) n = ( '0000' + n ).slice( -5 );
    this.append( this.seg.replace( '$Number%05d$', n ) );
}

Dash.prototype._video_update = function()
{
    var _ = this;
    if( _.video_updating ) return;
    var i = _.num - _.start;
    if( _.v.currentTime >= _.ts_current - _.duration[i] * 0.5 )
    {
        _.video_updating = true;
        _.load_seg();
    }
}

Dash.prototype._video_updated = function()
{
    var _ = this;

    if( _.init ) { _.init = false; return; }

    if( _.v.paused == true )
    {
        _.v.currentTime = _.ts_current;
        _.v.play();
    }
    _.ts_current += _.duration[ _.num - _.start ];
    _.num++;
    if( _.num - _.start >= _.duration.length - 1 ) _.load_mpd( false );
    _.video_updating = false;
}

<HTML>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" content="no-cache">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8">
<SCRIPT src="tiny-dash.js" type="text/javascript"></SCRIPT>
<SCRIPT>
var dash;
window.addEventListener( 'load', function() { dash = new Dash( 'dashvideo' ); }, false );
</SCRIPT>
<TITLE>Camera stream</TITLE>
</HEAD>
<BODY bgcolor="#000000" text="#c0c0c0">
<VIDEO id="dashvideo" src="media/manifest.mpd" preload="none">No video available</video>
</DIV>
</BODY>

#!/bin/sh

stream="rtsp://host:port/ch0_264"
target="/где.там.страничка.лежит/media/manifest.mpd"

/usr/bin/ffmpeg \
-probesize 32 \
-loglevel quiet \
-i "${stream}" \
-an \
-c:v copy \
-f dash \
-window_size 4 \
-extra_window_size 1 \
-min_seg_duration 2000000 \
-remove_at_exit 1 \
"${target}"