webRTC: Mein Besucher soll eigene Webcam im Browser testen können

  • Hi!

    Ich kriegs einfach nicht hin ;(, obwohl ich in Github etliche Unterstützung dazu gefunden habe. Mir fehlt das KnowHow, mit Scripten arbeiten und diese ggfs. anpassen zu können.fie


    Was soll erreicht werden?

    Bevor ein Besucher meiner Website versucht, mit mir ein Videotelefonat über Wire.com zu führen, sollte er seine Webcam und deren Mikrofon über meine Joomla-Website ausprobieren können. Ein Beispiel, wie dies in der Praxis gut umgesetzt ist, findet sich hier:

    AV-Test bei Mentavio - Dabei wird Bild und Ton getrennt getestet. Falls möglich, möchte ich dies auf einer einzigen Webseite realisieren.


    Durch Webrecherche fand ich diese Seiten hier:

    Hier die Quellen für webRTC-Code, den ich eigentlich direkt in meine Webseite integrieren können sollte. (Die Betonung liegt auf SOLLTE.):

    Github: WebRTC user get media und den Code dazu hier

    Allerdings fehlt hier noch der Test mit dem Ton der Webcam. Zumindest hatte ich keinen.

    Auf die o.g. Seiten kam ich nach Besuch dieser Website: Capturing Audio & Video in HTML5


    Selbst, wenn ich versuche, die Demo-Webeite aus dem ersten Link in meinem Joomla nachzubauen, funktioniert es nicht. <X


    Ich bitte darum, dass jemand der Script-Kundigen Menschen hier mir die entscheidenden Tipps gibt, um wenigstens die o.a. Demo-Seite in meinem Joomla nachbauen zu können, wobie die nötigen Scripte allerdings aus Gründen der DSGVO komplett auf meinem Joomla-Webspace liegen müssen.

    Ergänzung:

    Im Gegensatz zu Mentavio soll aber meine Website - wenn möglich - den AV-Test auch auf Smartphones unterstützen und dabei die Frontkamera aktivieren. Bei Wire habe ich gesehen, dass dies funktioniert, sofern der Brwoser kompatibel ist.


  • Üffne die Entwicklerwerkzeuge, WebKonsole (oder wie immer es bei dir heißt) im Browser und übrprüfe unter "Netzwerk", ob alle nötigen Dateien geladen werden und, ob unter "Konsole" Fehler angezeigt werden. Browser-Cache ab und zu mal bei solchen Aktionen löschen, kann nicht schaden. Ebenso wie Mülleimer-Buttons vor Neuladen der Seite in den Werkzeugen.

  • OK, nach langen Versuchen hab ich es jetzt endlich geschafft, der Test läuft... und läuft... und läuft...


    Ich benötige noch eine "Stop-Taste" für den Test. :-)


    Der Start-Button wird durch diesen Script-Teil aufgerufen:

    Code
    1. async function init(e) {
    2. try {
    3. const stream = await navigator.mediaDevices.getUserMedia(constraints);
    4. handleSuccess(stream);
    5. e.target.disabled = true;
    6. } catch (e) {
    7. handleError(e);
    8. }
    9. }
    10. document.querySelector('#showVideo').addEventListener('click', e => init(e));

    Wenn ich also einen Button im HTML definiere:

    <button id="showVideo">Kamera und Mikrofon jetzt testen</button>

    so kann ich damit den Test starten.


    Nun dachte ich, analog dazu könnte doch auch ein Stop-Script angelegt werden:

    Code
    1. async function init(x) {
    2. try {
    3. const stream = await navigator.mediaDevices.getUserMedia(constraints);
    4. handleSuccess(stream);
    5. x.target.disabled = false;
    6. } catch (x) {
    7. handleError(x);
    8. }
    9. }
    10. document.querySelector('#stopVideo').addEventListener('click', x => init(x));

    für den ich den Button "stopVideo" im HTML genau so definiere.


    Zu meiner Überraschung startet der von mir ausgedachte Button den Test genau so, wie der zum Start des Test genutzte Button.


    Frage: Wie geht es denn richtig?

  • Zu meiner Überraschung startet der von mir ausgedachte Button den Test genau so, wie der zum Start des Test genutzte Button.

    Na ja, du definierst 2x die selbe Funktion. Die Variable x oder e macht dabei keinen Unterschied.


    Wenn's funktionieren soll, musst MINDESTENS die eigene Funktion umbenennen, villeicht

    Code
    1. async function stopTheVideo(x) {

    und

    Code
    1. ...addEventListener('click', x => stopTheVideo(x));

    Aber, ich seh das so, dass

    Code
    1. e.target.disabled = true;

    Lediglich den geklickten Button "disabled". Kann mich täuschen.


    Weiteres weiß ich dann auch nicht.

  • Hab jetzt die "Stop-Funktion" versucht, wie folgt zu realisieren:

    Code
    1. async function stopVideo(x) {
    2. try {
    3. const stream = await navigator.mediaDevices.getUserMedia(constraints);
    4. handleSuccess(stream);
    5. x.target.disabled = true;
    6. } catch (x) {
    7. handleError(x);
    8. }
    9. }
    10. document.querySelector('#stopVideo').addEventListener('click', x => stopVideo(x));

    Es funzt nicht, bzw. mein Problem bleibt das Gleiche, wie vor beschrieben. Dies ist unabhängig davon, ob ich x.target.disabled = true oder = false setze.

    try {const stream = .... beduetet doch, dass der Video-Stream über getUserMedia mitsamt der vorher definierten constraints abgerufen wird. Genau dies brauchen wir hier doch wohl nicht, weil genau der gestartete stream gestoppt / beendet werden sollte. Aber wie geht das?


    Mir ist klar: Was ich hier mache, ist Stochern im Nebel, denn ich hab schlicht keine Ahnung von JS.

    Ich hoffe ja, dass jemand sich hiermit auskennt und mir weiter helfen kann.

  • Hi!

    Vielleicht liegt der fehler bereits in der Definition der Variablen:

    Code
    1. const constraints = window.constraints = {
    2. audio: true,
    3. video: true
    4. };

    Dass also Audio und Video aktiv sind, wird hier definiert und dann im Versuch meines Stop-Befehls wiederholt. Ich müsste also eine andere Constante mit "Constraints" definieren, die audio: und video: als false definieren und damit könnte ich den Stream stoppen.

    Aber wie geht das in diesem Script?

  • Hi!

    Und das hier funktionierte leider auch nicht und setzte das ganze Script außer Funktion:

    Code
    1. async function stopVideo(x) {
    2. audio: false,
    3. video: false
    4. }
    5. }
    6. document.querySelector('#stopVideo').addEventListener('click', x => stopVideo(x));

    Deshalb veröffentliche ich jetzt lieber mal das ganze Script - weitgehend im Originalzustand:

  • Hallo!

    Unter Verwendung der Muster-Scripte, die bei Github unter webRTC hier zu finden sind,

    habe ich jetzt mal eine reine HTML-Musterseite (nicht in Joomla integriert) zusammengesetzt. Darauf wird nicht nur Kamera und Mirkofon getestet, sondern es sollte auch mit einem weiteren Script der Aussteuerungspegel des Mikrofon einschließlich einer Übersteuerungsanzeige realisiert werden.

    Diese Musterseite ist hier zu finden.


    Die Musterseite funktioniert, aber die Übersteuerungs- und Clip-Anzeige funktioniert nicht, obwohl sie ganz zu Beginn ein Mal funktioniert hatte (getestet mit Firefox und Chrome). Trotz intensiver Suche habe ich bis jetzt den Fehler nicht finden können und auch die Analysetools von Firefox haben mir nicht weiter geholfen. Die Musterseite bei Github funktioniert aber einwandfrei.


    Wie kann ich den Fehler am effizientesten finden?

  • Ach und noch eine Frage:

    Ich habe versucht, die o.g. HTML-Musterseite in passender Form im JCE-Editor in Joomla anzulegen. Das führt aber sofort zum Einfrieren des kompletten Joomla-Backend, sobald ich den Beitrag speichern will oder von der Code-Ansicht in die HTML-Ansicht wechseln will.

    Durch Versuche fand ich heraus, dass dieses Einfrieren bereits stattfindet, sobald ich auch nur das Tag <video> verwende. Vom Einbinden von Scripten für die webRTC-Funktion ist da noch gar nicht die Rede.


    Als WorkAround rufe ich jetzt diese Musterseite als iFrame in der JCE-Mediabox auf und das funktioniert eiwandfrei. Allerdings möchte ich iFrames, in die per URL Content geladen wird, lieber vermeiden und statt dessen die Funktionen meiner Musterseite innerhalb von Joomla in einem Beitrag integrieren, zumal ich da noch einfacher etwas am Inhalt gestalten kann.


    Was muss ich tun, damit Joomla nicht einfriert oder andere Probleme auftreten, wenn ich derartige Funktionen und Tags im JCE-Editor verwenden möchte?

  • Nein, deswegen kommst du nicht in die Hölle, weder bald noch später. Aber wenn du von Anfang an darauf hinweist, können Helfer nachsehen, welche Lösungen bereits vorgeschlagen und ausprobiert wurden. So muss keiner der Helfer bei Null anfangen oder das Rad neu erfinden, sondern kann unter Umständen einen ganz anderen Ansatz verfolgen. Und andere User, die normalerweise in einem anderen Forum gar nicht unterwegs sind, finden so evtl. auch eine Lösung für ihr Problem.

  • OK, also bisher kam auch aus dem anderen Forum noch keine Idee zur Lösung des Problems. Es geht aktuell vorranging darum, die offensichtlich miteinander in Konflikt stehenden Scripte so zu verändern, dass der Konflikt aufgehoben wird.

    In zweiter Linie geht es dann darum, diese Lösung nicht mehr in einem iFrame den Besuchern meiner Joomla-Website präsentieren zu müssen, sondern in Form eines ganz normalen Joomla-Beitrags, der mit dem JCE-Editor erstellt und bearbeitet werden kann, ohne dass das Backend einfriert.


    Freundliche Grüße

    Clemens

  • Es geht aktuell vorranging darum, die offensichtlich miteinander in Konflikt stehenden Scripte so zu verändern, dass der Konflikt aufgehoben wird.

    Ich bin da kein Experte und lese mir das von Fall zu Fall neu an (gehört einfach dazu, in programmiertechnisch-turbulenten Zeiten wie diesen). Hau mal ein paar Stichworte aus dem Gedächtnis raus, also ohne Gewähr, da eben kein Experte:

    Beschätige dich mit Namespace.

    Prototype.

    "Abgekaspelten" Objekten.

    "Isolierten" JavaScriptböcken

    in Javascript. Vielleicht gleich mit EcmaScript/es 5. Damit geht ggf. das eine oder andere etwas ""leichter"".


    Oder benenne die Funktionen/Methoden etc. plump um, die im Konflikt stehen.


    Dein Problem ist primär erst ein JavaScript-Problem und dann erst ein Joomla-Problem. Deshalb solltest du bei Fragen vielleicht ebenfalls schrittweise vorgehen und vielleicht auch spezialiserte Foren aufsuchen.