Flux vidéo via Websocket vers & lt; vidéo & gt; marque

- Je utiliser Node.js pour diffuser via Websocket en temps réel vidéo webm vers une page web qui va jouer dans une balise.
Le code suivant est celui de la fois le serveur et le client:

SERVEUR:

var io = require('./libs/socket.io').listen(8080, {log:false});
var fs = require('fs');
io.sockets.on('connection', function (socket) 
{
console.log('sono entrato in connection');
var readStream = fs.createReadStream("video.webm");

socket.on('VIDEO_STREAM_REQ', function (req) 
{
    console.log(req);

    readStream.addListener('data', function(data)
    {
        socket.emit('VS',data);
    });

});
});

CLIENT:

<html>
<body>

<video id="v" autoplay> </video>

<script src='https://localhost/socket.io/socket.io.js'></script>
<script>
window.URL = window.URL || window.webkitURL;
window.MediaSource = window.MediaSource || window.WebKitMediaSource;

if(!!! window.MediaSource)
{
    alert('MediaSource API is not available!');
    return;
}

var mediaSource = new MediaSource();    
var video = document.getElementById('v');

video.src = window.URL.createObjectURL(mediaSource);

mediaSource.addEventListener('webkitsourceopen', function(e)
{
    var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    var socket = io.connect('http://localhost:8080');

    if(socket)
        console.log('Library retrieved!');

    socket.emit('VIDEO_STREAM_REQ','REQUEST');

    socket.on('VS', function (data) 
    {
        console.log(data);
        sourceBuffer.append(data);
    });
});

</script>


</body>
</html>

Je suis en utilisant google Chrome 26 et j'obtiens cette erreur: "Erreur non Interceptée: InvalidAccessError: DOM Exception de 15". Il semble que le type de la mémoire tampon de la fed à la méthode append est faux. J'ai déjà essayé de le convertir dans un Blob, Tableau et Uint8Array, mais avec pas de chance.

source d'informationauteur breathe0

  1. 5

    Votre exemple ne contient que le code qui est indiqué sur le rendu de la page à partir d'ici: http://html5-demos.appspot.com/static/media-source.html

    Vérifier le code source, la ligne 155 est ce qui vous manque:

    var file = new Blob([uInt8Array], {type: 'video/webm'});

    Donc, vous devez dire à la Goutte le type de contenu et puis l'alimentation de la mémoire tampon avec Uint8Array (voir la ligne 171):

    sourceBuffer.append(new Uint8Array(e.target.result));