für HTML5 / webRTC Kamera und Mikrofon testen

Hallo!

Bin neu hier und habe vom Programmieren nahezu keine Ahnung. Auf meiner Website möchte ich meinen Besuchern einen Test zur Verfügung stellen, bei dem die Funktion der eigenen Kamera getestet wird und auch diejenige des Mikrofon. Damit sollen Support-Anfragen verringert werden, wenn eine über Wire, Signal oder Nextcloud aufgebaute webRTC-AV-Verbindung nicht funktioniert.

Für diesen Test fand ich diese sehr hilfreiche Website: webRTC Github Samples Von den dort verfügbaren Samples möchte ich folgende zwei Samples auf derselben Webseite laufen lassen. Mit dem einen wird Kamera und Ton getestet, mit dem zweiten wird der Mikrofonpegel getestet. Das Ganze habe ich nun versucht, hier auf meiner Webseite zu verwirklichen. Dabei fand ich heraus, dass die Scripte aus den beiden Samples miteinander in Konflikt geraten und dass derzeit auf meiner Webseite nur der Kameratest und Tonwiedergabe funktioniert, nicht aber der Aussteuerungstest des Mikrofon.

Die Scripte und CSS-Definitionen liegen bei meiner Muster-Webseite alle im gleichen HTML-Verzeichnis und es ist eine rein statische HTML-Seite, nur zum Ausprobieren gedacht. Es geht hier um drei recht kurze JS-Dateien, in denen der Konflikt entsteht:

main_gum.js
soundmeter.js
soundmeter_main.js

Da ich von Beruf als Heilpraktiker für Psychotherapie unterwegs bin, habe ich leider einfach nicht die Zeit, mich auch noch in Javascript einzuarbeiten, zumal ich das nur jetzt punktuell für diese Aufgabe benötige.

(Mir reicht es völlig aus, wenn ich meine PCs zusammen setzen und die Software pflegen kann, wenn ich meine Websites (Joomla) erstellen und pflegen kann, wenn ich meine Buchhaltung selbst hinbekomme und meine Werbung selbst gestalten kann... alles nebenher zu den ständigen Fortbildungen in Psychotherapie und "nebenher" zu den Therapiestunden)

Daher würde ich mich sehr freuen, wenn ich hier die entscheidenden Tipps bekomme, was ich in den Scripten ändern muss, damit beide Tests gleichzeitig laufen. (Einzeln läuft ja jeder einwandfrei)

Hallo basti1012

Ja, ich habe an "soundmeter_main.js" schon herumgepfuscht, daher die Änderungen / Auskommentierungen. Und ich habe gerade versucht, die von dir genannten Änderungen durchzuführen - leider ohne Erfolg. Schon die Unterscheidungen zwischen Funktion, Variabler usw. fallen mir innerhalb solcher Scripte schwer.

Ich hoffe, ich erwecke hier nicht den Eindruck, aus purer Bequemlichkeit die Hilfe anderer in Anspruch zu nehmen! Aber hier lange herum diskutieren, um meine unqualifizierten Änderungen an Scripten zu korrigieren, bringt's ja auch nicht.

Daher würde ich mich freuen, wenn du mir den Link senden würdest.

Ich danke dir herzlich für dein Engagement und deine Unterstützung!

Clemens

Hallo basti1012!

Leider funzt dein Script in drei Punkten nicht ganz so, wie von mir gedacht:

1.) Statt dass Kamera- und Mikrofon-Erlaubnis vom Browser gemeinschaftlich angefordert werden, wird zunächst - ohne dass der Button geclickt werden muss - die Zugriffserlaubnis auf das Mirkofon abgefragt. Anschließend werden die Mikrofonpegel angezeigt.

Ursprünglich gewünscht ist aber, dass die Zugriffserlaubnis von Kamera und Mikrofon gemeinsam im Browser erfolgen, also zeitgleich.

2.) Erst nachdem der Button geklickt wird, wird vom Browser die Zugriffserlaubnis auf die Kamera abgefragt. Und nach Erlaubnis wird das Bild angezeigt.

3.) Die Warnung vor Rückkopplung ist deshalb eingebaut, damit der Besucher nach Zugriffserlaubnis auf Kamera und Mikrofon auch über die leise gestellten Lautsprecher seine Stimme hören und so zugleich die ordnungegemäße Funktion seiner Lautsprecher testen kann. Beim bisherigen Script wurde nach Anklicken des Button auch der Lautsprecher aktiviert.

Konkret sollte das Ganze also so ablaufen:

• Der Besucher öffnet die Testseite und sofort wird vom Browser der Zugriff auf Kamera und Mikrofon abgefragt.

• Nachdem der Besucher den Zugriff genehmigt hat, muss er zum Start des Test den Button anklicken.

• Erst nach Anklicken des Button wird das Bild der eigenen Kamera angezeigt und

analog dazu auch der Ton des eigenen Mikrofon über die Lautsprecher abgespielt und die Aussteuerung angezeigt.

• Wenn die Webseite geschlossen wird, werden die Testscripts sowie der Zugriff auf Kamera und Mikrofon beendet.

Ich hoffe, es ist OK für dich, wenn du diese Funktionalität wieder herstellen könntest. Herzlichen Dank im Voraus!

Clemens

Hallo!

Leider hab ich alles "Überflüssige" von meiner Testseite gelöscht. Auf meinem PC sind aber noch Scripte usw. wobei ich nicht sicher bin, ob diese dem Status entsprechen, den ich zuvor auf meiner Testseite laufen hatte. Ich habe das ganze Paket gezippt und hier hochgeladen.

Im Prinzip hatte ich ja nur die Scripte aus den Beispielen von Github umbenannt und einfach in ein Verzeichnis zusammen mit der inhaltlich angepassten HTML-Seite hochgeladen. Und dann kamen die Konflikte, aber nicht beim Video sondern erst, wenn der Pegel angezeigt werden sollte.

Mir ist auch aufgefallen, dass ich bei Constraints ganz am Anfang der Scripte sowohl Audio als auch Video auf True gesetzt hatte. So konnte die Kamera angezeigt werden und auch der Ton über die Lautsprecher laufen. Nur die Pegelanzeige ging halt nicht.

Bin gleich außer Haus und kann erst übermorgen wieder dran gehen.

Danke für deine freundliche Unterstützung!

Clemens

Hi Basti!

Erst jetzt kann ich mich wieder um den Kamera- und Mikrofontest kümmern (bin mit meiner Praxis in neue Räume umgezogen) und habe auch erst jetzt deine Antwort vom 24. Sept. gelesen. Inzwischen habe ich auch wieder das allererste Script in meine Webseite eingebaut und es lediglich bei den constraints angepasst, indem ich sowohl für audio als auch für video =true gesetzt habe.

Resultat ist, dass nach Start der Testseite erst mal nix passiert. Sobald man aber den Button zum Start des Test klickt, fragt der Browser (funzt bei Chrome und Firefox) nach, ob der Zugriff auf Kamera und Mikrofon erlaubt werden soll. Erst nach Genehmigung startet der Test, indem das Bild der Kamera erscheint und der Ton vom Mikrofon über die PC-Lautsprecher erklingt. Deshalb auch die Warnung vor Rückkopplung.

Damit wäre eigentlich schon der Test komplett. -

Aber ein Bekannter hat eine Videoverbindung zu mir aufbauen wollen und dessen Mikrofonsignal war derart leise, dass ich kaum etwas verstehen konnte. Das hat mich auf die Idee gebracht, auch die Aussteuerungsanzeige mit in den Test aufzunehmen. Das Script war ja da und ich dachte, wenn der Audio-Stream sowieso schon läuft (mit dem ersten Script) dürfte es doch kein Problem sein, diesen Stream auch der Pegel-Berechnungs- und Anzeige-Prozedur zuzuführen. Tja und das hat halt nicht funktioniert.

Sinn meiner Anfrage hier ist also lediglich, wie ich das derzeit funktionierende Script so erweitere, dass auch eine Pegelanzeige erfolgt. Und im Idealfall könnte das Script für die Pegelanzeige mathematisch so modifiziert werden, dass die Anzeige benutzerfreundlich-aussagekräftig ist, nämlich dass der Vorlauf auf hohe Werte schnell, der Rücklauf aber "gedämpft" ist, damit man überhaupt etwas Sinnvolles aus der Anzeige entnehmen kann. Beispiel wäre z.B. die hervorragende Aussteuerungsanzeige in Audacity. (Der Farbwechsel der Anzeige ist natürlich bei meiner Anwendung nicht erforderlich.)

Hab auch deinen Link oben angeklickt. Nach Genehmigung des Kamera-Zugriffs (wird einzeln abgefragt) wir das Bild angezeigt. Danach wird der Mikrofon-Zugriff abgefragt. Genehmige ich den, funktioniert weder die Pegelanzeige noch das Abhören über die eigenen Lautsprecher.

Freundliche Grüße

Clemens