CODEWITHSUNDEEP
javascriptnode.jsdomwebsockethtml5-video
breathe0
breathe0

Reputation: 593

Video stream through Websocket to <video> tag

I use Node.js to stream via Websocket a realtime webm video to a webpage which will play it in a tag. The following is the code from both the server and the client:

SERVER:

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>

I'm using Chrome 26 and i get this error: "Uncaught Error: InvalidAccessError: DOM Exception 15". It seems like the type of the buffer fed to the append method is wrong. I already tried converting it in a Blob, Array and Uint8Array, but with no luck.

Upvotes: 16

Views: 28199

Answers (1)

Jamesgt
Jamesgt

Reputation: 605

Your example only contains the code that is shown on the rendered page from here: http://html5-demos.appspot.com/static/media-source.html

Check the source code, line 155 is what you are missing:

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

So, you need to tell the Blob the content type and then feed the buffer with Uint8Array (see line 171):

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

Upvotes: 9

Related Questions