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:

    Code
    1. main_gum.js
    2. soundmeter.js
    3. 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)

  • Etwas kompliziert das richtig zu erklären für mich . Aber das wichtigste ist das du im Script "soundmeter_main.js" eine Klammer zu viel hast und falsche Zeilen auskommentiert hast. Wahrst du das ? Wei im Originalen Script von der Seite ist das nicht so.

    Aber egal , das ist nicht das einizigste was da stört.

    Du hast in den Scripte die gleichen Functions Namen und auch Variablen. Du mußt die gleichen Functions Namen dann einen anderen Namen geben oder einfach eine 1 hinter schreiben oder so.

    Drauf achten das der Funktions Name und der Funktions aufruf geändert werden. Wenn du das gemacht hast läuft es auch. Ich habe jetzt aus den 4 Scripte eine gemacht und es läuft beides bestens.


    Also falls du es nicht hinbekommst dann sag bescheid dann gebe ich dir Link zur Funktionierende änderung.

  • 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

  • Kein Problem. Hier läuft beides. Links zu den Javascripten findest du ja dann im Quelltext.

    * Link entfernt , weil existiert nicht mehr *


    Wie du im Quelltext sehen kannst, gibt es da jetzt Funktionen die im Namen am Ende noch eine 1 haben. Das sind die Funktionsnamen die doppelt wahren und deswegen lief die eine Hälfte auch nicht.

  • 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

  • Die Scripte sind ja jetzt so geschrieben, dass die Kamera erst läuft, wenn man den Button klickt. Das Mikrofon hat keinen Button und läuft, sobald man die Erlaubnis gegeben hat. Leider kann ich das nicht testen, weil mein Browser alles aufmacht ,kein Plan was der Mist soll. Der andere Browser fragt immer nach dem Mikrofon aber die Kamera geht da gar nicht. Irgendwie muss da auch was Browser abweichend sein.

    * Link entfernt , weil existiert nicht mehr *


    Kuck mal da. Habe das Mikrofon mit in den Button gepackt. Die frage von Browser ob der zugriff gestattet wird sollte aber erst dann kommen und nicht vorher. Ich wüste jetzt auch nicht wie man die Browser abfrage mit ja anklicken kann und trotzdem das Mikrofon noch auszuheben und erst nach Button klick zu aktivieren.


    Mit der Kamera geht das ja, das ist ja nicht das Problem. Beim Mikrofon müsste ich erst auch mal googeln, weil ich mit Mikrofon so noch nichts Zutun hatte.

    Da du erst in 2 Tage wieder kommst, werde ich bis dahin mal etwas rum Googeln wie man deine Wünsche umsetzten, könnte

  • 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