2015-12-05 6 views
9

Ich bin neu in Binärdaten und getUserMedia, was wäre die empfohlene Möglichkeit, getUserMedia (Video/Audio) zu einem Server zu streamen und dann den Stream (Video/Audio) für andere Verbindungen vorzubereiten?Streaming getUserMedia zu Server

Mein erster Gedanke war, die Daten über WebSockets zu senden und schreiben dann die Daten in eine Datei (mp4) wie folgt aus:

getUserMedia -->(websockets)--> server -->(file.mp4)--> video.src.

Ich habe bei MediaStreamRecorder suchen und ich kann wie so einen Puffer senden:

multiStreamRecorder.ondataavailable = function (blobs) { 
    socket.emit('blobs', blobs) 
}; 

auf dem Server ich

bekommen
{ audio: <Buffer 52 49 46 46 2c 10 04 00 57 41 56 45 66 6d 74 20 10 00 00 00 01 00 01 00 44 ac 00 00 10 b1 02 00 02 00 10 00 64 61 74 61 00 10 04 00 f8 ff 04 00 0d 00 ... >, 
    video: <Buffer 1a 45 df a3 40 20 42 86 81 01 42 f7 81 01 42 f2 81 04 42 f3 81 08 42 82 40 04 77 65 62 6d 42 87 81 02 42 85 81 02 18 53 80 67 10 0a 41 54 15 49 a9 66 ... >, 
    onDataAvailableEventFired: true } 

Jetzt sollte ich glaube, ich diese in eine Datei schreiben, diene dieser Datei und fordere dann diese Datei von einer Quelle des Elements video an. Wenn das alles richtig ist, wie würde ich über das Schreiben der Datei in das Dateisystem gehen? oder mache ich etwas falsch?

Ich verstehe WebRTC hat P2P-Funktionalität, würde ich den Video-Stream zu ~ 50 oder mehr Clients dienen, so ist es keine Option.

Aktualisierung mit websocket Lösung:

Ich bin jetzt die Daten wieder über WebSockets wie so emittierende:

socket.on('blobs', function(data){ 
    socket.emit('blobs', data) 
}) 

und auf der Client-Seite in eine mediaSource schieben und dann ein video Element mit einem timestampOffset, um es glatt zu halten.

var mediaSource = new MediaSource(), 
    mediaBuffer, 
    // init duration of 0 seems fine 
    duration = 0; 

var video = $('video').get(0); 
video.src = window.URL.createObjectURL(mediaSource); 

mediaSource.addEventListener('sourceopen', function(e) { 
    mediaBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"') 
    mediaBuffer.addEventListener('update', function() { 
     // wait for mediaBuffer update to fire before setting the new duration 
     duration = video.duration 
    }); 
}, false); 

socket.on('blobs', function (data) { 
    mediaBuffer.timestampOffset = duration; 
    mediaBuffer.appendBuffer(new Uint8Array(data.video)); 
}); 
+0

Ich habe diese Frage bei der Suche nach einer Lösung mit der [MediaRecorder-API] (https://www.w3.org/TR/mediasteream-recording/#MediaRecorderAPI) anstelle der MediaStreamRecorder-Bibliothek gefunden. Es gibt eine [nette Antwort in einer anderen Frage] (http://stackoverflow.com/a/27821586/3256574) – marcw

+0

Und was ist mit dem Server.js-Skript, wie das Abhören eines Anschlusses gehandhabt wurde, bitte ich das serverseitige Skript? –

+1

@ASahra Die Lösung ist bereits für die Serverseite vorgesehen. OP benutzt nur 'socket.on ('blobs', function (data) {socket.emit ('blobs', data)})', um den Stream an die anderen Benutzer zu senden, effektiv nur als 1: 1-Übertragung . – zillaofthegods

Antwort

5

Damit dies ordnungsgemäß funktioniert, muss der Server WebRTC ebenfalls "sprechen". Die Verwendung von Websockets wird nicht das gewünschte Ergebnis liefern und wird nicht so reaktionsschnell sein wie WebRTC - es wird nicht Echtzeit sein.

Um WebRTC auf einem Server ausgeführt wird, können Sie den WebRTC Stapel an webrtc.org oder OpenWebRTC als Ausgangspunkt verwenden, verwenden GStreamer oder für etwas ein bisschen mehr vollständig gehen. Gute Projekte von Media Server-Frameworks, von denen WebRTC starten kann, sind Kurento, Jitsi und Janus.

Aufgrund der Art Ihrer Frage, ist mein Vorschlag, mit einem der vollständigeren Medienserver Frameworks oben zu starten.

+0

Dank Kumpel, ich denke, dass Janus für meine Bedürfnisse ziemlich gut arbeiten würde, obwohl ich für jetzt eine ziemlich nette Lösung mit websockets herausgefunden habe (hinzugefügt zu Frage). – brod