2013-07-26 2 views
5

Ich muss eine Webanwendung erstellen, die WebRTC verwendet, um Webkamera-Videostreams und Mic-Audiostreams zu erhalten und sie sofort auf den Server zu übertragen, um sie dann an mehrere Clients zu senden. Die App muss dies in Echtzeit im Vollduplex tun. Ich meine, es wäre eine Art Live-Video-Chat. Es wäre eine Art von Bildungs-App. Die Frage ist also: Ist es jetzt möglich? Welche Technologien sollte ich verwenden? Soll ich WebRTC mit WebSocket und Node.js im Backend verwenden? Oder kann ich PHP anstelle von Knoten verwenden? Kann ich Socket.io dafür verwenden? Gibt es andere Möglichkeiten, dies zu erreichen? Kann Flash sein?Ist es jetzt möglich, die GetUserMedia-API zu verwenden, um den Videostream von der Webkamera zu lesen und direkt an den Server zur weiteren Übertragung zu senden?

Antwort

4

Die PeerConnection-API in WebRTC erfordert keinen Back-End-Server zum Ausführen einer oder mehrerer Verbindungen zwischen Peers.

Das einzige, für das Sie einen Back-End-Server benötigen, ist, als Vermittler für den ersten Verbindungsaufbau zwischen den Peers zu dienen. Zu diesem Zweck können Sie die WebSocket-API, Ajax oder andere erforderliche Mittel verwenden, um dies zu erreichen. Ja, Sie können PHP auch verwenden, um die Serverseite für WebSocket zu schreiben (oder die Methode, die Sie zum Aufbau der Peer-to-Peer-Verbindung verwenden möchten). Es liegt wirklich an dir.

Momentan unterstützen nur Chrome und Firefox genügend WebRTC-APIs, um Video-Chats zu ermöglichen. Sehr bald wird sich Opera wahrscheinlich dem Mix anschließen, aber noch ist niemand sicher, ob WebRTC zu IE11 hinzugefügt wird oder nicht, und Apple scheint nicht die Absicht zu haben, WebRTC zu Safari hinzuzufügen (weil sie ihre eigene proprietäre Technologie haben) das, vertraut ?!).

Wie auch immer, WebRTC ist Ihre beste Wette. Als zusätzliche Anmerkung glaube ich nicht, dass es möglich ist, JS zu verwenden, um Video und Audio an einen Server zu senden, und dann den Server diese Daten an die anderen Peer (s) weiterleiten zu lassen. Stattdessen müssen Sie WebRTC verwenden, um Peer-to-Peer-Verbindungen herzustellen, und von dort aus fortfahren.

bearbeiten: Wenn Sie einen TURN-Server verwenden, können Sie Ihre Audio- und Videodaten über einen Server umleiten, aber das ist eigentlich die am wenigsten ideale Situation, und Sie können, dass nur noch tun, wenn Sie die WebRTC APIs verwenden .

+0

Danke für die Antwort! Ich weiß, dass WebRTC Browser direkt verbinden kann. Aber ich brauche einen Webserver für Authentifizierungs- und Autorisierungszwecke. – paperstreet7

+0

Und das liegt ganz bei Ihnen. Sie können autorisieren und Authentifizierung, was auch immer Sie wollen, und erlauben Sie nur die WebRTC-Verbindung, wenn alles in Ordnung ist. – HartleySan

+0

@ paperstreet7 - Es ist mehrere Jahre her, aber ich bin auf eine ähnliche Anforderung gestoßen, hast du es geschafft, zu einer Lösung zu kommen? – po10cySA

2

Es kann Ihnen helfen.

MediaStreamRecorder ist eine WebRTC API zum Aufzeichnen von getUserMedia() Streams (noch in der Implementierung). Es ermöglicht Web-Apps, eine Datei aus einer Live-Audio-/Videositzung zu erstellen.

Hier ist eine Beispielimplementierung, um Stream an Server zu senden.

<video autoplay></video> 

    <script language="javascript" type="text/javascript"> 
    function onVideoFail(e) { 
     console.log('webcam fail!', e); 
     }; 

    function hasGetUserMedia() { 
     // Note: Opera is unprefixed. 
     return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
       navigator.mozGetUserMedia || navigator.msGetUserMedia); 
    } 

    if (hasGetUserMedia()) { 
     // Good to go! 
    } else { 
     alert('getUserMedia() is not supported in your browser'); 
    } 

    window.URL = window.URL || window.webkitURL; 
    navigator.getUserMedia = navigator.getUserMedia || 
          navigator.webkitGetUserMedia || 
           navigator.mozGetUserMedia || 
           navigator.msGetUserMedia; 

    var video = document.querySelector('video'); 
    var streamRecorder; 
    var webcamstream; 

    if (navigator.getUserMedia) { 
     navigator.getUserMedia({audio: true, video: true}, function(stream) { 
     video.src = window.URL.createObjectURL(stream); 
     webcamstream = stream; 
    // streamrecorder = webcamstream.record(); 
     }, onVideoFail); 
    } else { 
     alert ('failed'); 
    } 

    function startRecording() { 
     streamRecorder = webcamstream.record(); 
     setTimeout(stopRecording, 10000); 
    } 
    function stopRecording() { 
     streamRecorder.getRecordedData(postVideoToServer); 
    } 
    function postVideoToServer(videoblob) { 

     var data = {}; 
     data.video = videoblob; 
     data.metadata = 'test metadata'; 
     data.action = "upload_video"; 
     jQuery.post("http://www.kongraju.in/uploadvideo.php", data, onUploadSuccess); 
    } 
    function onUploadSuccess() { 
     alert ('video uploaded'); 
    } 

    </script> 

    <div id="webcamcontrols"> 
     <button class="recordbutton" onclick="startRecording();">RECORD</button> 
    </div> 

können Sie aufgenommene Datei an den Server senden.

Referenzen:

http://www.w3.org/TR/mediastream-recording/

+0

Weißt du, welchen Typ die Videodatei/das Videodateiteil hat, erreichte es den Teil 'data = {}', bevor es an den Server gesendet wurde? – JerryFox

+2

Ich erhalte den Fehler _Uncaught TypeError: Kann die Eigenschaft 'record' von undefined_ in Zeile 41 'streamRecorder = webcamstream.record() nicht lesen;' in Chrome Version 46.0.2490.86 m –

1

Live-Duplex-Video-Chat mit mehreren Teilnehmern ist Videokonferenzen, für das Sie eine Server-Komponente benötigen, die die Audio- und Video der Teilnehmer und sendet es ihnen mischt. Sie benötigen dazu sehr dringend einen Medienserver. Für WebRTC gibt es ein paar zur Verfügung; Schauen Sie sich Doubangos Telepresence-Server an: https://code.google.com/p/telepresence/

Mobicents hat einen guten SIP-Stack für dieselben, aber Multi-Media-Funktionen für webRTC sind begrenzt.

Sonst warum nicht anfangen, einen zu schreiben? :)

Verwandte Themen