node.js 视频流通过 Websocket 到 <video> 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16465305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Video stream through Websocket to <video> tag
提问by breathe0
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:
我使用 Node.js 通过 Websocket 将实时 webm 视频流式传输到网页，该网页将在标签中播放。以下是来自服务器和客户端的代码：
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.
我正在使用 Chrome 26，但出现此错误：“未捕获的错误：InvalidAccessError：DOM Exception 15”。似乎馈送到 append 方法的缓冲区类型是错误的。我已经尝试将它转换为 Blob、Array 和 Uint8Array，但没有成功。
采纳答案by Jamesgt
Your example only contains the code that is shown on the rendered page from here: http://html5-demos.appspot.com/static/media-source.html
您的示例仅包含在此处呈现的页面上显示的代码：http: //html5-demos.appspot.com/static/media-source.html
Check the source code, line 155 is what you are missing:
检查源代码，第 155 行是您所缺少的：
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):
因此，您需要告诉 Blob 内容类型，然后使用 Uint8Array 提供缓冲区（请参阅第 171 行）：
sourceBuffer.append(new Uint8Array(e.target.result));
