文章/答案/技术大牛

发布

社区首页 >问答首页 >通过Websocket到<video>标签的视频流

问通过Websocket到<video>标签的视频流
EN

Stack Overflow用户

提问于 2013-05-09 23:20:17

回答 1查看 24.4K关注 0票数 15

我使用Node.js通过Websocket将一个实时的webm视频流式传输到一个网页，该网页将在一个标签中播放它。以下是来自服务器和客户端的代码：

服务器：

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>

我正在使用Chrome26，我得到了这个错误：“未捕获错误: InvalidAccessError: DOM异常15”。似乎提供给append方法的缓冲区类型是错误的。我已经尝试过将其转换为Blob、数组和Uint8Array格式，但没有成功。

javascript

node.js

dom

websocket

html5-video

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-05-18 02:07:10

您的示例仅包含此处呈现的页面上显示的代码：http://html5-demos.appspot.com/static/media-source.html

检查源代码，第155行是您缺少的内容：

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

因此，您需要告诉Blob内容类型，然后向buffer提供Uint8Array (参见第171行)：

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

票数 8

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16465305

复制

相似问题

问通过Websocket到<video>标签的视频流
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过Websocket到<video>标签的视频流EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过Websocket到<video>标签的视频流
EN