Videostream durch Websocket zu <video> tag

Ich benutze Node.js, um via Websocket ein Echtzeit-Webm-Video zu einer Webseite zu streamen, die es in einem Tag abspielen wird. Hier finden Sie den Code aus dem Server und dem Client:Videostream durch Websocket zu <video> tag

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>

Ich bin mit 26 Chrome und ich bekomme diese Fehlermeldung: „Nicht abgefangene Fehler: InvalidAccessError: DOM Exception 15 ". Der Typ des Puffers, der der append-Methode zugeführt wird, scheint falsch zu sein. Ich habe bereits versucht, es in einem Blob, Array und Uint8Array zu konvertieren, aber ohne Glück.

Quelle

2013-05-09 breathe0

Ihr Beispiel nur den Code enthält, der von hier aus auf die gerenderte Seite angezeigt wird: http://html5-demos.appspot.com/static/media-source.html

Überprüfen Sie den Quellcode, Linie 155 ist, was Sie vermissen:

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

So, müssen Sie Informieren Sie den Blob über den Inhaltstyp und geben Sie dann den Puffer mit Uint8Array ein (siehe Zeile 171):

Quelle

2013-05-17 18:07:10 Jamesgt

kann mediasource mit web rtc arbeiten? –

Aus diesem Grund empfiehlt SO, Codeschnipsel einzufügen; also 4 Jahre später, wenn die URL nicht mehr funktioniert, können wir noch den Code/Kontext verstehen ... –

Die URL funktioniert immer noch und Sie können die zwischengespeicherte Version überprüfen, wenn sich dies ändert 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

Videostream durch Websocket zu <video> tag

Antwort

Verwandte Themen