Heute werde ich über das
Hardwaremodul im Voximplant Web SDK sprechen. Dieses Modul ersetzte das alte Verwaltungssystem für Audio- und Videogeräte. Aber zuerst ein wenig über die Geräteverwaltung im WebRTC-Stack und warum all dies benötigt wird.
In seltenen Fällen verfügen Endbenutzer über mehrere Mikrofone. Oder es gibt mehrere Lautsprecher: zum Beispiel normale Lautsprecher und Bluetooth-Kopfhörer; oder Telefonlautsprecher und Freisprecheinrichtung für Smartphone.
Aber zwei Kameras in der modernen Welt sind sehr verbreitet. Auf Tablets und Handys: normal und frontal. Auf Laptops: eingebaut und besser extern. Und so weiter und so fort. Der Benutzer kann sehr verärgert sein, wenn standardmäßig der falsche Satz von Geräten ausgewählt ist und er diese in keiner Weise ändern kann. Dies ist die erste Medienverwaltungsanwendung in WebRTC.
Die zweite Anwendung ist die Feinabstimmung von Audio und Video. Alle Arten von Echokompensation, Rauschunterdrückung, Einstellung der Videoauflösung, Bildrate, Weißabgleich und andere Dinge, die Ihr Browser speziell unterstützt.
Zuvor haben wir für die Geräteverwaltung die
Einschränkungsschnittstelle bereitgestellt, und der Entwickler musste alle Einschränkungen und Parameter der Medienanforderung unabhängig festlegen. Hier ist ein kleines Beispiel für eine vollständig angepasste Audio- und Videoanforderung:
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" } } };
Dies bietet eine unglaubliche Flexibilität beim Einrichten von Audio und Video, aber es gibt immer ein "ABER". Wie die Statistiken der Support-Umfrage zeigten, haben Kunden diese Option grundsätzlich nicht genutzt, da wir eine benutzerfreundliche Plattform sind und die Benutzer an die Einfachheit gewöhnen. Diejenigen, die es gewagt haben, dies zu verwenden, haben sich oft alle knapp über dem Knie erschossen, da Browser an dieser Stelle im Weltraum eine leichte Inkompatibilität aufweisen.
Jetzt ist klar, wie wir zu einem solchen Leben gekommen sind. Es ist Zeit, zur Sache zu kommen: ein kurzer Blick auf das Modul; Für eine ausführliche Lektüre werde ich einen Link zur
Dokumentation auf unserer Website hinterlassen.
Der Einstiegspunkt in dieses Modul ist
StreamManager . Historisch gesehen [das Bild mit der Datei elephant.jpg] sind viele Teile unseres Web-SDK Singleton, und diese Klasse ist keine Ausnahme: Sie können eine Instanz mit der Funktion
get () abrufen. Dafür gibt es ein Meer von Gründen, aber vielleicht ein anderes Mal mehr darüber.
const streamManager = VoxImplant.Hardware.StreamManager.get();
Mit StreamManager können Sie lokales Video und aktivieren oder deaktivieren
Medienströme für ihn zu bekommen - in der Tat ist das alles. Der Einstiegspunkt ist bei der Betrachtung externer Schnittstellen nicht sehr groß.
(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); } })();
Eine interessante Tatsache zum lokalen Video: Das lokale Video wird in keiner Weise an den Gesprächspartner übertragen. Beispielsweise kann dem Benutzer ein Bild in HD angezeigt werden und 320 * 240 übertragen oder umgekehrt, wenn ein lokales Video in einer Ecke versteckt ist. Im Folgenden erfahren Sie, wie Sie einen solchen Trick aufdrehen.
Es gibt 3 Ereignisse in StreamManager:
Mit der Funktion
getLocalMediaRenderers () ist es hilfreich, Links zu DOM-Elementen mit lokalem Video
abzurufen , wenn Sie das Objekt nicht in sich selbst gespeichert haben.
streamManager.getLocalMediaRenderers().forEach(renderer => { cont elementOfDOM = renderer.element; elementOfDOM.addEventListener('on42',doSomething,true); });
Fahren wir mit den Videoeinstellungen fort (am leckersten, achten Sie auf Ihre Hände). Plötzlich
CameraManager . Wieder ein Singleton mit der langweiligen Funktion
get () :
const cameraManager= VoxImplant.Hardware.CameraManager.get();
Welche Einstellungen können wir überhaupt vornehmen? Schauen wir uns die
CameraParams- Oberfläche an:
Weitere 3 Optionen sind für die Größe des Videos verantwortlich:
Kehren wir zu CameraManager zurück und übernehmen die Einstellungen! Im Inneren befinden sich 2 Getter und 2 Einstellungssetter:
Alles, was Sie mit "Standard" tun, sind die "Standardeinstellungen", wie Sie vielleicht erraten haben. Sie werden verwendet, um lokales Video für neue eingehende und ausgehende Anrufe zu empfangen.
Und jetzt der versprochene Fokus:
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');
Das Pairing mit
Call im Namen ist etwas komplizierter. Diese Funktionen dienen zum Empfangen und Festlegen von Einstellungen während eines bereits laufenden Anrufs. Beim Ändern der Einstellungen tritt das Ereignis
CallEvents.Updated auf .
console.log('[WebSDK] .'); cameraManager.setCallVideoSettings(newCall,{ frameWidth:320, frameHeight:240, frameRate:12 }); newCall.on(VoxImplant.CallEvents.Updated,e => { console.log('[WebSDK] .'); });
Zwei Funktionen von CameraManager bleiben erhalten. Sehr kraftvoll aber raffiniert. Die Aufzählung
VideoQuality hat drei interessante Bedeutungen:
- VIDEO_QUALITY_HIGH;
- VIDEO_QUALITY_MEDIUM;
- VIDEO_QUALITY_LOW.
Eine logische Frage: „Igor! Wenn das Web SDK die beste, schlechteste und durchschnittliche Qualität kennt, warum gibt es dann keine Methode zum Auflisten der von der Webcam unterstützten Auflösungen ?! ” Tsimes weiß es nicht.
Und um dies herauszufinden, müssen Sie alle möglichen Berechtigungen buchstäblich sortieren. Was ich bekommen habe, wird unterstützt. Es klingt ziemlich einfach, aber tatsächlich dauert es bis zu einigen Minuten. Daher können wir dies beispielsweise bei der Initialisierung von WebSDK nicht tun. Damit Sie dies in dem Moment tun können, der für den Benutzer am bequemsten ist - wenn Sie dies überhaupt möchten - und es gibt
testResolutions . Es wäre schön, das Ergebnis der Arbeit der Funktion in localStorage zu speichern und es später über
loadResolutionTestResult zu laden, wenn die Seite neu geladen wird:
console.log('[WebSDK] , WebSDK .'); const testResults = await cameraManager.testResolutions(); localStorage.setItem('defaultCameraResolutionTestResults',JSON.stringify(testResolutions));
Zu guter Letzt
AudioDeviceManager . Die Klasse ist
CameraManager sehr ähnlich. Nur für Sound werden Ihre Einstellungen in der
AudioParams- Oberfläche
angezeigt :
- strict - true ist dafür verantwortlich, dass Sie Ihren Willen strikt befolgen.
- inputId - Mikrofonauswahl. Eine Liste aller Mikrofone kann über AudioDeviceManager.getInputDevices abgerufen werden.
- outputId - Auswahl der Lautsprecher. Diese Option funktioniert nur in Chrome, andere Browser ignorieren sie. Sie können eine Liste der Geräte über getOutputDevices abrufen .
- Rauschunterdrückung - Rauschunterdrückung. Standardmäßig ist die Rauschunterdrückung aktiviert und funktioniert hervorragend. Ein teilweiser Sprachverlust kann jedoch auftreten, wenn der Benutzer in einem Raum arbeitet, in dem er viel spricht, z. B. in einem Callcenter. Der Filter kann nur einen kleinen Fehler machen und den Überschuss abschneiden. Wenn Sie Probleme dieser Art haben, sollten Sie diese Option auf false setzen .
- echoCancellation - Entfernt das Echo vom Mikrofon. Es sollte zusammen mit der vorherigen Option deaktiviert werden.
- autoGainControl - enthält einen Mechanismus zum automatischen Anpassen der im Betriebssystem integrierten Mikrofonverstärkung. Die Option hat keine Nebenwirkungen, aber ihr Betrieb hängt stark vom Betriebssystem und der Hardware ab. Manchmal funktioniert es einfach nicht und die Verstärkung ist konstant, was auch gut ist.