Hoy hablar茅 sobre el m贸dulo de
hardware en el SDK de Voximplant Web. Este m贸dulo reemplaz贸 el antiguo sistema de administraci贸n de dispositivos de audio y video. Pero primero, un poco sobre la administraci贸n de dispositivos en la pila de WebRTC y por qu茅 se necesita todo esto.
En raras ocasiones, los usuarios finales tienen varios micr贸fonos. O hay varios altavoces: por ejemplo, altavoces normales y auriculares bluetooth; o altavoz del tel茅fono y altavoz para tel茅fono inteligente.
Pero dos c谩maras en el mundo moderno son muy comunes. En tabletas y tel茅fonos: regular y frontal. En port谩tiles: incorporados y mejores externos. Y as铆 sucesivamente. El usuario puede estar muy molesto si, por defecto, se selecciona un conjunto de dispositivos incorrecto y no puede cambiarlos de ninguna manera. Esta es la primera aplicaci贸n de administraci贸n de medios en WebRTC.
La segunda aplicaci贸n es el ajuste de audio y video. Todo tipo de cancelaci贸n de eco, reducci贸n de ruido, configuraci贸n de la resoluci贸n de video, frecuencia de cuadros, balance de blancos y otras cosas que su navegador admite espec铆ficamente.
Anteriormente, para la administraci贸n de dispositivos, proporcionamos la interfaz de
restricciones , y el desarrollador tuvo que establecer todas las restricciones y par谩metros de la solicitud de medios de forma independiente. Aqu铆 hay un peque帽o ejemplo de una solicitud de audio y video totalmente personalizada:
const myConstraints = { audio:{ sampleSize: 16, channelCount: 2, noiseSuppression: true, echoCancellation: false }, video:{ width: { min: 640, ideal: 1920, max: 1920 }, height: { min: 400, ideal: 1080 }, aspectRatio: 1.777777778, frameRate: { max: 30 }, facingMode: { exact: "user" } } };
Esto proporciona una flexibilidad incre铆ble al configurar audio y video, pero siempre hay un "PERO". Como mostraron las estad铆sticas de la encuesta de soporte, los clientes b谩sicamente no utilizaron esta opci贸n, ya que somos una plataforma amigable y estamos acostumbrando a los usuarios a la simplicidad. Aquellos que se atrevieron a usar esto, a menudo se dispararon todos justo por encima de la rodilla, ya que los navegadores tienen una ligera incompatibilidad en este punto en el espacio.
Ahora est谩 claro c贸mo llegamos a esa vida. Es hora de ponerse manos a la obra: un vistazo r谩pido al m贸dulo; para una lectura detallada, dejar茅 un enlace a la
documentaci贸n en nuestro sitio web .
El punto de entrada a este m贸dulo es
StreamManager . Hist贸ricamente, [la imagen con el elefante.jpg], que muchas partes de nuestro SDK web son singleton, y esta clase no es una excepci贸n: puede obtener una instancia utilizando la funci贸n
get () . Hay un mar de razones para esto, pero m谩s sobre eso en otro momento, tal vez.
const streamManager = VoxImplant.Hardware.StreamManager.get();
Con StreamManager, puede habilitar o deshabilitar el video local y
conseguir transmisiones de medios para 茅l, de hecho, eso es todo. El punto de entrada no es muy grande cuando se miran interfaces externas.
(async () => { try{ console.log('[WebSDK] '); await streamManager.showLocalVideo(); console.log('[WebSDK] '); await streamManager.hideLocalVideo(); console.log('[WebSDK] !'); } catch(e){ console.log('[WebSDK] - . , ?!'); console.error(e); } })();
Un hecho interesante sobre el video local: el video local no se transmite al interlocutor de ninguna manera. Por ejemplo, al usuario se le puede mostrar una imagen en HD y transmitir 320 * 240, o viceversa, si un video local est谩 oculto en una esquina. A continuaci贸n se explicar谩 c贸mo hacer un truco as铆.
Hay 3 eventos en StreamManager:
Usando la funci贸n getLocalMediaRenderers () , es 煤til obtener enlaces a elementos DOM con video local si no ha guardado el objeto para usted.
streamManager.getLocalMediaRenderers().forEach(renderer => { cont elementOfDOM = renderer.element; elementOfDOM.addEventListener('on42',doSomething,true); });
Pasemos a la configuraci贸n de video (la m谩s deliciosa, mire sus manos). De repente
CameraManager . De nuevo, un singleton con la aburrida funci贸n
get () :
const cameraManager= VoxImplant.Hardware.CameraManager.get();
驴Qu茅 configuraciones podemos establecer? Veamos la interfaz
CameraParams :
Otras 3 opciones son responsables del tama帽o del video:
隆Volvamos a CameraManager y apliquemos la configuraci贸n! En el interior hay 2 captadores y 2 configuradores de configuraci贸n:
Todo lo que con "Predeterminado" es la configuraci贸n "predeterminada", como puede suponer. Se utilizar谩n para recibir video local, para nuevas llamadas entrantes y salientes.
Y ahora el enfoque prometido:
console.log('[WebSDK] .'); await cameraManager.setDefaultVideoSettings({ frameWidth:320, frameHeight:240, frameRate:12 }); await streamManager.showLocalVideo(); cameraManager.setDefaultVideoSettings({ frameWidth:640, frameHeight:480, frameRate:25 }); const newCall = client.call('mySchoolFriendBoris');
Emparejar con
Call en el nombre es un poco m谩s complicado. Estas funciones est谩n dise帽adas para recibir y establecer preferencias durante una llamada que ya est谩 en curso. Al cambiar la configuraci贸n, se
producir谩 el evento
CallEvents.Updated .
console.log('[WebSDK] .'); cameraManager.setCallVideoSettings(newCall,{ frameWidth:320, frameHeight:240, frameRate:12 }); newCall.on(VoxImplant.CallEvents.Updated,e => { console.log('[WebSDK] .'); });
Quedan dos funciones de CameraManager. Muy potente pero sofisticado. La enumeraci贸n
VideoQuality tiene tres significados interesantes:
- VIDEO_QUALITY_HIGH;
- VIDEO_QUALITY_MEDIUM;
- VIDEO_QUALITY_LOW.
Una pregunta l贸gica: 鈥淚gor! Si el SDK web conoce la mejor, la peor y la calidad promedio, 驴por qu茅 no hay un m茅todo para enumerar las resoluciones compatibles con la c谩mara web? Tsimes no lo sabe.
Y para averiguarlo, debe ordenar literalmente todos los permisos posibles. Lo que logr茅 obtener es compatible. Suena bastante simple, pero en realidad lleva varios minutos. Por lo tanto, no podemos hacer esto en la inicializaci贸n de WebSDK, por ejemplo. Para que pueda hacer esto en el momento que sea m谩s c贸modo para el usuario, si es que desea hacerlo, y hay
testResolutions . Ser铆a bueno guardar el resultado del trabajo de la funci贸n en localStorage y luego cargarlo a trav茅s de
loadResolutionTestResult cuando la p谩gina se
vuelva a cargar:
console.log('[WebSDK] , WebSDK .'); const testResults = await cameraManager.testResolutions(); localStorage.setItem('defaultCameraResolutionTestResults',JSON.stringify(testResolutions));
Por 煤ltimo, pero no menos importante,
AudioDeviceManager . La clase es muy similar a
CameraManager . Solo para sonido, su configuraci贸n se refleja en la interfaz
AudioParams :
- estricto : verdadero es responsable de seguir estrictamente su voluntad;
- inputId - selecci贸n de micr贸fono. Se puede obtener una lista de todos los micr贸fonos a trav茅s de AudioDeviceManager.getInputDevices ;
- outputId - elecci贸n de altavoces. Esta opci贸n solo funciona en Chrome, otros navegadores la ignorar谩n. Puede obtener una lista de dispositivos a trav茅s de getOutputDevices ;
- noiseSuppression - reducci贸n de ruido. Por defecto, la reducci贸n de ruido est谩 habilitada y funciona muy bien. Pero la p茅rdida de voz parcial puede ocurrir si el usuario trabaja en una habitaci贸n donde habla mucho, por ejemplo, en un centro de llamadas. El filtro puede cometer un peque帽o error y cortar el exceso. Si tiene problemas de esta naturaleza, vale la pena establecer esta opci贸n en falso ;
- echoCancellation : elimina el eco del micr贸fono. Debe deshabilitarse junto con la opci贸n anterior;
- autoGainControl : incluye un mecanismo para ajustar autom谩ticamente la ganancia del micr贸fono integrada en el sistema operativo. La opci贸n no tiene efectos secundarios, pero su funcionamiento depende en gran medida del sistema operativo y el hardware. A veces puede que simplemente no funcione y la ganancia ser谩 constante, lo que tambi茅n es bueno.