Menu
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.
875
Yes, Websocket can be used to transmit over 30 fps and even 60 fps. The main issue with Websocket is that it is low-level and you have to deal with may other issues than just transmitting video chunks. All in all it's a great transport for video and also audio.
WebRTC doesn't use WebSockets. It has its own set of protocols including SRTP, TURN, STUN, DTLS, SCTP, … The thing is that WebRTC has no signaling of its own and this is necessary in order to open a WebRTC peer connection. This is achieved by using other transport protocols such as HTTPS or secure WebSockets.
WebSocket is a computer communications protocol, whereas WebRTC is a free open source project that enables browsers and mobile applications with communication capabilities. WebSockets' focus is on rich web applications, whereas that of WebRTC is quick and easy peer-to-peer connections.
The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.
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));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
