En el código anterior, simulamos conexiones entre pares en la misma pantalla, así que no había necesidad de los servidores de señalización STUN/TURN que había mencionado al principio de este tutorial. Además, estábamos ejecutando esto localmente, así que no había necesidad de transmitir datos a través de diferentes pares. Pero, queremos desplegar esta aplicación en la Internet para que dos personas cualquiera puedan utilizar el poder de WebRTC.
Como he mencionado antes en este tutorial, empresas como PubNub ofrecen servicios que hacen el trabajo sucio de señalización para usted. Así que, aprovechemos eso para construir e implementar una nueva y revolucionaria aplicación para que cualquier médico del mundo se conecte y chatee por video con un paciente en el navegador sin necesidad de descargas adicionales. Lo llamaremos DocTalk porque soy un poeta y lo sé.
PubNub hace que sea asombrosamente simple utilizar la WebRTC con llamadas (sin ánimo de hacer juegos de palabras) que han abstraído y simplificado las APIs que has aprendido anteriormente. Ugh, entonces ¿por qué no aprendimos esto primero? ¡Porque tenemos que saber cómo funciona bajo el capó!
Aquí están las dos llamadas al API:
Simple, ¿verdad? Revisa la documentación de PubNub's para las APIs adicionales: https://github.com/stephenlb/webrtc-sdk
Vamos a crear y desplegar la aplicación DocTalk WebRTC usando PubNub's WebRTC demo y Surge, respectivamente.
Al igual que antes, configure los archivos index.html y js como se muestra a continuación (tenga en cuenta que estos archivos están en la carpeta 'doctalk').
doctalk/index.html
<pre>12345678910111213141516<cuerpo<gt;<div></div><formonsubmit=" return selectUser(this);"><inputtype="text"name="username"placeholder="¡Elige un nombre de usuario! "/><inputtype="submit"value="Select"></form><formonsubmit=& quot;return makeCall(this);"><inputtype="text"name="number"placeholder="Enter user to dial! "/><inputtype="submit"value="Call"/></form><scriptsrc="js/main. js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><! — abajo están el código de señalización de PubNub'y las API abstractas que hacen la WebRTC aún más simple –><scriptsrc="https://cdn.pubnub.com/pubnub-3.7.14.min. js"></script><scriptsrc="https://cdn.pubnub.com/webrtc/webrtc.js"></script></body></pre>
html
doctalk/main/main.js
<pre>12345678910111213141516171819202122232425var video =documento.getElementById("video");functionselectUser(form){// configurar el teléfono de fonevar =window.phone=PHONE({ número : form.username. value|||amp;quot;Anónimo", publish_key :'inserte su publish_key aquí', subscribe_key :'inserte su subscribe_key aquí', ssl :(('https:'==documento.location.protocol)?true:false)});// denote el teléfono listo deamp;apos. ready(function(){ form.username.style.background="#55ff5b";});// configurar las llamadas que se ejecutan al inicio o al final de la sesión phone.receive(function(session){ session.connected(function(session){ video.appendChild(session.video);}); session. end(function(session){ video.innerHTML='';});returnnfalse;}functionmakeCall(form){/// marcar un número de teléfono; esto es iniciar la conexión entre pares a través de los servidores STUN/TURN phone.dial(form.number.value);returnnfalse;}</pre>
javascript
Echemos un vistazo a lo que está pasando arriba.
Primero, tomamos el elemento de video del DOM. Luego, establecemos las funciones para seleccionar un nombre de usuario y llamar a alguien más. El teléfono se establece proporcionando sus claves de PubNub, que puede adquirir creando una cuenta gratuita en PubNub e ir a su página de configuración. Luego, las llamadas se adjuntan al teléfono para que éste pueda añadir un video cuando recibe una llamada y lo elimina una vez finalizada la misma. La llamada en sí se hace simplemente marcando con el nombre de usuario para llamar. Muy bueno!
Podemos desplegar este sitio estático con Surge siguiendo los siguientes pasos (esto asume que tienes npm instalado; viene empaquetado con node.js así que si y
¡Está desplegada! Aquí está mi enlace. Selecciona un nombre de usuario, dile a un amigo tu nombre de usuario, y haz que tu amigo te llame!
Si has estado siguiendo el código, despliega tu versión y pruébala.