videostream通过Websocket到<video>标签
我使用Node.js通过Websocket实时webmvideostream到一个网页，将在一个标签中播放它。 以下是来自服务器和客户端的代码：
服务器：
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); }); }); }); 客户：
<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>
我使用的是Chrome 26，并且出现此错误：“未捕获的错误：InvalidAccessError：DOMexception15”。 这似乎是提供给append方法的缓冲区的types是错误的。 我已经尝试在Blob，Array和Uint8Array中转换它，但没有运气。
你的例子只包含从这里呈现的页面上显示的代码： http : //html5-demos.appspot.com/static/media-source.html
检查源代码，第155行是你所缺less的：
var file = new Blob([uInt8Array], {type: 'video/webm'});
所以，你需要告诉Blob的内容types，然后用Uint8Array提供缓冲区（见第171行）：
sourceBuffer.append(new Uint8Array(e.target.result));