【问题标题】:Video stream through Websocket to <video> tag视频流通过 Websocket 到 <video> 标签
【发布时间】:2013-05-04 03:17:43
【问题描述】:

我使用 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>

我正在使用 Chrome 26,我收到此错误:“未捕获的错误:InvalidAccessError:DOM 异常 15”。似乎提供给 append 方法的缓冲区类型是错误的。我已经尝试将它转换为 Blob、Array 和 Uint8Array,但没有成功。

【问题讨论】:

    标签: javascript node.js dom websocket html5-video


    【解决方案1】:

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

    检查源代码,第 155 行是你所缺少的:

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

    因此,您需要告诉 Blob 内容类型,然后使用 Uint8Array 输入缓冲区(参见第 171 行):

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

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-15
    • 2013-05-05
    • 1970-01-01
    • 2015-02-04
    相关资源
    最近更新 更多