Escribir un chat de video para una red local o dominar WebRTC en 2020

En el contexto de eventos bien conocidos , no había nada que hacer como parte de mi crecimiento profesional, estoy tratando de dominar WebRTC. Como sabe, la mejor manera de aprender es hacer algo al menos potencialmente útil. Y al mismo tiempo y compartir experiencia de intercambio de crear y rellenar conos.



Como tarea, se decidió realizar una sencilla aplicación que permita realizar llamadas de audio y video entre dos (por ahora) dispositivos estacionarios o móviles en una red local sin necesidad de conectarse a Internet. La instalación y configuración inicial de dicha aplicación debe ser lo suficientemente simple como para que cualquier enikey avanzado pueda manejarla sin ningún problema y mostrar a los usuarios cómo hacer llamadas, y si tiene las habilidades adecuadas, podría realizar pequeñas mejoras en términos de diseño y capacidades. El cliente debe ser cualquier dispositivo equipado con dispositivos de entrada y salida multimedia y que le permita ejecutar un navegador adecuado (Firefox o Chrome, probando las versiones de mayo).



Como se hace



Como sabe, la tecnología WebRTC para la comunicación entre dos suscriptores sugiere utilizar un objeto del tipo RTCPeerConnection, y la tarea principal del desarrollador es organizar el intercambio de información de texto (oferta SDP, respuesta SDP, candidato ICE) entre la persona que llama y la persona que llama. En otras palabras, el desarrollador primero debe crear un chat de texto con una API para JavaScript del navegador y luego adjuntarle la parte multimedia: eventos y métodos RTCPeerConnection para transmitir y procesar la recepción de datos.



La elección de las tecnologías para la implementación y la API de chat de texto queda en manos del desarrollador. Muchos (y en particular Mozilla en su ejemplo oficial de RTCPeerConnection) prefieren usar la API de WebSocket y el servidor correspondiente, por ejemplo, en Node.JS. Pero, teniendo en cuenta nuestra tarea de simplificar al máximo la implementación, decidí comenzar con no complicar demasiado la aplicación del servidor, especialmente para entregar páginas y scripts al dispositivo cliente, se necesitaba un servidor web adicional. Por lo tanto, la API decidió utilizar xmlHttpRequest con llamadas periódicas de clientes al mismo servidor web. No puedo decir que esto funcione perfectamente en cuanto al consumo de recursos (y batería) del dispositivo cliente y la ausencia de frenos, pero funciona exactamente si se tienen en cuenta algunos matices a la hora de desarrollar. Tal vez,en alguna próxima versión agregaré un servidor WebSocket y rediseñaré la API en consecuencia, pero no de una vez.



Se decidió convertir el servidor en parte de Lazarus para Windows; Las capacidades de red las proporciona el paquete Synapse. De alguna manera, esto es probablemente una perversión, y tuve que jugar seriamente y conseguir algunos golpes para que todo funcionara como se esperaba. Pero un exe, dos dlls (bibliotecas OpenSSL), archivos de un certificado SSL autofirmado y una clave y algunos archivos de configuración (más estáticos) le permiten no preocuparse mucho por el nivel de tecnología del servidor y la forma en que se inicia la aplicación. Probé la primera versión de este servidor en una compilación de 32 bits incluso en una Asus Eee PC 900 de 2009 bajo Windows XP, aunque no estuvo exento de trampas en la forma de un reemplazo reciente de un SSD superlento normal por uno más moderno y voluminoso. Esto es en términos de rendimiento. Y la "instalación" del servidor es descomprimir el archivo zip descargado en cualquier carpeta adecuada,editar el archivo JSON de la configuración de cuentas de usuario y ejecutar el archivo exe del programa (también hay un botón en la ventana, pero puede especificar un parámetro en la línea de comando para iniciar el servidor web inmediatamente). De una forma u otra, estoy pensando en una parte del servidor más seria, ya que tengo esa experiencia. Todo tiene su tiempo.



Además de la organización real de la API, nuestro servidor sirve archivos estáticos para navegadores (páginas web de inicio de sesión y chat, estilos, imágenes, scripts, tono de llamada). En general, intenté prescindir de las bibliotecas de terceros tanto como sea posible, pero debido al hecho de que mi diseño y el diseño html no son tan atractivos, decidí usar jQuery.UI y, en consecuencia, jQuery, que el servidor web también envía como estático. Todos los archivos estáticos están en una subcarpeta separada de la carpeta del programa; por supuesto, se pueden observar e incluso cambiar si se desea y con las habilidades adecuadas. En JavaScript, el código está comentado y puede aprender de él si es necesario.



Cómo organizar la comunicación



Para organizar la comunicación, lo principal es seleccionar y combinar los dispositivos cliente (computadoras, laptops, teléfonos inteligentes, tabletas) y una máquina Windows con un "servidor" (también puede actuar como cliente) en una red común. Desde dispositivos cliente, probé varios teléfonos inteligentes económicos lanzados en los últimos años en Android a partir de la versión 7, así como una computadora y computadora portátil en Windows 10, incluso con dos cámaras web conectadas; se desempeñaron bien. Para divertirme, incluso probé la primera versión en Orange Pi One con Lubuntu (o Kubuntu, no lo recuerdo desde el principio) del fabricante. Sorprendentemente, incluso funcionó, a pesar de que el video se ralentizó y la página de chat se abrió por poco tiempo (ni siquiera quiero hablar sobre cargar el sistema y abrir el navegador).



Nuestro servidor se instala en la máquina de escribir "servidor" de la forma anterior y se configuran las cuentas de usuario. Cada usuario debe tener un inicio de sesión con una contraseña.



Todo funciona así. Los usuarios ingresan a la máquina de escribir "servidor" con un navegador que usa el protocolo https, usando su dirección IP o nombre de dominio. Allí ingresan su nombre de usuario-contraseña y van a la página de chat con una lista de contactos. Cuando hace clic en un contacto, se abre una ventana de diálogo con el historial de mensajes de texto (por cierto, el servidor lo almacena solo en RAM, aún no se puede almacenar en un archivo), un campo para un chat y un formulario de llamada de audio y video con casillas de verificación para seleccionar audio y (o) video. Para realizar una videollamada, el usuario marca las casillas de verificación correspondientes, presiona el botón de llamada y confirma el permiso para el navegador. El suscriptor llamado comienza a emitir un tono de llamada y se abre un formulario de respuesta con las mismas banderas. Después de hacer clic en el botón de respuesta, el navegador también solicitará permiso para acceder a los dispositivos multimedia. Entonces se abre una ventana de llamada.



No puedo decir que tenga mucha experiencia trabajando con software para videoconferencias, consultoría de video, etc., pero, por ejemplo, en Google Hangouts en una computadora (como en dispositivos móviles, no lo sé) no vi la oportunidad de convertir a mi amado en pantalla completa, que en teoría puede ser necesario en consultas remotas cuando necesitas ver bien lo que le estás mostrando a tu interlocutor (por ejemplo, a través de la cámara trasera de tu smartphone). En este chat, en el diálogo de la llamada, decidí hacer dos pestañas con el video: el interlocutor y el propio usuario. Desde la versión actual en la pestaña de usuario, además del video en sí, hay campos para seleccionar una cámara y un micrófono; puede cambiar sus valores sobre la marcha durante una conversación. Quizás le sea útil a alguien.



Ahora describiré brevemente los conos llenos de desarrollo; tal vez ayude a alguien mientras desarrolla y depura sus soluciones.



Características modernas del trabajo e implementación de WebRTC y, en general, trabajo con multimedia en JavaScript.



Aquí, brevemente; los detalles se pueden encontrar en los comentarios en el archivo javascript estático / js / videoChat.js



  1. Chrome seguro, además, posiblemente, otros navegadores también le permiten trabajar con getUserMedia solo en sitios accesibles a través de HTTPS
  2. La lista de dispositivos de entrada de audio y video se puede obtener solo después de una llamada exitosa a getUserMedia
  3. El inicio automático de la reproducción de sonido usando JavaScript (a través del método play () del elemento de video o audio html) es posible solo después de que el usuario muestra actividad en el sitio, por ejemplo, hace clic en algún elemento de control.
  4. promise setLocalDescription , offer. RTCPeerConnection ICE-, .
  5. « » getUserMedia RTCPeerConnection. , , .
  6. Muchas descripciones de dispositivos móviles se refieren a la propiedad FaceMode para seleccionar cámaras delanteras o traseras. De hecho, no sé cómo en dispositivos antiguos, pero en este chat en teléfonos inteligentes probados, el cambio funciona incluso sin usar esta propiedad. Pero teniendo estrictamente en cuenta la cláusula 5.


Lo más probable es que la lista no sea exhaustiva. Creo que surgirán muchas más en el curso del desarrollo futuro. Si alguien sabe cómo sortear las restricciones y, en consecuencia, simplifica el programa o trabaja con él, escriba en los comentarios.



Desarrollador de aplicaciones de red Lazarus big shot



Synapse actualmente solo admite bibliotecas OpenSSL 1.0.x; en 1.1 muchas cosas ya se implementan de manera diferente, otros incluso nombres de bibliotecas. Además, no basta con colocar los archivos DLL en la carpeta del programa. También necesitamos un archivo de configuración (openssl.cnf), cuya ruta se establece a través de la variable de entorno OPENSSL_CONF.



Donde puedo descargar



Las distribuciones del programa para Win32 y Win64 y el código fuente del lado del servidor en Lazarus están disponibles en la página del programa en el enlace www.lubezniy.ru/soft/videochat



PD: Por cierto, ¿alguien sabe cómo se puede usar Lazarus para automatizar la construcción desde las mismas fuentes? dos exe diferentes - para Win32 y Win64? El compilador cruzado de Win64 a Win32 está en funcionamiento, pero cambiar las opciones en el proyecto cada vez no es correcto.



PPS: Quién lo probó, por favor comparta sus impresiones en los comentarios.



All Articles