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.

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.

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.

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:

async function init(e) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
    e.target.disabled = true;
  } catch (e) {
    handleError(e);
  }
}
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:

async function init(x) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
    x.target.disabled = false;
  } catch (x) {
    handleError(x);
  }
}
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?

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

async function stopVideo(x) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
    x.target.disabled = true;
  } catch (x) {
    handleError(x);
  }
}
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:

const constraints = window.constraints = {
  audio: true,
  video: true
};

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:

async function stopVideo(x) {
  audio: false,
  video: false
  }
}
document.querySelector('#stopVideo').addEventListener('click', x => stopVideo(x));

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

/*
 *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
 *  Quelle: https://github.com/webrtc/samples/src/content/getusermedia/gum/js/main.js
 * https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/gum
 */
'use strict';

// Put variables in global scope to make them available to the browser console.
const constraints = window.constraints = {
  audio: true,
  video: true
};

function handleSuccess(stream) {
  const video = document.querySelector('video');
  const videoTracks = stream.getVideoTracks();
  console.log('Got stream with constraints:', constraints);
  console.log(`Using video device: ${videoTracks[0].label}`);
  window.stream = stream; // make variable available to browser console
  video.srcObject = stream;
}

function handleError(error) {
  if (error.name === 'ConstraintNotSatisfiedError') {
    let v = constraints.video;
    errorMsg(`Die Auflösung ${v.width.exact}x${v.height.exact} px wird von Ihrem Gerät nicht unterstützt.`);
  } else if (error.name === 'PermissionDeniedError') {
    errorMsg('Der Zugriff auf die Kamera und das Mikrofon wurde nicht erlaubt. ' +
      'Damit dieser Test funktioniert, müssen Sie über Ihren Browser ' +
      'Kamera und Mikrofon frei schalten.');
  }
  errorMsg(`getUserMedia error: ${error.name}`, error);
}

function errorMsg(msg, error) {
  const errorElement = document.querySelector('#errorMsg');
  errorElement.innerHTML += `<p>${msg}</p>`;
  if (typeof error !== 'undefined') {
    console.error(error);
  }
}

async function init(e) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
    e.target.disabled = true;
  } catch (e) {
    handleError(e);
  }
}
document.querySelector('#showVideo').addEventListener('click', e => init(e));

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?

Tja hier tut sich seit Mittwoch nix mehr. Hab deshalb meine neuen Versuche und Fragen ins andere Joomla-Forum gepostet.

(Böser, böser Crosspost! - Ich komm gewiss bald in die Hölle.)

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

anka

Herzlichen Dank für deinen Tipp. Das funktioniert!

Dann könnte ich aber auch den gesamten Inhalt der gum.html mit dem sourcerer integrieren. Die Scripte lege ich dann sowieso separat an zentraler Stelle in Joomla ab.

Freundliche Grüße

Clemens