"Bei uns jetzt chatten!" Wir haben alle diese Pop-ups auf populären Webseiten gesehen, so dass Sie wissen, dass, wenn Sie eine Frage haben oder Hilfe benötigen, gibt es jemanden (oder etwas), die Sie sich wenden können. Manchmal aber Chat ist einfach nicht das richtige Medium für immer Ihre Frage beantwortet oder die Unterstützung, die Sie brauchen. Für eine höhere Genauigkeit Erfahrung, es bis zur Video-Schritt ist die beste Option. In diesem Beitrag werde ich Ihnen zeigen, wie Twilio Video und ein wenig JavaScript und PHP verwenden, können Sie einen Video-Chat-Plugin für Wordpress bauen, die beliebtesten CMS-System der Welt. Nie baute ein Wordpress-Plugin? Keine Sorge, es ist ein geradlinig und einfach. Wollen Sie gerade für das fertige Produkt zu gehen? Kein Problem. Ergreifen Sie den vollständigen Code für das Plugin aus. Ansonsten lassen Sie uns den Bau erhalten! Erste Einrichtung Bevor wir ein paar Punkte zu sammeln, wir müssen, die wir verwenden werden unser Plugin bauen lassen Codierung. Zunächst werden Sie eine Installation von Wordpress müssen die Plugins ermöglicht. Dies kann entweder sein, oder aus der Ferne auf einem HostingAnbieter wie. Leider ist WordPress.com können eigene Plugins zu laden. Als Nächstes werden Sie ein Twilio-Konto. Wenn Sie nicht bereits eine haben! Mit einem Wordpress installieren und Twilio Konto in der Hand können wir bauen unser Plugin beginnen. Beginnen Sie mit Struktur Wordpress-Plugins sind Bits von PHP-Code, JavaScript und CSS, die die Funktionalität Ihrer Wordpress-Website erweitern und ausbauen können. Wenn Sie ein Plugin installieren, stellt Wordpress, das Vermögen dieses Plugin in einem neuen Verzeichnis unter dem / wp-content / plugins / Ordner Ihrer Wordpress-Installation. Das ist, wo wir bauen unser neues Plugin zu starten, indem Sie den Ordner und Dateistruktur zu schaffen, die wir brauchen. Erstellen Sie einen neuen Ordner mit dem Namen Twilio-Video unter dem Plugin-Verzeichnis. In diesem Verzeichnis eine Ordner- und Dateistruktur, die die Liste unten übereinstimmt. Denn jetzt können Sie die Dateien leer lassen, werden wir ihnen fügen Sie Inhalt, wie wir entlang gehen. / Wp-content / plugins / Twilio-Video Twilio-video.php randos.php Twilio-video.html / js Twilio-Video.js / cssTwilio-video.css / lib Mit der Basis Plugin-Struktur an Ort und Stelle beginnen wir einige Inhalte hinzufügen. Besorgen Sie sich die CSS-Stile für das Plugin von der und legen Sie sie in der Twilio-video.css Datei. Jetzt ist auch eine gute Zeit, um die Twilio-php Helfer Bibliothek zu unserem Projekt hinzuzufügen. Da Twilio Video noch in der Betaphase ist, müssen Sie die Hilfebibliothek zu greifen entweder die oder aus der. Sobald Sie die Helfer Bibliothek Dateien kopieren Sie sie in / lib Ordner. Schließlich werden wir noch eine letzte vorbereitete Ressource benötigen. Ein zufälliger Name Picker, die wir später verwenden wird, eine Identität zu jedem Kunden zuweisen, die an einen Agenten verbindet. Öffnen Sie randos.php und den Code aus dem Drop hinein. Genial. Wir sind nun bereit, einen Code für unser Plugin zu schreiben. Zunächst brauchen wir eine Plugin-Header zu erstellen, die einfach sind Metadaten, die Wordpress nutzt ein paar Sachen über unser Plugin kennen. Das Metadaten geht in die Twilio-video.php. Öffnen Sie diese Datei in Ihrem bevorzugten Editor und fügen Sie den folgenden: PHP <? Php / ** * Plugin Name: TwilioVideo * / ?> 1 2 3 4 5 <? Php / ** * Plugin Name: Twilio Video * /> Das Plugin Name Header ist der einzige erforderliche Header, aber es gibt, dass Sie noch mehr Details über Ihre Plugin Wordpress zur Verfügung zu stellen verwenden kann? . An diesem Punkt ist die PHP-Datei jetzt ein gültiges Wordpress-Plugin, und Sie können in Ihrem Wordpress-Admin-Interface Kopf und. Das Plugin tut nichts, doch so ist es ziemlich langweilig. Lässt Gewürz es, indem Wordpress die Twilio Video JavaScript SDK und unser Plugin-Benutzeroberfläche auf jede Seite es macht hinzuzufügen. Zurück in Twilio-video.php, rufen Sie die Funktion, um die Aktion zu verkabeln. Mit dieser Aktion können Sie uns sagen, Wordpress über eine Funktion in unserem Plugin definiert, dass wir es nennen wollen, wenn es herauszufinden, welche Ressourcen in der gerenderten Webseite aufzunehmen. In dieser Funktion werden wir die wp_enqueue_style und wp_enqueue_script Funktionen aufrufen Wordpress über die Skripte und Stile unser Plugin auf der Webseite zu informieren, umfassen muss. PHP <? Php / ** * Plugin Name: TwilioVideo * / define ( 'TWILIO_VIDEO_PLUGIN_URL', plugin_dir_url (__ FILE__)); add_action ( 'wp_enqueue_scripts', 'twilio_video_enqueue_scripts'); Funktion twilio_video_enqueue_script () { wp_enqueue_style ( 'Twilio-Video-css ", TWILIO_VIDEO_PLUGIN_URL' css / Twilio-video.css. '); wp_enqueue_script ( 'jquery'); wp_enqueue_script ( 'Twilio-common', ' wp_enqueue_script ( 'Twilio-Gespräche', ' wp_enqueue_script ( 'Twilio-Video-js', TWILIO_VIDEO_PLUGIN_URL 'js / Twilio-Video.js.'); } ?> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <? Php / ** * Plugin Name: Twilio Video * / define ( 'TWILIO_VIDEO_PLUGIN_URL', plugin_dir_url (__FILE__)); add_action ( 'wp_enqueue_scripts', 'twilio_video_enqueue_scripts'); Funktion twilio_video_enqueue_script () {wp_enqueue_style ( 'Twilio-Video-css ", TWILIO_VIDEO_PLUGIN_URL' css / Twilio-video.css. '); wp_enqueue_script ( 'jquery');wp_enqueue_script ( 'Twilio-common', '); wp_enqueue_script ( 'Twilio-Gespräche', '); wp_enqueue_script ( 'Twilio-Video-js', TWILIO_VIDEO_PLUGIN_URL 'js / Twilio-Video.js.'); }?> Für unser Plugin wir Einreihen, dass einzelne Twilio-video.css Datei, jQuery, die und die Twilio-Video.js Datei, die wir zuvor erstellt haben. Sobald die Skripte und CSS in HTML gerendert sind, können wir die API und Stile enthalten sie verwenden, um unser Plugin UI erstellen. Öffnen Sie die Twilio-video.html in Ihrem Texteditor und fügen Sie die folgende HTML: XHTML <Div id = "Twilio-video-Container"> <Div id = "Agent-Prompt"> <P> Sprechen Sie mit einem Agenten </ p> <Button id = "enter-Warteschlange"> Verbinden </ button> </ Div> <Div id = "wait-Interstitial" style = "display: none"> <P> Verbinden Sie an einen Agenten </ p> </ Div> <Div id = "Gespräch-view" style = "display: none;"> <Div id = "Remote-Medien"> </ div> <Div id = "Kontrollen"> <Div id = "Vorschau"> <divid = "local-Medien"> </ div> </ Div> </ Div> <! - / Kontrollen -> </ Div> </ Div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div id = "Twilio-video-Container"> <div id = "Agent-Prompt"> Sprechen Sie mit einem Agenten <button id = "enter-Warteschlange"> Verbinden </ button> <div id = "wait-Interstitial" style = "display: none"> Verbinden Sie an einen Agenten <div id = "Gespräch-view" style = "display: none; " > <Div id = "remote-media"> <div id = "Kontrollen"> <div id = "Vorschau"> <div id = "local-media"> <! - / Kontrollen -> die Datei speichern und öffnen Sie Ihre Wordpress-Seite in einem Browser. Sie sollten das Plugin zeigen sich als ein feststehendes Element in der rechten unteren Ecke der Seite zu sehen. Schauen wir uns die HTML-Vorlage sehen wir hinzugefügt. Es verfügt über drei Grundteile dazu: A, die den Benutzer auffordert, ein Mittel zur Unterstützung zu sprechen. A, die dem Benutzer sagt sie den Anschluss an einen Agenten. A, das den Benutzer zeigt, undMittels Video-Streams so dass sie zu unterhalten. Wenn der Benutzer mit dem Plugin-Benutzeroberfläche interagiert, werden wir JavaScript verwenden, um diese verschiedenen Elemente ein- und ausblenden. Öffnen Sie die Twilio-Video.js Datei, in der wir, dass Client-Seite Logik zu unserem Plugin hinzufügen werde. Um zu beginnen, müssen wir zunächst jQuery verwenden, um eine asynchrone Anforderung zu machen, den Inhalt des Twilio-video.html Datei zu erhalten und hängen Sie dann das HTML an das Element der Web-Seite. JavaScript jQuery (function () { jQuery.ajax ({url: "/wp-content/plugins/twilio-video/twilio-video.html"}). getan (function (Inhalt) { jQuery (Inhalt) .appendTo ( 'body'); }); }); 1 2 3 4 5 jQuery (function () {jQuery Ajax ({url:.. "/wp-content/plugins/twilio-video/twilio-video.html"}) Done (function (Inhalt) {jQuery (Inhalt) . appendTo ( 'body');});}); Speichern Sie die Datei und laden Sie Ihre Wordpress-Seite in Browser bis das Plugin UI sehen zum Leben. Nun, da wir ein bisschen UI für unser Plugin haben, lassen Sie uns einige Interaktivität hinzufügen.Zurück in unserer JavaScript-Datei, eine Click-Handler auf die Eingabe-Warteschlange Taste. Wenn diese Schaltfläche geklickt wird, werden wir das Plugin UI zur nächsten Stufe wechseln den Benutzer wissen zu lassen, dass wir sie an einen Agenten sind zu verbinden. JavaScript jQuery (function () { jQuery.ajax ({url: "/wp-content/plugins/twilio-video/twilio-video.html"}). getan (function (Inhalt) { jQuery (Inhalt) .appendTo ( 'body'); document.getElementById ( 'eingeben-Warteschlange'). Onclick = function () { jQuery ( '# agent-Prompt') wechseln (). jQuery ( '# wait-interstitiellen') wechseln (). }; }); }); 1 2 3 4 5 6 7 8 9 10 11 jQuery (function () {jQuery Ajax ({url:.. "/wp-content/plugins/twilio-video/twilio-video.html"}) Durchgeführt (function (Inhalt ) {jQuery (Inhalt) appendTo ( 'body');.. Dokument getElementById ( 'eingeben-Warteschlange') Onclick = function () {jQuery ( '# agent-Eingabeaufforderung') wechseln ();.. jQuery ( '#WAIT -interstitial ').Umschalten ( ) ; }; }); }); Aktualisieren Sie Ihren Browser, klicken Sie auf die Schaltfläche "Verbinden". Große, sind Sie mit einem Agenten verbunden zu werden! Nein, nicht wirklich, weil wir Twilio Video noch nicht verdrahtet haben. Um eine Video-Unterhaltung zwischen dem Benutzer und einem Agenten wir ein neues Gespräch Client für den Benutzer zu erstellen müssen starten und dass Client für ein Gespräch Einladungen beginnen zu hören. Wir wollen zu tun, dass nur dann, wenn der Benutzer auf "Connect" sagen uns, sie mit einem Agenten zu sprechen wollen. ein Gespräch-Client zu erstellen benötigt man eine, die die Identität des Kunden und den Anmeldeinformationen sie mit Twilio authentifizieren müssen kapselt. ein Zugriffstoken zu erstellen, müssen Twilio Geheimnisse. Um zu helfen, diese Geheimnisse zu bewahren gut, Geheimnis, wir werden das Token auf dem Server generieren und setzen Sie es über eine REST-API, die von unseren JavaScript aufgerufen werden kann. Wordpress bereits entlarvt sich selbst und macht es wirklich einfach, Ihre eigenen Endpunkte, um es hinzuzufügen. Pop öffnen Twilio-video.php wieder und verwenden Sie die add_action Funktionverbinden, um die Aktion auf. PHP define ( 'TWILIO_VIDEO_PLUGIN_URL', plugin_dir_url (__ FILE__)); add_action ( 'wp_enqueue_scripts', 'twilio_video_enqueue_scripts'); add_action ( 'rest_api_init', 'twilio_video_register_api_routes'); 1 2 3 define ( 'TWILIO_VIDEO_PLUGIN_URL', plugin_dir_url (__FILE__)); add_action ( 'wp_enqueue_scripts', 'twilio_video_enqueue_scripts'); add_action ( 'rest_api_init', 'twilio_video_register_api_routes'); Diese Aktion wird aufgerufen, wenn Wordpress seine REST API initialisiert und gibt uns die Möglichkeit, unsere eigenen Wege zu registrieren, um die Funktion. PHP Funktion twilio_video_register_api_routes () { $ Namespace = 'Twilio-Video-api / v1'; register_rest_route ($ namespace '/ Twilio-Video-Token /', array ( 'Methoden' => 'GET', 'Rückruf' => 'twilio_video_get_token') ); } 1 2 3 4 5 6 7 Funktion twilio_video_register_api_routes () {$ namespace = 'Twilio-Video-api / v1'; register_rest_route ($ namespace '/ Twilio-Video-Token /', array ('Methoden' => 'GET', 'Rückruf' => 'twilio_video_get_token')); } Hier haben wir Wordpress erzählen eine Route zu registrieren, die Anfragen auf dem Pfad / wp-json / Twilio-Video-api / v1 / Twilio-Video-Token / GET reagiert. Wenn eine Anfrage an diese URL gemacht wird, ruft Wordpress die twilio_video_get_token Funktion, die die Twilio-php-Helfer-Bibliothek verwendet eine neue Access-Token zu erzeugen, die eine der Client in einer Video-Unterhaltung teilnehmen ermöglicht enthält. Dieses Token zusammen mit einem zufällig gewählten Identität als JSON-Objekt von der Funktion zurückgegeben. PHP Funktion twilio_video_get_token () { require_once ( 'lib / Twilio / Twilio.php'); require_once ( 'randos.php'); // Ein Bezeichner für Ihre Anwendung - kann alles sein, Sie möchten $ AppName = 'TwilioVideoDemo'; // Einen zufälligen Benutzernamen für den Verbindungs ​​Benutzer wählen $ Identity = randomUsername (); Erstellen Sie Zugriffstoken //, die wir serialisiert und an den Client senden $ Token = newServices_Twilio_AccessToken ( / * $ TWILIO_ACCOUNT_SID, * / / * $ TWILIO_API_KEY, * / / * $ TWILIO_API_SECRET, * / 3600, $ Identität ); // Zugriff gewähren zu Conversations $ Zuschuss = new Services_Twilio_Auth_ConversationsGrant (); $ Einräumung> setConfigurationProfileSid (/ * $ TWILIO_CONFIGURATION_SID * /); $ Token-> addGrant ($ Zuschuss); $ Return = array ( 'Identität' => $ Identität, 'Token' => $ Token-> toJWT (), ); $ Response = new WP_REST_Response ($ return); return $ Antwort; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 Funktion twilio_video_get_token () {require_once ( 'lib / Twilio / Twilio.php') ; require_once ( 'randos.php'); // Ein Bezeichner für Ihre Anwendung - kann alles sein, das Sie $ möchten appName = 'TwilioVideoDemo'; // Einen zufälligen Benutzernamen für den Benutzer beim $ identity = randomUsername () wählen; // Erstellen Zugriffstoken,die wir an den Client $ token = neue Services_Twilio_AccessToken (/ * $ TWILIO_ACCOUNT_SID, * / / * $ TWILIO_API_KEY, * / / * $ TWILIO_API_SECRET * / 3600, $ Identität) serialisiert und zu senden; // Zugriff gewähren zu Conversations $ Zuschuss = new Services_Twilio_Auth_ConversationsGrant (); $ Zuschuss -> setConfigurationProfileSid (/ * $ TWILIO_CONFIGURATION_SID * /); $ Token -> addGrant ($ Zuschuss); $ Return = array ( 'Identität' => $ Identität, 'token' => $ Token -> toJWT ()); $ Response = new WP_REST_Response ($ return); return $ Antwort; } Mit dem Code an Ort und Stelle das letzte, was wir tun müssen, ist unsere Twilio Geheimnisse hinzuzufügen. Die Geheimnisse, die wir benötigen, sind: Konto SID API Key SID API geheime Konfigurationsprofil SID alle diese Geheimnisse zu bekommen wir benötigen, um den Abschnitt des Twilio Developer Kopf auf mehr als Konsole. Sobald es Ihr Konto SID greifen: Weiter um eine neue erstellen. Ein Konfigurationsprofil ist ein Satzvon Konfigurationswerten für webhooks und andere Optionen für programmierbare Video. Schau mal in einen angezeigten Namen für Ihre Konfigurationsprofil, klicken Sie auf Speichern und das RTC-Profil SID greifen: Endlich haben wir eine brauchen. Diese werden verwendet, um unsere Conversation-Client mit Twilio zu authentifizieren. Erstellen Sie eine neue API-Schlüssel und greifen seine SID und Secret: Legen Sie Ihre Twilio Geheimnisse in den PHP-Code und geben Sie Ihrem neuen Wordpress-REST-API einen Spin-Endpunkt von einem Browser auf die API-URL darauf eröffnen. Fantastisch! Jetzt können wir auf die Schaffung dieses Video Gespräch zurück. Zurück in Twilio-Video.js werden wir für jQuery erreichen wieder eine neu generierte Zugriffstoken zu greifen von der API wir gerade erstellt haben. Mit Hilfe dieser Token, erstellen Sie ein neues Objekt in die Objekte Konstruktor übergeben. JavaScript var conversationsClient; jQuery (function () { jQuery.ajax ({url: "/wp-content/plugins/twilio-video/twilio-video.html"}). getan (function (Inhalt) { jQuery (Inhalt) .appendTo ( 'body'); document.getElementById ( 'eingeben-Warteschlange'). Onclick= Function () { jQuery ( '# agent-Prompt') wechseln (). jQuery ( '# wait-interstitiellen') wechseln (). }; jQuery.getJSON ( '/ wp-json / Twilio-Video-api / v1 / Twilio-Video-Token', function (data) { Identität = data.identity; var Access = new Twilio.AccessManager (data.token); // Die Browserkonsole Überprüfen Sie Ihre erzeugte Identität zu sehen. // Senden Sie sich einladen, wenn Sie wollen! console.log (Identität); // Erstellen eines Conversations-Client und eine Verbindung zu Twilio conversationsClient = new Twilio.Conversations.Client (Accessmanager); }); }); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 var conversationsClient; jQuery (function () {jQuery Ajax ({url:... "/wp-content/plugins/twilio-video/twilio-video.html"}) durchgeführt (function (Inhalt) {jQuery (Inhalt) appendTo ( 'body '); Dokument getElementByld.( 'Eingeben-Warteschlange'). Onclick = function () {jQuery ( '# agent-Eingabeaufforderung'). Umschalten ( ) ; jQuery ( '# wait-interstitiellen'). Umschalten ( ) ; }; jQuery. getJSON ( '/ wp-json / Twilio-Video-api / v1 / Twilio-Video-Token', function (data) {Identität = Datenidentität;.. var Access = new Twilio Accessmanager (Daten-Token);. // prüfen der Browser-Konsole generierten Identität zu sehen // senden ein, um sich laden, wenn Sie wollen Konsole anmelden (Identität);.!. // ein Conversations-Client erstellen und zu Twilio conversationsClient = new Twilio verbinden Gespräche Client (Accessmanager);..} ); }); }); Sobald wir eine Instanz eines Gesprächs-Client haben wir es sagen zu Twilio zu verbinden und für eingehende Gespräche Einladungen beginnen. JavaScript // Erstellen eines Conversations-Client und eine Verbindung zu Twilio conversationsClient = newTwilio.Conversations.Client (Accessmanager); conversationsClient.listen (). dann (function () { console.log ( "zu Twilio Verbunden Zuhören für eingehende Ankündigungen wie." conversationsClient.identity " '"); } Function (Fehler) { console.log ( 'konnte nicht Twilio verbinden:' error.message); }); 1 2 3 4 5 6 7 // ein Conversations-Client erstellen und zu Twilio conversationsClient = new Twilio verbinden. Gespräche. Client (Accessmanager); conversationsClient. listen (). dann (function () {. Konsole anmelden ( "Verbunden mit Twilio für eingehende Ankündigungen Zuhören als." conversationsClient Identität. " '");} function (Fehler) {Konsolenprotokoll (.' konnte nicht Twilio verbinden: 'Fehler . Meldung);}); Der letzte Schritt ist die eingehende Einladung zu handhaben, und der Benutzer und Agenten lassen eigentlich umgekehrt. Um das zu tun wir das Gespräch Clients Ereignishandler verkabeln werden. Dieses Ereignis übergibt uns ein Objekt, das wir den Client automatisch akzeptieren verwenden werden, dieEinladung. Einmal laden die akzeptiert sind wir bereit, den Anruf zu starten, die wir durch den Aufruf der Funktion conversationStarted tun. JavaScript conversationsClient.listen (). dann (function () { console.log ( "zu Twilio Verbunden Zuhören für eingehende Ankündigungen wie." conversationsClient.identity " '"); conversationsClient.on ( 'laden', function (laden) { console.log ( 'Incoming laden aus:' invite.from); invite.accept () dann (conversationStarted). }); } Function (Fehler) { console.log ( 'konnte nicht Twilio verbinden:' error.message); }); 1 2 3 4 5 6 7 8 9 10 11 conversationsClient. listen (). . Dann (function () {Konsole anmelden ( "Verbunden mit Twilio für eingehende Ankündigungen Zuhören als." ConversationsClient Identität. " '");.. ConversationsClient auf (' laden ', function (laden) {Konsolenprotokoll (' Incoming einladen aus: "laden ab); einladen accept () dann (conversationStarted);});},...Funktion (Fehler) {Konsole. log ( 'nicht zu Twilio verbinden konnte: "Fehlermeldung.); }); Die conversationStarted Funktion startet durch das Plugin UI auf die Konversationsansicht tauschen, und mit der Funktion des Objekts durch das bereitgestellte Objekt ausgesetzt ist, leitet das lokale Video-Stream in das Plugin UI. Es beginnt auch für die Veranstaltung zu hören, die der Agent ausgelöst wird, sobald die der Benutzer aufgefordert, beginnt ihr Video zu streamen. Wenn das Ereignis ausgelöst das Plugin die anhängen verwendet Funktion des durch das Objekt ausgesetzt Objekt in das Ereignis übergeben, dass die Video-Stream in das Plugin UI zu lenken. Schließlich startet die Funktion für die Gespräche und getrennt auf Ereignisse, die sie sagen, das Plugin wieder in seinen ursprünglichen Zustand zurückgesetzt werden. JavaScript var activeConversation; var previewMedia; Funktion conversationStarted (Gespräch) { jQuery ( '# wait-interstitiellen') wechseln (). . JQuery ( '# Gespräch-Ansicht') hin- und herzuschalten (); console.log ( 'In einem aktivenKonversation'); activeConversation = Gespräch; Zeichnen // lokale Video, wenn nicht bereits eine Vorschau if (! previewMedia) { conversation.localMedia.attach ( '# local-media'); } // Wenn ein Teilnehmer beitritt, ihr Video auf dem Bildschirm zeichnen conversation.on ( 'participantConnected', function (Teilnehmer) { console.log ( "Teilnehmer" "participant.identity" 'verbunden "); participant.media.attach ( '# Remote-Medien'); }); // Wenn ein Teilnehmer die Verbindung trennt, beachten Sie in log conversation.on ( 'participantDisconnected', function (Teilnehmer) { console.log ( "Teilnehmer" "participant.identity" "getrennt"); }); // Wenn das Gespräch beendet ist, stoppen lokale Video-Capturing conversation.on ( 'getrennt', function (Gespräch) { console.log ( "zu Twilio Verbunden Zuhören für eingehende Ankündigungen wie." conversationsClient.identity " '"); conversation.localMedia.stop (); conversation.disconnect (); activeConversation = null; }); }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 var activeConversation; var previewMedia; Funktion conversationStarted (Gespräch) {jQuery ( '# wait-interstitiellen'). Umschalten ( ) ; jQuery ( '# Gespräch Blick'). Umschalten ( ) ; Konsole. log ( 'In einem aktiven Gespräch'); activeConversation = Gespräch; Zeichnen // lokale Video, wenn nicht bereits if (! PreviewMedia) {Gespräch Vorschau. local. befestigen ( '# local-media'); } // Wenn ein Teilnehmer beitritt, ihr Video auf dem Bildschirm Gespräch zu ziehen. auf ( 'participantConnected', function (Teilnehmer) {Konsolenprotokoll ( "Teilnehmer" "Teilnehmer Identität." "verbunden");... Teilnehmer Medien anhängen ( '# Remote-Medien');}); // Wenn ein Teilnehmer die Verbindung trennt, Notiz im Protokoll Gespräch. auf ('ParticipantDisconnected', function (Teilnehmer) {Konsole. log ( "Teilnehmer" "Teilnehmer Identität." "getrennt"); }); // Wenn das Gespräch beendet ist, stoppen lokale Video-Unterhaltung zu erfassen. auf ( 'getrennt', function (Konversation) {Konsolenprotokoll ( 'conversationsClient Identität. ""). "auf Twilio Verbunden Zuhören für eingehende Ankündigungen wie". ";.. Gespräch local stop ();. Gespräch trennen (); activeConversation = null;}); }; Das schließt den Code für unsere Video-Chat-Plugin. Geben sie eine End-to-End-Test, laden Sie Ihre Browser und drücken Sie die Schaltfläche "Verbinden" die Client-Wartezeit für ein Gespräch zu haben einladen. Öffnen Sie die Entwickler-Konsole in Ihrem Browser und ergreifen Sie die Identität, die es angemeldet war. Wir brauchen das, um die Mittel zu haben, wissen, was Kunden einladen. Um zu testen, die Rolle des Agenten Kopf zurück in den programmierbaren Videoschnitt des EntwicklersKonsole und öffnen Sie die Testtools Abschnitt des Entwicklungstools Lasche nach oben. Diese Test-Tools ermöglichen es Ihnen, ein Gespräch Client erstellen, um Ihre Konfigurationsprofil verbunden und ein anderer Kunde in einem Gespräch einladen. Geben Sie einen Namen wie "Agent" in die Client-Identity-Feld, wählen Sie Ihre Konfigurationsprofil aus dem Dropdown-und klicken Sie auf die Schaltfläche Token generieren. Nun scrollen Sie nach unten, geben Sie die Identität, die Sie zuvor aus der Browser-Konsole gepackt und die Conversation Schaltfläche Erstellen klicken. Dies wird eine Einladung an den Client im Browser-Plugin läuft und eine Video-Unterhaltung zwischen den Test-Tools und Ihre Wordpress-Benutzer starten. Herzliche Glückwünsche! Sie haben jetzt Video-Chat-Plugin, das Sie in jeder Wordpress-Website fallen kann. Wrapup Wordpress zugrunde liegt, eine beeindruckende Anzahl von Websites und verwendet wird alles von persönlichen Blogs zu voll funktionsfähige E-Commerce-Anwendungen zu erstellen. Wenn Sie oder Ihr Unternehmen es als Grundlage für eine Website verwenden, das Hinzufügen Twilio betriebene Chat Video ist einHigh-Fidelity-Art und Weise mit Ihren Kunden zu verbinden. Plugins sind eine gute Möglichkeit, Ihre Website mit dieser Fähigkeit zu verbessern. In diesem Beitrag habe ich gezeigt, wie man mit ein wenig PHP und JavaScript Sie ein Plugin bauen können, die Twilio Video-Chat einfügt. Die Probe wird in diesem Beitrag ist nur der Anfang von dem, was Sie mit Twilio Video und Wordpress tun könnte. und beginnen zu experimentieren. Einige coole Möglichkeiten, wie Sie dieses Projekt fortsetzen könnte, würde Video-Steuerelemente an das Plugin UI das Hinzufügen, die Integration der Wordpress-User-System in das Plugin so der Agent weiß, welcher Kunde anruft, und auch die Integration auf eingehende Videoanrufe auf der rechten Seite verfügbaren Agenten. Ich würde gerne sehen, wo Sie Twilio Video und Wordpress nehmen. Lassen Sie mich ein oder hit me up mit Ihrer Hacks.