WebRTC oder Web-Echtzeitkommunikation ist eine von Google in Javascript entwickelte Plattform, die in freier Form bereitgestellt wird, um Anwendungen zu entwickeln, die in einem Browser funktionieren und Sprach-, Chat- und Videoanrufe ermöglichen, so gut wir können Erstellen Sie einen Filesharing-Kanal.
Einige der Vorteile dieser API sind:
- Wir können eine Kommunikationsverbindung von bis zu 256 Benutzern konfigurieren und herstellen.
- Audio-, Video- und Datenkommunikation können zwischen Chrome und Firefox verwendet werden.
- Mit der API können Sie den Bildschirm für die Benutzer freigeben.
WebRTC hat offene Standards für Echtzeit-, Video-, Audio- und Datenkommunikation implementiert. Viele Webdienste verwenden bereits die RTC-API, müssen jedoch heruntergeladen werden, um verwendet zu werden, und einige stellen einige Online-Tools über native Anwendungen oder Plugins bereit. Einige Anwendungen, die RTC verwenden, sind Skype, Facebook (das eine Skype-Version verwendet) und Google Hangouts , WhatsApp und Facebook Messenger.
Die Plugins und Anwendungen sind in vielen Fällen nicht plattformübergreifend und möglicherweise verwenden nicht alle Benutzer dieselbe Anwendung oder können sie installieren.
Die Hauptziele des WebRTC-Projekts sind, dass seine APIs Open Source, frei, standardisiert, in Webbrowser integriert und effizienter als vorhandene Technologien sein müssen.
Funktionalität der WebRTC-APIs
Die API getUserMedia ist in Chrome, Opera, Firefox und Microsoft Edge verfügbar. Diese API bietet Zugriff auf Multimedia-Video, Audio oder beides.
Die Funktionalität ist Echtzeitkommunikation. Sie kann auch verwendet werden, um Tutorials oder Kurse für Online-Kurse mit unserer eigenen Anwendung aufzuzeichnen.
Ein weiterer interessanter Fall ist die Verwendung von Webcam-Überwachung. Diese API kann nur Audio und Video aufzeichnen und wiedergeben. Sie wird nicht zum Speichern der Übertragung verwendet. Hierzu wird eine andere API verwendet. Es ist sehr nützlich, eine Videokonferenz in Echtzeit abzuhalten.
Sehen wir uns ein Beispiel an:
<! DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "text / html; charset = UTF-8"> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <title> WebRTC Tutorial getUserMedia API </ title> <style> Körper { maximale Breite: 500px; Rand: 2em auto; Polsterung: 0 0,5em; Schriftgröße: 20px; Hintergrundfarbe: # 223254; } h2 { Textausrichtung: Mitte; Farbe: #ffffff; } .taste { Textausrichtung: Mitte; } #video { Anzeige: Block; Rand: fest 5px # f7f7f7; Breite: 100%; } .boton { Polsterung: 0,5em; Anzeige: Inline-Block; Rand: 1em auto; } </ style> </ head> <body> <h2> WebRTC getUserMedia-API </ h2> <h2> Video testen </ h2> <video id = "video" autoplay = "autoplay" controls = "controls"> </ video> <div class = "keypad"> <button id = "btconectar" class = "button"> Verbinden </ button> <button id = "btdescanectar" class = "button-demo"> Verbindung trennen </ button> </ div> <script> var trasmitevideo = null; var video = document.getElementById ('video'); // MS Edge-, Chrome- oder Firefox-Browser erkennen window.navigator = window.navigator || {}; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || null; if (navigator.getUserMedia === null) { document.getElementById ('btconectar'). setAttribute ('disabled', 'disabled'); document.getElementById ('btdesconnect'). setAttribute ('disabled', 'disabled'); } else { var scene = window.URL? window.URL.createObjectURL: function (stream) {return stream;}; var audio = window.AudioContext || window.webkitAudioContext || null; document.getElementById ('btconectar'). addEventListener ('click', function () { // Wir erfassen Audio und Video navigator.getUserMedia ({ Video: wahr, Audio: wahr }, Funktion (Stream) { sendevideo = stream; // Videodaten übertragen video.src = Szene (Stream); video.play (); }, Funktion (Fehler) { console.log ('Videofehler:' + error.code); }); }); document.getElementById ('btdesconnect'). addEventListener ('click', function () { // Video-Streaming anhalten video.pause (); // Stoppen Sie das Video-Streaming trasmitevideo.stop (); }); } </ script> </ body> </ html>
Um die Programmierung zu vereinfachen, gibt es Frameworks und APIs, mit denen wir die Programmierung optimieren können. In diesem Fall können wir Simplest WebRTC oder PeerJS erwähnen , die die RTC-Funktionalität einiger Browser wie Chrome und Firefox nutzen.
Die WebRTC-API deckt alle Schritte zur Übertragung von Live-Video, Audio und Daten ab. Diese API abstrahiert die WebRTC-API mit einfachen Funktionen und implementiert Methoden, um diese einfacher aufzurufen.
Wir können Simplest WebRTC von seiner offiziellen Website herunterladen , dann die Zip-Datei entpacken und auf einen lokalen Server wie Xampp oder einen Remote-Server kopieren.
Als nächstes erstellen wir den Quellcode mit der Javascript-Datei von api simplewebrtc.bundle.js . Wir benötigen alle js-Dateien, wenn wir die Anwendung in einem anderen Ordner erstellen möchten.
<! DOCTYPE html> <html> <head> <title> SimpleWebRTC-Videokonferenz </ title> <link rel = "stylesheet" type = "text / css" href = "styles.css"> </ head> <body> <h1 id = "title"> Videokonferenz </ h1> <form id = "createRoom"> <input id = "sessionInput" /> <button type = "submit"> Videokonferenz erstellen </ button> </ form> <div class = "container"> <video id = "localVideo" style = "Höhe: 150 Pixel;" oncontextmenu = "return false;"> </ video> <div id = "localVolume" class = "volume"> </ div> </ div> <div id = "remotes"> </ div> <script src = "// ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </ script> <script src = "simplewebrtc.bundle.js"> </ script> <script> // URL des Konferenzraums erstellen var salaconferencia = location.search && location.search.split ('?') [1]; // Wir stellen die Verbindung zu unserer Videokamera her var webrtc = new SimpleWebRTC ({ // Geben Sie die ID des zu verbindenden Elements an localVideoEl: 'localVideo', // Geben Sie die ID des Remote-Videoelements an remoteVideosEl: '', // Wir greifen auf unsere Videokamera zu, wenn sie erkannt wird autoRequestMedia: true, Debug: falsch, detectSpeakingEvents: true, autoAdjustMic: false }); // Wenn Sie unseren Camcorder starten webrtc.on ('readyToCall', function () { // Der Link zum Videokonferenzraum wartet auf Benutzer if (Konferenz) webrtc.joinRoom (Konferenz); }); Funktion showVolume (el, volume) { if (! el) return; if (volume <-45) {// wir variieren das Volumen -45 und -20 el.style.height = '0px'; } else if (Volumen> -20) { el.style.height = '100%'; } else { el.style.height = '' + Math.floor ((volume + 100) * 100/25 - 220) + '%'; } } webrtc.on ('channelMessage', Funktion (Peer, Label, Daten) { if (data.type == 'volume') { showVolume (document.getElementById ('volume_' + peer.id), data.volume); } }); webrtc.on ('videoAdded', Funktion (Video, Peer) { console.log ('Video hinzugefügt', Peer); var remotes = document.getElementById ('remotes'); if (Fernbedienungen) { var d = document.createElement ('div'); d.className = 'container'; d.id = 'container_' + webrtc.getDomId (peer); d.appendChild (Video); var vol = document.createElement ('div'); vol.id = 'volume_' + peer.id; vol.className = 'volume'; video.onclick = function () { video.style.width = video.videoWidth + 'px'; video.style.height = video.videoHeight + 'px'; }; d.appendChild (vol); remotes.appendChild (d); } }); webrtc.on ('videoRemoved', Funktion (Video, Peer) { console.log ("Video entfernt", Peer); var remotes = document.getElementById ('remotes'); var el = document.getElementById ('container_' + webrtc.getDomId (peer)); if (Fernbedienungen && el) { remotes.removeChild (el); } }); webrtc.on ('volumeChange', Funktion (Lautstärke, Schwelle) { //console.log('own volume ', volume); showVolume (document.getElementById ('localVolume'), volume); }); // Da wir dies zweimal benutzen, setzen wir es hierher Funktion setRoom (Name) { $ ('form'). remove (); $ ('h1'). text (name); $ ('# subTitle'). text ('Link zum Beitritt:' + location.href); $ ('body'). addClass ('active'); } if (Konferenz) { setRoom (Konferenzraum); } else { $ ('form'). submit (function () { var = $ ('# sessionInput'). val (). toLowerCase (). replace (/ s / g, '-'). replace (/ [^ A-Za-z0-9 _ -] / g, ''); webrtc.createRoom (val, function (err, name) { console.log ('create conference room cb', Argumente); var newUrl = location.pathname + '?' + name; if (! err) { history.replaceState ({foo: 'bar'}, null, newUrl); setRoom (name); } else { console.log (err); } }); return false; }); } var button = $ ('# screenShareButton'), setButton = function (bool) { button.text (bool? 'Bildschirm freigeben': 'Freigabe beenden'); }; webrtc.on ('localScreenStopped', function () { setButton (true); }); setButton (true); button.click (function () { if (webrtc.getLocalScreen ()) { webrtc.stopScreenShare (); setButton (true); } else { webrtc.shareScreen (function (err) { if (err) { setButton (true); } else { setButton (false); } }); } }); </ script> </ body> </ html>
Als Nächstes erstellen wir die Datei styles.css
.containment { Position: relativ; Breite: 200px; Höhe: 150px; } Videorecorder { Position: absolut; Breite: 100%; Höhe: 100%; } .volume { Position: absolut; Breite: 5px; Höhe: 0px; rechts: 0px; unten: 0px; Hintergrundfarbe: # 12acef; }
Wir testen das Web in einem Browser. Als Erstes geben Sie den Namen des Konferenzraums an, den Sie erstellen möchten:
Wir klicken auf die Schaltfläche Videokonferenz erstellen und es wird ein Link erstellt, den wir mit anderen Personen teilen können, wenn wir eine Domain haben.
Wenn wir uns im lokalen Modus befinden, können wir den Link in einen anderen Browser kopieren und sehen, wie wir uns mit der Videokonferenz verbinden.
Für dieses Beispiel wurden Firefox Version 41 und Chrome Version 45 verwendet. Die WebRTC- Technologie erleichtert die Kommunikation und ermöglicht es jedem Benutzer, eigene Videokonferenzanwendungen zu erstellen.
