Una solución para implementar efectos de video RTC en la web

necesidad

Con el desarrollo de la tecnología RTC, el umbral de la comunicación de audio y video se ha reducido a un nivel muy bajo. Terminal móvil, terminal de PC, terminal web y applet, puede realizar llamadas de audio y video de alta calidad simplemente levantando un dispositivo. Y con el desarrollo de Internet móvil (4G, 5G) y la evolución de la tecnología de IA, la demanda de comunicación por audio y video de las personas ya no es audible ni visible, sino que comienza a buscar métodos de comunicación más interactivos y novedosos , como belleza, accesorios, graffiti interactivo y más. La expansión de las direcciones de comunicación de audio y video surge una tras otra, especialmente en los escenarios de ToC.

Desde un punto de vista técnico, la tecnología de procesamiento de video nativa no es infrecuente. Muchas bibliotecas como OpenCV ya han creado su propia captura de rostros, procesamiento de imágenes y otras capacidades de código abierto, y puede implementar un procesamiento de video simple creando una nueva interfaz con pocas llamadas al proyecto. Sin embargo,  el lado web siempre está detrás del nativo en esta área . No importa qué tan poderosa sea la tecnología front-end cuando aboga por el rendimiento, solo puede decir que está cerca del nativo. El cuello de botella es evidente aquí (JavaScript no está diseñado para la velocidad de carrera).

Selección técnica

 esquema ActiveX 

Alrededor de 2000, con el fin de derrotar al navegador emergente Netscape, Microsoft esperaba desarrollar una solución que permitiera que su oficina de productos líder se ejecutara en IE, que es la tecnología ActiveX. Una tecnología que suena fantástica de forma nativa interactúa a la perfección con el navegador. La combinación de ActiveX y Office finalmente frenó el desarrollo de Netscape, lo que permitió que IE dominara la corriente principal durante mucho tiempo.

ActiveX es en realidad un componente COM desarrollado en base al estándar COM. Escribe su GUID en el registro con la ruta de instalación durante la instalación. JavaScript puede cargar fácilmente este objeto nativo a través del GUID y completarlo con una sintaxis de punto simple. llamada . Debido a que es un componente COM, la llamada a la interfaz en realidad se realiza directamente en la memoria, que no es diferente del proyecto nativo que llama a una biblioteca dinámica (DLL). Aún más escandaloso, ActiveX admite la representación nativa de UserControl directamente en el navegador. MFC, QT, winform, WPF, el marco de desarrollo de interfaz de Windows principal puede completar el desarrollo de ActiveX. (Tengo que admitir que con el vigoroso desarrollo de Internet móvil, la tecnología de desarrollo en la PC ha comenzado a decaer, y estos términos son mucho menos familiares que los términos flutter, vue, etc.). Nos quedamos atónitos después de completar una llamada de desarrollo para un complemento de ActiveX usando WPF. Es una solución que suena omnipotente, ¿por qué se ha vuelto tan impopular? La respuesta es: seguridad.

Debido a la alta autoridad y flexibilidad de ActiveX, puede "hacer lo que quieras" en la PC del usuario. Agregar o modificar arbitrariamente el contenido del archivo local, acceder a la información de inicio de sesión, ejecutar archivos ejecutables externos directamente en el navegador, etc., solo escucharlos hace que la gente se sienta espeluznante. A principios del siglo 21, cuando Internet recién estaba emergiendo, la gente generalmente no entendía qué eran las computadoras e Internet. No sé cuántas cuentas de juegos fueron robadas porque los usuarios hicieron clic para permitir que los complementos ActiveX fueran cargado.

Por lo tanto  , los navegadores como Chrome y Firefox han comenzado a abandonar gradualmente su soporte para ActiveX. Incluso el propio Microsoft ya no es compatible con ActiveX en Edge  . Solo el viejo y deteriorado IE todavía lo admite tenazmente. Desafortunadamente, el navegador IE también ha detenido el mantenimiento y está a punto de retirarse de la lista de sistemas Windows preinstalados. Como la tendencia de los tiempos, las soluciones ActiveX también están destinadas a sumergirse en la tendencia del desarrollo tecnológico.

ActiveX es bueno, especialmente para bancos, gobiernos, etc. que usan redes privadas, y los problemas de seguridad de ActiveX les parecen menos mortales. Sin embargo, no podemos diseñar nuestra nueva solución para una tecnología moribunda, o ActiveX será una alternativa en nuestro escenario particular, pero nunca puede ser nuestra primera opción.

Solución de ensamblaje web 

Con el declive de ActiveX, existe una necesidad urgente de una nueva solución para complementar las necesidades de interacción nativa con el front-end.En este momento,  nació WebAssembly  .

El código C, C++, Rust se puede compilar en WebAssembly a través de Emscripten, y el archivo .wasm obtenido por compilación es un código de bytes que JavaScript puede llamar.

Al ver esto, esta solución es muy emocionante, así que comenzamos a construir nuestro propio WebAssembly. En la actualidad, los marcos más maduros que admiten WebAssembly incluyen Unity, QT, etc. El proceso de compilación de WebAssembly con Unity y QT es muy simple, puede crear fácilmente una demostración de prueba y la interfaz nativa también está bien representada en el front-end. , que me recuerda a ActiveX una vez Glory!

A continuación, abramos la cámara y hagamos un procesamiento de video simple. Esperando escribir un buen código, tratando de ejecutarlo en el front-end, no se puede hacer. Eche un vistazo al sitio web oficial de QT WebAssembly:

Se ha determinado que el marco QtMultimedia es inutilizable en WebAssembly. Incluso ellos mismos no han averiguado qué módulos están disponibles y cuáles no. En nuestra opinión, hay innumerables "pozos" por delante.

Para garantizar la seguridad, WebAssembly se ejecuta en un entorno de espacio aislado y sus permisos están limitados. Hablamos en broma sobre cómo WebAssembly es un paso atrás de ActiveX para los desarrolladores (y ciertamente una mejora para los usuarios).

Con una actitud científica y rigurosa, decidimos buscar otra forma de verificar esta solución hasta el final. El video fue recopilado por el front-end y procesado por WebAssembly para verificar su viabilidad final y la velocidad de ejecución casi nativa que se jacta en Internet.

Afortunadamente, OpenCV proporciona una versión de WebAssembly, solo para que podamos hacer una verificación simple. Cree un proyecto nativo e integre la versión C ++ de OpenCV, y la versión WebAssembly de OpenCV ha proporcionado oficialmente una dirección de prueba, lo que nos ahorra mucho trabajo.

Tomando el filtrado bilateral como ejemplo, se selecciona un conjunto de parámetros adecuados para comparación y verificación, el diámetro se selecciona como 15 y el sigma se selecciona como 30.

Envíame un mensaje privado para recibir los últimos y más completos materiales de aprendizaje y mejora de audio y video de C++ , incluidos ( C/C++ , Linux , FFmpeg , webRTC , rtmp , hls , rtsp , ffplay , srs )

WebAssembly se comporta de la siguiente manera:

La velocidad de fotogramas del video se ha reducido a 4FPS (flotando hacia arriba y hacia abajo), y la apariencia obviamente se ha estancado. 

El rendimiento nativo es el siguiente:

La velocidad de fotogramas del video permanece en 16FPS (flotante hacia arriba y hacia abajo). Aunque la experiencia se ve afectada, este valor aún cumple con los requisitos de transmisión RTC (la transmisión RTC generalmente se considera normal entre 13 y 30 FPS).

Continúe agregando el procesamiento de filtro gaussiano en el original y seleccione la longitud y el ancho del kernel gaussiano para que sea 3, y el rendimiento es el siguiente:

La velocidad de fotogramas del video aún se mantiene en 14FPS (flotando hacia arriba y hacia abajo), el impacto en el rendimiento es insignificante y aún cumple con los requisitos de transmisión RTC (la transmisión RTC generalmente se considera normal entre 13 y 30 FPS).

El rendimiento de otros parámetros es aproximadamente el mismo que el de este conjunto de pruebas, al menos en el procesamiento de video de escenas especiales, el rendimiento de WebAssembly es mucho más bajo que el nativo. Por supuesto, puede ser que el soporte de OpenCV para WebAssembly no sea lo suficientemente bueno, pero este grupo de comparaciones y el soporte de permisos de WebAssembly nos han decepcionado un poco.

 Esquema de conexión local de WebSocket 

No existe una definición sistemática de esta solución. La idea de implementación es usar el proyecto nativo como servidor, y el front-end interactúa con él a través del puerto localhost. HTTP (admite una gama más amplia de navegadores) se puede usar para pequeños volúmenes de datos. , y WebSocket (WebSocket) se puede usar para grandes volúmenes de datos (IE10 y superior) . Para RTC, si se envía en el front-end, es posible que WebSocket deba realizar varias M transferencias de datos por segundo para enviar fotogramas de video desde el proceso nativo al front-end, y el front-end también debe procesarse a través de WebGL.

Aunque se trata de una comunicación local, la velocidad de fotogramas de captura desbordada y los problemas de sincronización de audio y vídeo que puede causar la adquisición de audio y vídeo en dos procesos nos hacen preocuparnos por su rendimiento, por lo que no intentamos demasiado.

 Solución de cámara virtual 

Múltiples escenarios no funcionarán, así que mantengamos ActiveX en nuestras mentes. COM tiene una gran ventaja en el rendimiento que otras soluciones no tienen. Otras soluciones no son tan buenas como las nativas o defienden que el rendimiento es cercano al nativo, mientras que COM es el rendimiento nativo real.

Después de investigar un poco sobre COM, descubrimos que hay otros caminos para satisfacer nuestras necesidades, es decir,  componentes COM combinados con DirectShow para enviar video a cámaras analógicas , ¡para completar el día y la noche en el nivel de adquisición! Si esta solución es factible, el producto final no solo se usará en nuestra escena actual, sino que todas las aplicaciones que usan DirectShow para hacer llamadas de cámara podrán usar nuestra tecnología de procesamiento de video encapsulado.

Cree un proyecto COM, encapsule la realización de la imagen humana digital AI, llame a la interfaz DirectShow para completar el registro de la cámara virtual y la transmisión de video, y escriba un script por lotes para registrar nuestro COM en la ruta del sistema. Completó una serie de trabajos, probó con muchas herramientas de prueba de cámara y los resultados fueron sorprendentemente buenos.

El siguiente es el efecto del acceso a la cámara virtual después del procesamiento con máscara AR:

la propuesta definitiva

Después de mucha verificación de la solución, decidimos utilizar la solución de cámara virtual como nuestra solución final, que es impecable en términos de rendimiento y acoplamiento.

Estructura del programa 

implementación clave 

1.  Primero, creamos un nuevo proyecto de biblioteca dinámica llamado WebCamCOM y usamos interfaces como CoCreateInstance y RegisterFilter para registrar nuestro objeto como DirectShow Filter.

2.  Use la interfaz de memoryapi.h para pasar los datos que definimos. Aquí pasamos la información de la duración, el ancho y la marca de tiempo del video, además de los datos básicos del video.

3.  Mediante el uso de CreateMutex para garantizar la seguridad de acceso cuando se comparte la memoria.

4.  Cree otro proyecto de biblioteca dinámica llamado SharedImageWrapper y defina solo una interfaz externa.

5.  De acuerdo con el parámetro de entrada shouldRotate, decida si necesita voltear en la dirección vertical (para adaptarse a Unity).

6.  Después de simplemente procesar los datos, los datos de video también pasan al filtro DirectShow que definimos a través de la interfaz memoryapi.h.

7.  La capa superior integra la interfaz SendImage para enviar los datos RGB recopilados a DirectShow.

8.  Escriba un script por lotes y use el comando regsvr32 para registrar WebCamCom en el registro del sistema con privilegios de administrador.

pregunta 

1. Unity recopila la textura de abajo hacia arriba, y si usa sus datos directamente, estará al revés, por lo que debe hacer un giro vertical.

2. Unity puede elegir entre la representación OpenGL y la representación Direct3D Se requieren dos conjuntos de interfaces para el análisis del controlador de textura de los dos métodos de representación.

OpenGL:

D3D:

panorama

• Aunque DirectShow es actualmente el marco principal para operar cámaras, el uso del marco Media Foundation se ha convertido en una tendencia. Considere adaptar la interfaz al marco Media Foundation en el futuro (basado en el desarrollo del controlador de cámara USB también es una solución factible).

• En la actualidad, las capacidades admitidas por el procesamiento de video giran principalmente en torno a imágenes humanas digitales, belleza y fondos virtuales. Basado en el marco existente, se pueden combinar tecnologías de procesamiento de video más interesantes.

• El complemento en sí se puede combinar con el esquema WebSocket (HTTP) para abrir algunas interfaces , como los parámetros de belleza y la forma de la imagen humana digital, de modo que el front-end pueda completar silenciosamente la configuración del complemento.

• El complemento puede integrar una interfaz de configuración práctica y puede ver el efecto de vista previa arrastrando y soltando.