通过Websocket到<video>的视频流标记

问题描述：

我使用Node.js通过Websocket将实时webm视频流式传输到将在标签中播放它的网页。下面是从服务器端和客户端的代码：通过Websocket到<video>的视频流标记

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); 
    }); 

}); 
});

客户：

<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中转换它，但没有运气。

答

你举的例子只包含显示在呈现的页面上，从这里的代码：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));

可以MEDIASOURCE可以与网络RTC工作？ – 2016-06-02 07:16:53

这就是为什么SO建议放入代码段的原因;所以4年后，当URL不再有效时，我们仍然可以理解代码/上下文... – 2017-06-28 00:22:41

该URL仍然有效，并且如果此更改发生变化，您也可以检查缓存版本http://webcache.googleusercontent.com /search?q=cache:c1PEM1X38zMJ:html5-demos.appspot.com/static/media-source.html+&cd=1&hl=hu&ct=clnk&gl=hu – Jamesgt 2017-06-29 09:52:05

通过Websocket到的视频流标记

相关推荐

通过Websocket到