WEBRTC and MSE (media source extensions) some ideas and attempts to achieve Peer-to-peer video (1) __web

Recently flv.js things seem to have ignition, and again to the MSE this thing to bring up.
MSE (Media source extensions) is a new function of HTML5, and the general function is to realize streaming media function.
If the MSE with WEBRTC and JS binary processing, then you can implement the server to send video to one of the browser users, the browser users will then transfer video streaming to other users of the function. is a web-side in the Peer-to-peer function of an exploration of the idea

The binary data sent by the server to the video stream is sent to Web,web through the WEBRTC Datachannel to other Web users. Then the binary data is converted into video streaming by MSE. MSE related API parsing Mediasource.addsourcebuffer ()
Add data to Buff Mediasource.removesourcebuffer ()
Remove Data Mediasource.endofstream ()
Stream End Mediasource.addeventlistener ()
Add an event response function Example

Complete code See Https://github.com/yuyugenius/js_video_p2p_demo
The web side uses Nodejs and the startup mode is node Index.js
Because I am not writing the front-end and JS, just in this respect did a little try, so code ugly bug frequency out please forgive me.
Because the code was written a few months ago, the description is not clear please forgive me
Partial WEBRTC code from Google web to get stream data

Web-side get stream data can be done in many ways, I'm here Ajax.

/**
 * FILE LOADING
 * method:xmlhttprequest
/function get (filename, callback) {
    var request = new XMLHttpRequest ();
    Request.responsetype = ' Arraybuffer ';
    Request.onreadystatechange = function () {
        if (request.readystate = = 4 && (request.status = = | | request.st ATUs = = 304))
            ({callback (request.response);
        }
    };
    var file = ' chunks/' + filename;
    Request.open (' Get ', file, true);
    Request.send ();
};

Add an event response for MSE

_mediasource.addeventlistener (' Sourceopen ', Sourceopencallback, false);
_mediasource.addeventlistener (' Webkitsourceopen ', Sourceopencallback, false);

Set the event response, when there is a buffer in MSE, play, the format used here is Vp8+vorbis, while starting a startfileloading (0) function.

function Sourceopencallback () {
    console.log (' mediasource readyState: ' + this.readystate);
    Create the source buffer where we are going to append the
    //new chunks.
    _sourcebuffer = _mediasource.addsourcebuffer (' video/webm; codecs= ' Vp8,vorbis ');
    _sourcebuffer.addeventlistener (' Updateend ', Loadnextbuffer, false);
    _sourcebuffer.mode = ' sequence ';

    Start
    startfileloading (0);
}

_sourcebuffer.mode = ' sequence '; mode is played in queue order, and if segments is a timestamp, you can refer to the Sourcebuffer of the HTML standard.
The role of startfileloading (i) is to read the video stream from the server, which is used to read the video file, and a list of files is preset in my test code.

/** * Start File LOADING */function startfileloading (i) {//Load the chunk Get (_files[i), function (result) {

        Console.log (' xmlhttprequest:loaded ', _files[i]);

        Cache the buffer _loadedbuffers.push (result); 
            If connect with WEBRTC, sendmediadata to Anothoer user if (_isconnection) {//peer.senddata (result);
            for (var index = 0; index < _peerindex. index++) {peerlist[index].senddata (result); 
            } if (!_sourcebuffer.updating) {//settimeout (loadnextbuffer,3000);
        Loadnextbuffer ();
            } if (i = = 0) {//Start playback if (video.paused) {video.play ();
        }} i++;
        if (i = = _files.length) {i = 0; }//Recursively load next chunk (if one exists) if (I < _files.length) {settimeout (functi On () {StartfileLoading (i);
            }, 9000);
        Startfileloading (i);
}
    }); }

If the current web side has already connected other Web users through WEBRTC, then the video data that is read from the server can be sent to other users in the same way that the video obtained by the second Web user is not obtained from the server, but from the first user.

If connect with WEBRTC, sendmediadata to Anothoer user
if (_isconnection) {
    //peer.senddata (result);
    for (var index = 0; index < _peerindex. index++) {
        peerlist[index].senddata (result);
    }
}

Loadnextbuffer is to read the next buffer and add to MSE, so that MSE can continuously play video, you can not wait for the full load of video playback, you can also use this to achieve the live effect.

/**
 * Video Stuff
 * It appends puts the next cached buffer into the source buffer.
 */
function Loadnextbuffer () {
    if (_loadedbuffers.length) {
        console.log (' sourcebuffer:appending ', _ Itemsappendedtosourcebuffer);
        Append the next one into the source buffer.
        _sourcebuffer.appendbuffer (_loadedbuffers.shift ());
        _itemsappendedtosourcebuffer++;
    }
    /* IF (_itemsappendedtosourcebuffer >= _files.length &&!_sourcebuffer.updating) {
        /else close The Stream
        _mediasource.endofstream ();
    }
    */
}

WEBRTC Part

Js/peer.js file is about the implementation of WEBRTC related operations, the WEBRTC part of the implementation of the next blog is perfect