Anpassung der Benutzeroberfläche – Web

Mit den folgenden Einstellungen können Sie die Benutzeroberfläche von OpenTok-Videos an Ihre Bedürfnisse anpassen:

Einstellen der Anfangsposition und der Abmessungen eines Videos

Wenn Sie ein Video veröffentlichen, können Sie das DOM-Element (oder seine ID) angeben, das durch den Publisher ersetzt wird. Sie können auch die anfängliche Breite und Höhe des Publishers angeben:

// Replace the first parameter with ID of the target DOM element:
const publisher = OT.initPublisher('myPublisherElementId',
                                 {width:400, height:300});
session.publish(publisher);

Sie können auch die insertMode Eigenschaft der Optionen, die Sie in der OT.initPublisher() Methode zu 'append' Damit der Publisher als untergeordnetes Element des von Ihnen angegebenen DOM-Elements (Containers) hinzugefügt wird:

const publisherOptions = {
  insertMode: 'append',
  width: 400,
  height: 300
};
const publisher = OT.initPublisher('publisherContainerElementId', publisherOptions);
session.publish(publisher);

Wenn Sie einen Stream abonnieren, können Sie das Ziel-DOM-Element (oder seine ID) angeben. Sie können auch die anfängliche Breite und Höhe des Abonnenten angeben:

const options = {width: 400, height: 300, insertMode: 'append'}
const subscriber = session.subscribe(stream, 'containerElementId', options);

Sie können auch die anfängliche Breite und Höhe als Prozentsatz der Größe des übergeordneten DOM-Elements angeben:

const publisherOptions = {
  insertMode: 'append',
  width: '100%',
  height: '100%'
};
const publisher = OT.initPublisher(publisherContainerElement, publisherOptions);
session.publish(publisher);

Wenn Sie keine ID für das zu ersetzende Element angeben (oder sie auf null setzen), fügt die Anwendung ein neues DOM-Element an den HTML-Body an. Die Standardbreite ist 264 Pixel und die Standardhöhe ist 198 Pixel.

Wenn Sie mehrere CSS-Regeln anwenden möchten, wenden Sie sie auf das übergeordnete DOM-Element (Container) an:

<style>
	#publisherContainer.large
	{ width: 640px; height: 480px; }
	#publisherContainer.small
	{ width:100px; height: 100px; }
</style>
<div id="publisherContainer"></div>
<script>
	const publisher = OT.initPublisher('publisherContainer',
	{width: '100%', height: '100%', insertMode: 'append'}
</script>

Um einem Video auf einem mobilen Gerät eine andere Größe zuzuweisen, verwenden Sie CSS-Medienabfragen:

<style>
	#publisherContainer
	{ width: 100px; height: 100px; }
	@media screen and (max-width: 650px) {
	#publisherContainer
	{ width: 89px; height: 50px; }
	}
</style>
<div id="publisherContainer"></div>
<script>
	const publisher = OT.initPublisher('publisherContainer',
	{width: '100%', height: '100%', insertMode: 'append'}
</script>

Wenn Sie die Größe des Videos dynamisch ändern möchten, setzen Sie den insertMode zu 'append' und setzen Sie die height und width zu '100%'.

Im nächsten Abschnitt finden Sie Informationen zur Größenänderung oder Neupositionierung eines Herausgeber- oder Abonnentenvideos.

Größenänderung oder Neupositionierung eines Videos

Die element Eigenschaft des Publisher- oder Subscriber-Objekts ist sein HTML-DOM-Element. Sie können dieses im HTML-DOM neu positionieren und die Größe des Elements ändern, indem Sie seine style.width und style.height Eigenschaften, genau wie bei jedem anderen DOM-Element:

document.getElementById("target").appendChild(publisher.element);
publisher.element.style.width = "100px";
publisher.element.style.height = "75px";

Wenn Sie die anfängliche width und height des Publisher- oder Subscriber-Objekts als Prozentsatz (z. B. "100 %:) angeben, können Sie die Größe des Objekts ändern, indem Sie die Größe eines seiner übergeordneten Elemente ändern. Das folgende Beispiel enthält eine Funktion, die die Größe eines Publishers ändert:

<script type="text/javascript">
	const publisherOptions = {
		insertMode: "append",
		height: "100%",
		width: "100%"
	}
	const publisher = OT.initPublisher("publisherContainer", publisherOptions);
	session.publish(publisher);

	function resizePublisher() {
		const publisherContainer = document.getElementById("publisherContainer");
		publisherContainer.style.width = "1000px";
		publisherContainer.style.height = "750px";
	}
</script>

<div id="container">
	<div id="publisherContainer"></div>
	<a href="javascript:resizePublisher()">resize</a>
</div>

Siehe den vorherigen Abschnitt, Einstellen der ursprünglichen Abmessungen eines Videos für Informationen zur Festlegung der Anfangsposition und der Abmessungen eines Verlegers oder Abonnenten.

Das ist wichtig: Wenn Sie die Standardbenutzeroberfläche des Publishers oder Subscribers deaktivieren, indem Sie insertDefaultUI zu false Beim Instanziieren des Publisher- oder Subscriber-Objekts wird das element Die Eigenschaft des Herausgebers oder Abonnenten ist nicht definiert. Achten Sie auf das videoElementCreated Ereignis und verwenden Sie das element Eigenschaft des Ereignisobjekts, um auf das HTML-DOM-Element für den Publisher oder Subscriber zuzugreifen. Siehe Direkter Zugriff auf das Videoelement für einen Publisher oder Subscriber.

Hinzufügen eines Namens für einen veröffentlichten Stream

Wenn Sie einen Publisher erstellen, können Sie (optional) einen Namen angeben, der im Video angezeigt werden soll:

// Replace the first parameter with the target element ID:
const publisher = OT.initPublisher("myPublisher",
                                 {name: "John"})
session.publish(publisher);

Sie können diesen Namen verwenden, um den Client zu identifizieren.

Verwenden Sie keine persönlichen Informationen im Feld "Name" des Herausgebers — Der Name des Herausgebers kann anderen Teilnehmern der Sitzung angezeigt werden und möglicherweise auch im Inspector-Tool sowie in den internen Protokollen von Vonage erscheinen. Verwenden Sie daher niemals unverschlüsselte sensible oder personenbezogene Daten im Namen des Herausgebers. Siehe bewährte Verfahren für die Sicherheit.

Beachten Sie, dass Sie beim Erstellen eines Tokens auch Metadaten über den Client hinzufügen können. Dieser Name wird nicht automatisch im Video angezeigt. Wenn Sie die Daten jedoch bei der Erstellung eines Tokens hinzufügen, können Sie die Informationen auf sicherere Weise hinzufügen (da Token auf dem Server und nicht auf dem Client erstellt werden). Weitere Informationen finden Sie unter Erstellen eines Tokens.

Kunden können den Namen in der Publisher- oder Subscriber-Ansicht ausblenden. Siehe den nächsten Abschnitt.

Anzeigen oder Ausblenden des Namens in einem Video

Wenn Sie einen Stream veröffentlichen, können Sie einen Namen festlegen, der im Video angezeigt werden soll (siehe vorherigen Abschnitt).

Wenn Sie einen Publisher erstellen, können Sie angeben, ob der Name im Publisher-Video angezeigt werden soll, indem Sie die Option style.nameDisplayMode Eigenschaft der Optionen, die Sie in der OT.initPublisher() Methode:

// Replace the first parameter with the target element ID:
const publisher = OT.initPublisher("myPublisher",
  {
    name: "John",
    style: { nameDisplayMode: "off" }
  });
session.publish(publisher);

Die style.nameDisplayMode kann auf einen von drei Werten gesetzt werden:

  • "auto" - Der Name wird angezeigt, wenn der Stream zum ersten Mal angezeigt wird und wenn der Benutzer mit der Maus über das Video fährt (Standardeinstellung).
  • "off" - Der Name wird nicht angezeigt.
  • "on" - Der Name wird angezeigt.

Sobald Sie den Publisher erstellt haben, können Sie den Anzeigemodus des Namens ändern, indem Sie die Funktion setStyle() Methode des Publisher-Objekts. (Siehe die Dokumentation für die Publisher.setStyle() Methode).

Wenn Sie einen Stream abonnieren, können Sie angeben, ob der Name im Abonnentenvideo angezeigt werden soll, indem Sie die Option style.nameDisplayMode Eigenschaft der Optionen, die Sie in der Session.subscribe() Methode:

// Replace the first two parameters with the stream and target element ID:
const subscriber = session.subscribe(stream,
  "mySubscriber",
  {
    style: { nameDisplayMode: "off" }
  });

Nachdem Sie den Abonnenten erstellt haben, können Sie den Anzeigemodus des Namens ändern, indem Sie die Funktion setStyle() Methode des Subscriber-Objekts. (Siehe die Dokumentation für die Subscriber.setStyle() Methode).

Ein- oder Ausblenden der Stummschalttaste

Standardmäßig enthält die Benutzeroberfläche für einen Sender oder einen Empfänger eine Schaltfläche zum Stummschalten des Tons. Bei einem Sender kann der Benutzer durch Anklicken das Mikrofon ein- und ausschalten. Bei einem Empfänger kann der Benutzer durch Anklicken die Lautsprecher ein- und ausschalten.

Wenn Sie einen Stream veröffentlichen, können Sie angeben, ob die Stummschalttaste angezeigt wird, indem Sie eine style.buttonDisplayMode Eigenschaft in die OT.initPublisher() Methode:

const publisher = OT.initPublisher(
  'publisher-element-id', // Replace with the replacement element ID
  {
     name: 'John',
     style: {buttonDisplayMode: 'on'}
  }
);
session.publish(publisher);

Die style.buttonDisplayMode kann auf einen von drei Werten gesetzt werden:

  • "auto" — Die Stummschalt-Schaltfläche wird angezeigt, wenn der Stream zum ersten Mal angezeigt wird und wenn der Benutzer mit der Maus über das Video fährt (Standardeinstellung).
  • "off" — Die Stummschalttaste wird nicht angezeigt.
  • "on" — Die Stummschalttaste wird angezeigt.

Ebenso können Sie beim Abonnieren eines Streams festlegen, ob der stummgeschaltete Lautsprecher angezeigt wird, indem Sie einen style.buttonDisplayMode Eigenschaft in die Session.subscribe() Methode:

const subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  {
     style: {buttonDisplayMode: 'on'}
  }
);

Sobald Sie den Publisher oder Subscriber erstellt haben, können Sie den Anzeigemodus der Stummschalttaste ändern, indem Sie die Funktion setStyle() Methode des Publisher-Objekts oder des Subscriber-Objekts. (Siehe die Dokumentation zu Publisher.setStyle() und Abonnent.setStyle().)

Anpassen von Videoausschnitt und Letterboxing

Sie können das Zuschneiden oder Letterboxing des Videos eines Publishers oder Abonnenten festlegen, indem Sie die Option fitMode Eigenschaft der Optionen, die Sie in OT.initPublisher() oder Session.subscribe(). Geben Sie eine der beiden folgenden Zeichenketten ein:

  • "cover" - Das Video wird beschnitten, wenn seine Abmessungen nicht mit denen des DOM-Elements übereinstimmen. Dies ist die Standardeinstellung für Videos, die einen Kamera-Feed veröffentlichen.
  • "contain" - Das Video wird im Letterbox-Format angezeigt, wenn seine Abmessungen nicht mit denen des DOM-Elements übereinstimmen. Dies ist die Standardeinstellung für Videos zur Bildschirmfreigabe.

Der folgende Code initialisiert zum Beispiel einen Publisher mit dem Videoelement Letterboxed:

const publisher = OT.initPublisher("publisher-element-id",
  {fitMode: "contain"});

Mit dem folgenden Code wird ein Stream abonniert, bei dem das Videoelement abgeschnitten ist:

const subscriber = session.subscribe(stream,
  "subscriber-element-id",
  {fitMode: "cover"});

Schnappschussbild eines Videos erhalten

Mit dem folgenden Code wird ein statisches Bild des Publisher-Videos erfasst und angezeigt:

const imgData = publisher.getImgData();
const img = document.createElement("img");
img.setAttribute("src", "data:image/png;base64," + imgData);

// Replace with the parent DIV for the img
document.getElementById("containerId").appendChild(img);

Mit dem folgenden Code wird ein statisches Bild eines Abonnentenvideos erfasst und angezeigt:

const imgData = subscriber.getImgData();
const img = document.createElement("img");
img.setAttribute("src", "data:image/png;base64," + imgData);

// Replace with the parent DIV for the img
document.getElementById("containerId").appendChild(img);

Einstellen eines Bildes zur Anzeige im reinen Audiomodus

Sie können die backgroundImageURI Stil eines Abonnenten, um das Bild festzulegen, das angezeigt wird, wenn kein Video vorhanden ist. Der von Ihnen festgelegte Wert kann die URL eines Bildes im Internet sein. Es kann auch ein data: URL, z. B. eine, die Sie mit dem Befehl getImgData() Methode des Subscriber-Objekts (siehe die vorheriger Abschnitt).

Mit dem folgenden Code wird das Hintergrundbild des Abonnenten festgelegt. Wenn der Aufruf von Session.subscribe() erfolgreich abgeschlossen ist, wird das Hintergrundbild festgelegt. Wenn ein Videostream vorhanden ist, wird das Hintergrundbild auf ein statisches Bild gesetzt, das aus dem Video des Teilnehmers aufgenommen wurde; andernfalls wird es auf ein Bild gesetzt, das von einer Web-URL geladen wird:

const subscriber = session.subscribe(event.stream, 'subscriberElement', function(error) {
  if (error) {
    console.log(error.message)'
    return;
  }
  if (subscriber.stream.hasVideo) {
    const imgData = subscriber.getImgData();
    subscriber.setStyle('backgroundImageURI', imgData);
  } else {
    subscriber.setStyle('backgroundImageURI',
      'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1" height="1"%3E%3Crect width="1" height="1" fill="%23f4eadf"/%3E%3C/svg%3E'
    );
  }
});

Wenn Sie für einen Abonnenten kein Hintergrundbild festlegen, werden bei fehlendem Video die Initialen des Streams angezeigt, sofern diese vom Herausgeber des Streams bei der Initialisierung des Streams festgelegt wurden (siehe Initialisierung eines Publishers).

Sie können den aktuellen Hintergrund entfernen, indem Sie z. B. kein Bild übergeben: subscriber.setStyle('backgroundImageURI', null). Die Initialen werden angezeigt, wenn sie zuvor eingestellt wurden.

Anpassung der Benutzeroberfläche auf der Grundlage von Audiopegeln

Versand von Publisher- und Subscriber-Objekten audioLevelUpdated Ereignisse, um den Audiopegel periodisch zu melden. Sie können diese Ereignisse verwenden, um eine Audiopegelanzeige anzuzeigen. Sie können diese Ereignisse auch verwenden, um aktive Sprecher in einer Sitzung zu erkennen.

Das folgende Beispiel passt den Wert eines Zählerelements an, das die Lautstärke eines Teilnehmers anzeigt. Der Code setzt den audioLevelDisplayMode Stil zu 'off'Diese Option deaktiviert die Standard-Audiopegelanzeige, die im Abonnenten angezeigt wird. Beachten Sie, dass der Audiopegel logarithmisch angepasst wird und ein gleitender Durchschnitt angewendet wird:

subscriber.setStyle('audioLevelDisplayMode', 'off');
const movingAvg = null;
subscriber.on('audioLevelUpdated', function(event) {
  if (movingAvg === null || movingAvg <= event.audioLevel) {
    movingAvg = event.audioLevel;
  } else {
    movingAvg = 0.7 * movingAvg + 0.3 * event.audioLevel;
  }

  // 1.5 scaling to map the -30 - 0 dBm range to [0,1]
  const logLevel = (Math.log(movingAvg) / Math.LN10) / 1.5 + 1;
  logLevel = Math.min(Math.max(logLevel, 0), 1);
  document.getElementById('subscriberMeter').value = logLevel;
});

Das Beispiel geht davon aus, dass es ein HTML-Zählerelement mit der ID "subscriberMeter" gibt.

Beachten Sie, dass im reinen Audio-Modus ein Publisher- oder Subscriber-DOM-Element standardmäßig eine Lautstärkanzeige anzeigt (in der oberen rechten Ecke des Elements). Sie können dieses standardmäßige Benutzeroberflächenelement deaktivieren und eine eigene Lautstärkanzeige einblenden. Siehe das nächste Thema, Anpassen der Benutzeroberfläche, wenn Video aktiviert oder deaktiviert ist.

Sie können auch die audioLevelUpdated Ereignis, um festzustellen, wann der Ton eines Verlegers oder Teilnehmers lange genug laut ist, um den Teilnehmer als sprechend zu kennzeichnen. Oder, wenn das Audio lange genug ruhig war, können Sie den Teilnehmer als nicht mehr sprechend identifizieren:

const subscriber = session.subscribe(event.stream);

SpeakerDetection(subscriber, function() {
  console.log('started talking');
}, function() {
  console.log('stopped talking');
});

const SpeakerDetection = function(subscriber, startTalking, stopTalking) {
  const activity = null;
  subscriber.on('audioLevelUpdated', function(event) {
    const now = Date.now();
    if (event.audioLevel > 0.2) {
      if (!activity) {
        activity = {timestamp: now, talking: false};
      } else if (activity.talking) {
        activity.timestamp = now;
      } else if (now- activity.timestamp > 1000) {
        // detected audio activity for more than 1s
        // for the first time.
        activity.talking = true;
        if (typeof(startTalking) === 'function') {
          startTalking();
        }
      }
    } else if (activity && now - activity.timestamp > 3000) {
      // detected low audio activity for more than 3s
      if (activity.talking) {
        if (typeof(stopTalking) === 'function') {
          stopTalking();
        }
      }
      activity = null;
    }
  });
};

(Anstatt Meldungen in die Konsole auszugeben, könnte Ihre App ein Element der Benutzeroberfläche anpassen, wenn der Benutzer zu sprechen beginnt oder aufhört.)

Anzeige eines benutzerdefinierten UI-Elements, wenn Teilnehmer-Audio blockiert ist

Einige Browser blockieren automatisch die Audiowiedergabe und erfordern eine click Ereignis, bevor die Audiowiedergabe für Abonnenten beginnt. Zu diesen Browsern gehören Safari, Firefox 66+ und Chrome 71+.

Das Subscriber-Objekt zeigt eine Schaltfläche für die Audiowiedergabe an, wenn die Audiowiedergabe blockiert ist. Sie können die Standardschaltfläche für die Audiowiedergabe des Abonnenten deaktivieren und ein eigenes Oberflächenelement anzeigen, auf das der Benutzer klickt, um die Audiowiedergabe zu starten.

Um die Anzeige der Standardtaste für die Audiowiedergabe zu deaktivieren, setzen Sie den style.audioBlockedDisplayMode Eigenschaft der options Parameter des Session.subscribe() Methode):

const subscriberOptions = {
    style: { audioBlockedDisplayMode: "off" }
  };
const subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  subscriberOptions
);

Fügen Sie Ereignis-Listener für die audioBlocked und audioUnblocked Ereignisse, die vom Abonnenten ausgelöst werden, um Ihr benutzerdefiniertes UI-Element ein- und auszublenden (und dem Benutzer mitzuteilen, dass er zur Audiowiedergabe klicken soll):

subscriber.on({
  audioBlocked: function(event) {
    // display custom UI
  },
  audioUnblocked: function(event) {
    // hide custom UI
  }
});

Wenn der Benutzer auf Ihr benutzerdefiniertes UI-Element klickt, rufen Sie die OT.unblockAudio() Methode:

customElement.addEventListener('click', async () => {
  try {
    await OT.unblockAudio();
  } catch (err) {
    console.error('Unblocking audio failed.', err);
    return;
  }
  console.log('Unblocked audio successfully.');
});

Anpassen der Benutzeroberfläche, wenn Video aktiviert oder deaktiviert ist

Anpassung der Benutzeroberfläche anhand von Abonnentenereignissen

Ein Subscriber-Objekt sendet die folgenden Ereignisse in Bezug auf die Aktivierung oder Deaktivierung des Videos für den Stream des Abonnenten:

  • videoEnabled - Wird ausgelöst, wenn das Video aktiviert wurde, nachdem es zuvor deaktiviert war.
  • videoDisabled - Wird ausgelöst, wenn das Video deaktiviert wurde. Die Website reason Eigenschaft des Ereignisobjekts zeigt an, warum das Video deaktiviert wurde. (Dieses Ereignisobjekt ist ein VideoEnabledChangedEvent Objekt).
  • videoDisableWarning — Wird gesendet, wenn der OpenTok Media Router feststellt, dass sich die Stream-Qualität verschlechtert hat und das Video deaktiviert wird, sollte sich die Qualität weiter verschlechtern. Verschlechtert sich die Qualität weiter, deaktiviert der Abonnent das Video und sendet eine videoDisabled Ereignis. Dieses Ereignis kann auch ausgelöst werden, wenn die Audio-Fallback-Funktion des Publishers verwendet wird und die Stream-Qualität des Publishers nachlässt. Siehe die Entwicklerhandbuch zum Audio-Fallback.
  • videoDisableWarningLifted - Das Video wurde aktiviert, nachdem es zuvor deaktiviert war.

Die videoDisableWarning und videoDisableWarningLifted Ereignisse sind nur in Sitzungen verfügbar, die die OpenTok Media Router (Sitzungen, bei denen der Medienmodus auf „geroutet“ eingestellt ist), es sei denn, es wird die Audio-Fallback-Funktion des Anbieters, wo die Veranstaltungen als Live-Übertragungen oder Aufzeichnungen verfügbar sein werden.

Standardmäßig zeigt der Teilnehmer eine Warnanzeige für deaktivierte Videos und eine Anzeige für deaktivierte Videos an, wenn die videoDisableWarning und videoDisableWarningLifted Ereignisse ausgelöst werden. Sie können die Standardanzeige des Indikators deaktivieren, indem Sie den Parameter videoDisabledDisplayMode Stil-Einstellung des Subscriber-Objekts.

Das folgende Beispiel verwendet die videoDisabledDisplayMode einstellen, dass die Warnanzeige für deaktiviertes Video und die Anzeige für deaktiviertes Video im Sekundentakt blinken, wenn der videoDisableWarning und videoDisableWarningLifted Ereignisse ausgelöst werden:

const indicatorBlinker = new IndicatorBlinker(subscriber);

const IndicatorBlinker = function(subscriber) {
  const timer;
  const indicatorOn = false;
  subscriber.on({
    videoDisabled: function(event) {
      start();
    },
    videoDisableWarning: function(event) {
      start();
    },
    videoDisableWarningLifted: function(event) {
      stop();
    },
    videoEnabled: function(event) {
      stop();
    }
  });
  const start = function() {
    subscriber.setStyle('videoDisabledDisplayMode', 'on');
    if (timer) {
      clearInterval(timer);
    }
    timer = setInterval(function() {
      if (indicatorOn) {
        subscriber.setStyle('videoDisabledDisplayMode', 'off');
      } else {
        subscriber.setStyle('videoDisabledDisplayMode', 'on');
      }
      indicatorOn = !indicatorOn;
    }, 1000);
    indicatorOn = true;
  };
  const stop = function() {
    if (timer) {
      clearInterval(timer);
    }
  };
};

Sie können auch die videoDisabledDisplayMode Stil zu 'off' und fügen Sie Ihre eigenen Elemente der Benutzeroberfläche auf der Grundlage der videoDisableWarning, videoDisabled, videoDisableWarningLiftedund videoEnabled Veranstaltungen.

Anpassung der Benutzeroberfläche anhand von Publisher-Ereignissen

Wenn Publisher Audio Fallback ist aktiviert, löst das Publisher-Objekt diese Ereignisse als Reaktion auf sich ändernde Qualitätsbedingungen aus:

  • videoDisableWarning - Wird versendet, wenn der Herausgeber feststellt, dass sich die Qualität des Streams verschlechtert hat, und das Video deaktiviert wird, wenn sich die Qualität weiter verschlechtert.
  • videoDisableWarningLifted - Wird gesendet, wenn der Herausgeber feststellt, dass sich die Qualität des Streams soweit verbessert hat, dass das deaktivierte Video kein unmittelbares Risiko mehr darstellt.
  • videoDisabled - Wird versendet, wenn der Herausgeber feststellt, dass die Qualität des Streams sich verschlechtert hat und der ausgehende Videotransport deaktiviert wurde. Hinweis: Auch wenn das Video deaktiviert ist, zeigt der Veröffentlicher das Veröffentlichungsvideo (z. B. das Kamerabild) in der Benutzeroberfläche des Veröffentlichungsclients an.
  • videoEnabled — Mit Begründung versandt: quality wenn der Publisher feststellt, dass sich die Stream-Qualität verbessert hat und die ausgehende Videoübertragung wieder aktiviert wurde.

Standardmäßig zeigt der Publisher Symbole an, wenn die videoDisableWarning und videoDisabled Ereignisse auftreten.

Die style Eigenschaft der options Parameter für OT.initPublisher() enthält jetzt eine videoDisabledDisplayMode Eigenschaft. Sie können die videoDisabledDisplayMode Die Zuweisung dieser Eigenschaft zu einem der folgenden Zeichenfolgenwerte steuert, wie die Standardelemente der Benutzeroberfläche angezeigt werden:

  • auto (Standard) — Die Symbole werden automatisch angezeigt, wenn das Video deaktiviert ist oder aufgrund schlechter Stream-Qualität deaktiviert zu werden droht.
  • off - Die Icons werden nicht angezeigt. Sie können auf der Grundlage der oben beschriebenen Ereignisse Ihre eigenen Benachrichtigungen auf der Benutzeroberfläche anzeigen.
  • on — Die Symbole werden automatisch angezeigt, wenn das Video deaktiviert ist oder aufgrund schlechter Stream-Qualität deaktiviert zu werden droht.

Der folgende Code deaktiviert beispielsweise die standardmäßigen Benutzeroberflächenelemente für deaktivierte Videos und behandelt die entsprechenden Ereignisse (so dass Sie Ihre eigenen Benutzeroberflächenbenachrichtigungen bereitstellen können):

// Enabled
const publisher = OT.initPublisher('target', {
  audioFallback: {
    publisher: true,
  },
  style: {
    videoDisabledDisplayMode: 'off',
  }
});

publisher.on({
  videoDisableWarning: () => {
    // Custom action — for example, add custom UI notification
  },
  videoDisableWarningLifted: () => {
    // Custom action — for example, remove custom UI notification
  },
  videoDisabled: () => {
    // Custom action — for example, add custom UI notification
  },
  videoEnabled: () => {
    // Custom action — for example, remove custom UI notification
  },
});

Sie können auch die videoDisabledDisplayMode Stil dynamisch durch den Aufruf der Publisher.setStyle() Methode:

publisher.setStyle('videoDisabledDisplayMode', 'off');

// Alternately:

publisher.setStyle({
  videoDisabledDisplayMode: 'off',
  // other styles ...
});

Ausblenden aller integrierten Steuerelemente der Benutzeroberfläche für Videos

Die Objekte Publisher und Subscriber enthalten die folgenden eingebauten Steuerelemente für die Benutzeroberfläche:

  • Die Anzeige des Streamnamens
  • Die Audiopegelanzeige
  • Die Taste für die Stummschaltung des Tons
  • Die Anzeige "Video deaktiviert" und das Warnsymbol "Video deaktiviert" (nur für Abonnenten)

Sie können alle diese Funktionen deaktivieren, indem Sie die Option showControls Eigenschaft zu false im properties Parameter, den Sie an die OT.initPublisher() Methode oder die Session.subscribe() Methode.

Der folgende Code erstellt beispielsweise ein Publisher-Objekt, das keine integrierten Steuerelemente für die Benutzeroberfläche enthält:

const publisherOptions = {
     showControls: false
  };
const publisher = OT.initPublisher(
  'publisher-element-id', // Replace with the replacement element ID
  publisherOptions
);

Der folgende Code erstellt ein Subscriber-Objekt, das keine integrierten Steuerelemente für die Benutzeroberfläche enthält:

const subscriberOptions = {
     showControls: false
  };
const subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  subscriberOptions
);

Sie können die Darstellung einzelner Bedienelemente der Benutzeroberfläche steuern, indem Sie das showControls Eigenschaft eingestellt auf true (Standardeinstellung); lesen Sie dann die folgenden Themen:

Direkter Zugriff auf das Video-Element für einen Publisher oder Subscriber

Sie können die Standard-Benutzeroberflächenelemente für einen Publisher oder Subscriber deaktivieren und auf die HTML Video Element direkt. Beim Veröffentlichen oder Abonnieren eines Streams setzen Sie das insertDefaultUI Eigenschaft zu false beim Aufruf der OT.initPublisher() oder Session.subscribe() Methode. Wenn Sie diese Option auf false, OpenTok.js fügt kein Standard-UI-Element in das HTML-DOM ein, und das element Die Eigenschaft des Publisher- oder Subscriber-Objekts ist nicht definiert. Stattdessen löst das Publisher-Element ein videoElementCreated Ereignis, wenn die Video Element wird erstellt. Das element Die Eigenschaft des Ereignisobjekts ist ein Verweis auf das Video Element. Fügen Sie es dem HTML-DOM hinzu, um das Video anzuzeigen.

Der folgende Code initialisiert einen Publisher und fügt dessen Video Element in das HTML-DOM:

const publisher = OT.initPublisher({insertDefaultUI: false});
publisher.on('videoElementCreated', function(event) {
  document.getElementById('publisher-video-parent-id').appendChild(event.element);
});

Der folgende Code abonniert einen Stream und fügt dessen Video Element in das HTML-DOM:

const subscriber = session.subscribe(stream, {insertDefaultUI: false});
subscriber.on('videoElementCreated', function(event) {
  document.getElementById('subscriber-video-parent-id').appendChild(event.element);
});

Wenn Sie die Einstellung insertDefaultUI Eigenschaft zu falsesetzen Sie nicht die targetElement Parameter beim Aufruf von OT.initPublisher() oder Session.subscribe(). (Dies führt zu einem Fehler.)

Das Standard-Benutzeroberflächenelement enthält neben dem Video auch Steuerelemente für die Benutzeroberfläche, eine Anzeige für das Laden des Videos und einen automatischen Videozuschnitt oder Letterboxing. Wenn Sie die insertDefaultUI eingestellt auf true (Standardeinstellung), können Sie einzelne Einstellungen der Benutzeroberfläche mit der Option fitMode, showControlsund style Optionen. Siehe die anderen Themen auf dieser Seite.

Sie können auch auf das MediaStream-Objekt eines Abonnenten zugreifen (und es in Ihrem eigenen Video Element). Siehe den nächsten Abschnitt.

Zugriff auf MediaStream-Objekte für Verleger und Abonnenten über die API für verfügbare Medienströme

Auf das MediaStream-Objekt kann zugegriffen werden, indem auf den Befehl mediaStreamAvailable Ereignis, das von Herausgebern und Abonnenten ausgelöst wird. Die API "Media Stream Available" wurde in Version 2.27.7 verfügbar gemacht; frühere Versionen müssen die Zugriff auf MediaStream-Objekte für Abonnenten vor Version 2.27.7 unten verlinkten Leitfaden.

Wichtige Hinweise:

  • Die Objekte "Publisher" und "Subscriber" sollten weiterhin zur Steuerung aller Aspekte der Video API verwendet werden, wie z. B. Stummschalten, Trennen der Verbindung und mehr.
  • Der Ton wird sowohl über das benutzerdefinierte Element als auch über das Publisher- oder Subscriber-Widget abgespielt. Die benutzerdefinierten Elemente sollten stummgeschaltet werden, um ein Echo zu vermeiden.
  • Die OpenTok-Chrome-Elemente wie die Silhouette und die Videosteuerung werden nicht angezeigt.
  • Das MediaStream-Objekt berücksichtigt alle durch Adaptive Media Routing verursachten Änderungen.

Im Folgenden finden Sie ein Beispiel für React Session-, Subscriber- und Publisher-Kontext-Hooks unter Verwendung der Media Stream Available-API. Obwohl das Beispiel React verwendet, ist die Media Stream Available-API Framework-unabhängig. Beachten Sie, dass der Listener unmittelbar nach der Erstellung des Publishers und der Abonnenten angehängt werden sollte, nicht als Teil des Rückrufs.

Komponente der Sitzung

const [subscriberStream, setSubscriberStreams] = useState([]);
  async function subscribe(stream, session, options = {}) {
    if (session) {
      const subscriber = session.current.subscribe(stream, null, { ...options, insertDefaultUI: false });
      subscriber.on('mediaStreamAvailable', ({ mediaStream }) => {
        setSubscriberStreams((prev) => [...prev, { mediaStream, subscriber }]);
      });
    }
  }

Abonnentenkomponente

import { useEffect, useRef } from 'react';

    const Subscriber = ({ subscriber, mediaStream }) => {
      const videoRef = useRef(null);

      useEffect(() => {
        if (mediaStream) {
          videoRef.current.srcObject = mediaStream;
        }
      }, [mediaStream]);

      return (
          <video
            ref={videoRef}
            autoPlay
            id={subscriber.streamId}
            playsInline
            muted
          ></video>
      );
    }

    export default Subscriber;

Publisher-Komponente

import { useEffect, useRef } from 'react';

    const Publisher = ({ publisher, mediaStream }) => {
      const videoRef = useRef(null);

      useEffect(() => {
        if (mediaStream) {
          videoRef.current.srcObject = mediaStream;
        }
      }, [mediaStream]);

      return (
          <video
            ref={videoRef}
            autoPlay
            id={publisher.streamId}
            playsInline
            muted
          ></video>
      );
    }

    export default Publisher;

Zugriff auf MediaStream-Objekte für Abonnenten vor Version 2.27.7

Bitte beachten Sie, dass die oben beschriebene „Media Stream Available“-API die bevorzugte Methode für den Zugriff auf MediaStreams ist. Diese Umgehungslösung ist nur in OpenTok-Versionen vor 2.27.7 erforderlich.

Sie können auf das von einem Abonnenten verwendete MediaStream-Objekt zugreifen. Das HTMLVideoElement-Objekt (im videoElementCreated Ereignis, das vom Abonnenten verschickt wird (siehe vorheriger Abschnitt), hat eine srcObject Eigenschaft. Dies ist das MediaStream-Objekt für den Audio-/Video-Stream des Abonnenten. Sie können dieses MediaStream-Objekt als Quell-MediaStream für ein anderes Video Element (als dessen srcObject Eigenschaft):

session.on('streamCreated', function(event) {
  const subscriber = session.subscribe(event.stream, { insertDefaultUI: false });
  subscriber.on('videoElementCreated', event => {
    // myVideoElement is a Video element you have created:
    myVideoElement.srcObject = event.element.srcObject;
  });
});

In einer gerouteten Sitzung, die die Adaptives Medien-Routingkann sich der MediaStream für einen Teilnehmer ändern, wenn die Sitzung von weitergeleiteten zu gerouteten Streams wechselt (siehe diese Artikel in der Wissensdatenbank des Hilfe-Centers). Fügen Sie einen Ereignis-Listener für die play Ereignis für das Video-Element eines Abonnentenobjekts, um die aktualisierte MediaStream-Instanz zu erhalten:

session.on('streamCreated', function(event) {
  const subscriber = session.subscribe(event.stream, { insertDefaultUI: false });
  subscriber.on('videoElementCreated', event => {
    // myVideoElement is a Video element you have created:
    myVideoElement.srcObject = event.element.srcObject;
    myVideoElement.play()
    event.element.addEventListener('play', () => {
      // The MediaStram has changed
      myVideoElement.srcObject = event.element.srcObject;
      myVideoElement.play();
    });
  });
});