🕤 👩🏾‍🌾 🍒 Microphones, captures d'écran et vidéo locale: comment le Voximplant Web SDK contrôle les médias dans un navigateur 👨🏾‍🎤 👦🏿 🚠

Aujourd'hui, je vais parler du module Matériel du Voximplant Web SDK. Ce module a remplacé l'ancien système de gestion des périphériques audio et vidéo. Mais d'abord, un peu sur la gestion des appareils dans la pile WebRTC et pourquoi tout cela est nécessaire.

Les utilisateurs finaux ont rarement plusieurs microphones. Ou il y a plusieurs haut-parleurs: par exemple, des haut-parleurs ordinaires et des écouteurs Bluetooth; ou haut-parleur de téléphone et haut-parleur pour smartphone.

Mais deux caméras dans le monde moderne sont très courantes. Sur tablettes et téléphones: régulier et frontal. Sur les ordinateurs portables: intégré et mieux externe. Et ainsi de suite et ainsi de suite. L'utilisateur peut être très contrarié si, par défaut, le mauvais ensemble d'appareils est sélectionné et qu'il ne peut en aucun cas les modifier. Il s'agit de la première application de gestion des médias dans WebRTC.

La deuxième application est le réglage fin de l'audio et de la vidéo. Toutes sortes d'annulation d'écho, de réduction du bruit, de définition de la résolution vidéo, de la fréquence d'images, de la balance des blancs et d'autres éléments pris en charge spécifiquement par votre navigateur.

Auparavant, pour la gestion des appareils, nous fournissions l'interface des contraintes , et le développeur devait définir toutes les restrictions et les paramètres de la demande de média de manière indépendante. Voici un petit exemple d'une demande audio et vidéo entièrement personnalisée:

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" } } };

Cela donne une flexibilité incroyable lors de la configuration audio et vidéo, mais il y a toujours un «MAIS». Comme l'ont montré les statistiques de l'enquête d'assistance, les clients n'ont pratiquement pas utilisé cette option, car nous sommes une plateforme conviviale et nous habituons les utilisateurs à la simplicité. Ceux qui ont osé l'utiliser, se sont souvent tiré dessus juste au-dessus du genou, car les navigateurs ont une légère incompatibilité à ce stade de l'espace.

Maintenant, il est clair comment nous sommes arrivés à une telle vie. Il est temps de passer aux choses sérieuses: un bref aperçu du module; pour une lecture détaillée, je vais laisser un lien vers la documentation sur notre site .

Le point d'entrée de ce module est StreamManager . Historiquement, [l'image avec elephant.jpg], de nombreuses parties de notre SDK Web sont singleton, et cette classe ne fait pas exception: vous pouvez obtenir une instance en utilisant la fonction get () . Il y a une multitude de raisons à cela, mais plus à ce sujet une autre fois, peut-être.

 const streamManager = VoxImplant.Hardware.StreamManager.get();

À l'aide de StreamManager, vous pouvez activer ou désactiver la vidéo locale et
pour obtenir des flux multimédias pour lui - en fait, c'est tout. Le point d'entrée n'est pas très grand lorsque l'on regarde des interfaces externes.

 (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 fait intéressant sur la vidéo locale: la vidéo locale n'est en aucun cas transmise à l'interlocuteur. Par exemple, l'utilisateur peut voir une image en HD et transmettre 320 * 240, ou vice versa, si une vidéo locale est cachée dans un coin. Vous trouverez ci-dessous comment monter un tel tour.

Il y a 3 événements dans StreamManager:

DevicesUpdated - appelé lorsque l'utilisateur a connecté / déconnecté le microphone ou la caméra;
MediaRendererAdded - a ajouté une nouvelle vidéo locale ou capture d'écran avec des aperçus;
MediaRendererRemoved - vidéo locale ou captures d'écran supprimées avec des aperçus.

À l'aide de la fonction getLocalMediaRenderers () , il est utile d'obtenir des liens vers des éléments DOM avec une vidéo locale si vous n'avez pas enregistré l'objet pour vous.

 streamManager.getLocalMediaRenderers().forEach(renderer => { cont elementOfDOM = renderer.element; elementOfDOM.addEventListener('on42',doSomething,true); });

Passons aux paramètres vidéo (les plus délicieux, surveillez vos mains). Soudainement CameraManager . Encore une fois, un singleton avec la fonction get () ennuyeuse:

 const cameraManager= VoxImplant.Hardware.CameraManager.get();

Quels paramètres pouvons-nous définir? Regardons l'interface CameraParams :

strict - true dira littéralement au navigateur: "Je sais ce que je fais, n'essayez pas de réparer quelque chose si tout va mal!" S'il est faux , le navigateur corrigera humblement les courbes de paramètres;
cameraId - sélection du périphérique de la caméra. Vous pouvez choisir dans la liste qui renvoie getInputDevices ()
```
 const allMyDevices = await cameraManager.CameraManager.getInputDevices(); 
```
frameRate - directement responsable de la fréquence d'images. Cette option permet soit d'économiser du trafic, soit d'améliorer la qualité. Je ne recommanderais pas de définir cette valeur au-dessus de 30 et en dessous de 10 sans un test préliminaire pour chaque utilisateur et un repli. En dehors de cette plage, toutes les caméras ne fonctionnent pas.
faceMode - true retourne l'image horizontalement. L'option est assez niche, car Pour afficher une vidéo locale, nous faisons déjà des images inversées.

Trois autres options sont responsables de la taille de la vidéo:

vous pouvez utiliser soit videoQuality (nous avons également préparé une énumération VideoQuality avec un ensemble d'autorisations à la mode)
ou vous pouvez dimensionner manuellement en pixels via frameHeight et frameWidth

Revenons à CameraManager et appliquons les paramètres! À l'intérieur, il y a 2 getters et 2 setters de paramètres:

Tout ce qui avec "Default" est les paramètres "par défaut", comme vous pouvez le deviner. Ils seront utilisés pour recevoir des vidéos locales, pour les nouveaux appels entrants et sortants.
Et maintenant l'objectif promis:

 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');

Le couplage avec Call dans le nom est un peu plus compliqué. Ces fonctions sont conçues pour recevoir et définir des préférences lors d'un appel déjà en cours. Lors de la modification des paramètres, l'événement CallEvents.Updated se produit .

 console.log('[WebSDK]      .'); cameraManager.setCallVideoSettings(newCall,{ frameWidth:320, frameHeight:240, frameRate:12 }); newCall.on(VoxImplant.CallEvents.Updated,e => { console.log('[WebSDK]    .'); });

Il reste deux fonctions de CameraManager. Très puissant mais sophistiqué. L' énum VideoQuality a trois significations intéressantes:

VIDEO_QUALITY_HIGH;
VIDEO_QUALITY_MEDIUM;
VIDEO_QUALITY_LOW.

Une question logique: «Igor! Si le SDK Web connaît la meilleure, la pire et la qualité moyenne, alors pourquoi n'y a-t-il pas de méthode pour répertorier les résolutions prises en charge par la webcam?! ” Tsimes ne sait pas.

Et pour le savoir, vous devez littéralement trier toutes les autorisations possibles. Ce que j'ai réussi à obtenir est pris en charge. Cela semble assez simple, mais en fait cela peut prendre plusieurs minutes. Par conséquent, nous ne pouvons pas le faire dans l'initialisation de WebSDK, par exemple. Pour que vous puissiez le faire au moment le plus confortable pour l'utilisateur - si vous voulez le faire - et il y a testResolutions . Il serait intéressant d'enregistrer le résultat du travail de la fonction dans localStorage et de le charger ultérieurement via loadResolutionTestResult lors du rechargement de la page:

 console.log('[WebSDK]      ,  WebSDK   .'); const testResults = await cameraManager.testResolutions(); localStorage.setItem('defaultCameraResolutionTestResults',JSON.stringify(testResolutions));

Enfin et surtout, AudioDeviceManager . La classe est très similaire à CameraManager . Pour le son uniquement, vos paramètres sont reflétés dans l'interface AudioParams :

strict - true est responsable de suivre strictement votre volonté;
inputId - sélection du microphone. Une liste de tous les microphones peut être obtenue via AudioDeviceManager.getInputDevices ;
outputId - choix des enceintes. Cette option ne fonctionne que dans Chrome, les autres navigateurs l'ignoreront. Vous pouvez obtenir une liste de périphériques via getOutputDevices ;
noiseSuppression - réduction du bruit. Par défaut, la réduction du bruit est activée et fonctionne très bien. Mais une perte de voix partielle peut se produire si l'utilisateur travaille dans une pièce où il parle beaucoup, par exemple dans un centre d'appels. Le filtre peut simplement faire une petite erreur et couper l'excédent. Si vous rencontrez des problèmes de cette nature, il vaut la peine de définir cette option sur false ;
echoCancellation - supprime l'écho du microphone. Il doit être désactivé avec l'option précédente;
autoGainControl - comprend un mécanisme pour ajuster automatiquement le gain du microphone intégré au système d'exploitation. L'option n'a aucun effet secondaire, mais son fonctionnement dépend fortement du système d'exploitation et du matériel. Parfois, cela peut tout simplement ne pas fonctionner et le gain sera constant, ce qui est également bon.

Microphones, captures d'écran et vidéo locale: comment le Voximplant Web SDK contrôle les médias dans un navigateur

More articles: