javascript - Video stream through Websocket to <video> tag -
i use node.js stream via websocket realtime webm video webpage play in tag. following code both server , 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 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 , error: "uncaught error: invalidaccesserror: dom exception 15". seems type of buffer fed append method wrong. tried converting in blob, array , uint8array, no luck.
your example contains code shown on rendered page here: http://html5-demos.appspot.com/static/media-source.html
check source code, line 155 missing:
var file = new blob([uint8array], {type: 'video/webm'}); so, need tell blob content type , feed buffer uint8array (see line 171):
sourcebuffer.append(new uint8array(e.target.result)); 
Comments
Post a Comment