Optimieren der Videoplatzierung in Ihrer Web-App

Ein wichtiges Element, das Sie beim Erstellen von Web-Apps berücksichtigen sollten, ist die optimale Integration von Videos in das Seitenlayout. Die Platzierung und Anzahl von Videos kann sich auf die Seitenleistung, die Benutzerqualität und die allgemeine Ästhetik auswirken. Dieser Artikel enthält Richtlinien, mit denen Entwickler bestimmen können, wie viele Videos auf einer Webseite platziert werden sollen, und die beste Videoauflösungsgröße, um die Endbenutzererfahrung zu optimieren.

Grundlegendes zur Videoauflösung

Entwickler müssen wichtige Details zur Videoauflösung kennen. Die Auflösung bezieht sich auf die Anzahl der Pixel, die in einer Videoausgabe angezeigt werden, normalerweise im width x height Format gemessen. Eine höhere Auflösung bedeutet mehr Pixel, was zu schärferen und klareren Bildern führt. Eingehende Videoauflösungen, die in Azure Communication Services-Videoanrufen verfügbar sind, umfassen:

• 1080p (Full HD): 1920 x 1080 Pixel
• 720p (HD): 1280 x 720 Pixel
• 540p (qHD): 960 x 540 Pixel
• 360p (SD): 640 x 360 Pixel
• 240p: 426 x 240 Pixel
• 180p: 320 x 180 Pixel

Faktoren, die die Videoqualität beeinflussen

Mehrere Faktoren beeinflussen, wie viele Videos Sie effektiv auf einer Webseite platzieren können. Zu diesen Faktoren gehören Gerätetyp, Auflösung, verfügbare Bandbreite und Überlegungen zur Benutzererfahrung.

Lokale Gerätefähigkeiten

Der Typ des Geräts, das zum Anzeigen der Webseite verwendet wird, spielt eine wichtige Rolle. Desktops und Laptops mit größeren Bildschirmen können beispielsweise mehr Videos aufnehmen als mobile Geräte. Es wird empfohlen , reaktionsfähige Designtechniken zu verwenden, um die Anzahl und Größe von Videos basierend auf Bildschirmabmessungen anzupassen.

Darüber hinaus muss der lokale Computer diese Videos ordnungsgemäß verarbeiten, codieren und anzeigen. Die Größe des lokalen Bildschirms und der Browserfähigkeiten bestimmen auch die Anzahl der aktiven Videos, die gleichzeitig auf einer Webseite angezeigt werden können.

Auflösung und Videobildschirmgröße

Die Anzeigeauflösung des Endbenutzergeräts wirkt sich direkt auf die Anzahl der Videos aus, die pro Seite angezeigt werden können. Je höher die Auflösung des Monitors und des Bildschirms ist, desto mehr Videos können Sie anzeigen.

Denken Sie daran, dass für jedes Video, das Sie auf einer Seite platzieren, je mehr Internetbandbreite die Videos erfordern. Darüber hinaus muss der lokale Computer über ausreichende Leistungsfunktionen verfügen, um das Video ordnungsgemäß zu codieren und anzuzeigen.

Es wird empfohlen, die Videoqualität und die Leistung zu ausgleichen. Füllen Sie nicht jedes Pixel auf dem Bildschirm mit Videoausgabe aus, was den Benutzer überwältigen kann. Berücksichtigen Sie die eingehende und ausgehende Bandbreite, wenn Sie einer Seite weitere Videos hinzufügen.

Überlegungen zur Internetbandbreite

Um die Endbenutzererfahrung zu verbessern, müssen wir verstehen, wie Internetgeschwindigkeiten gemessen werden und welche Faktoren sie beeinflussen können. Internetgeschwindigkeiten werden in der Regel in Megabits pro Sekunde (Mbps) gemessen, was die Rate angibt, mit der Daten heruntergeladen oder hochgeladen werden. Mehrere Faktoren können diese Geschwindigkeiten beeinflussen, einschließlich der Art der Internetverbindung (Glasfaser, Kabel, Wlan, Mobilfunk), der Qualität der Netzwerkgeräte (Modem, Router) und der Anzahl der mit dem Netzwerk verbundenen Geräte.

Berücksichtigen Sie beim Platzieren mehrerer Videos auf einer Webseite die Netzwerkbandbreite des Benutzers. Videos mit höherer Auflösung erfordern mehr Daten zum Streamen. Je mehr Videos auf einer Seite platziert werden, desto mehr Bandbreite verbraucht jeder. Wenn jemand über eine Verbindung mit einem geringeren Gesamtbandbreitendurchsatz eine Verbindung mit dem Internet herstellt, ist die Möglichkeit, Videos mit höherer Auflösung oder mehrere Videos auf einer Seite zu streamen, eingeschränkt. Wenn hingegen jemand eine höhere Internetbandbreite für eingehenden und ausgehenden Datenverkehr hat, haben sie eine größere Möglichkeit, Videos mit hoher Auflösung bereitzustellen und zu verbrauchen und mehr Videos auf der Seite aufzunehmen.

Methoden zur optimalen Optimierung der Behandlung eingehender Videostreams

Verwenden der Web-UI-Bibliothek

Die Azure Communication Services Web UI Library ist ein leistungsstarkes Tool für Entwickler, die nahtlose und visuell ansprechende Webanwendungen erstellen möchten. Die Web-UI-Bibliothek bietet einen umfassenden Satz vordefinierter UI-Komponenten, die einfach zu integrieren und hochgradig anpassbar sind. Diese Lösung ermöglicht Es Entwicklern, sich auf die Erstellung von Funktionen zu konzentrieren, anstatt von Grund auf neu zu entwerfen.

Die Web-UI-Bibliothek stellt einheitliche Designstandards für verschiedene Projekte und Plattformen sicher, wodurch die Benutzererfahrung verbessert und die Entwicklungszeit reduziert wird. Die umfangreiche Dokumentation und die aktive Community-Unterstützung machen es zu einer ausgezeichneten Wahl für Anfänger und erfahrene Entwickler. Indem Sie die Web-UI-Bibliothek anwenden, können Sie Ihren Workflow optimieren, professionelle Schnittstellen erstellen und ansprechende Webanwendungen effizienter bereitstellen. Zudem nimmt die Verwendung der Web-Oberflächenbibliothek das Rätselraten darüber ab, wie viele Videos Sie gleichzeitig optimal abonnieren können.

Optimale Videoanzahl-API verwenden

Das Azure Communication Services WebJS SDK hat die optimale Videoanzahl (OVC) eingeführt, die Anwendungen darüber informiert, wie viele eingehende Videos verschiedener Teilnehmer während eines Gruppenanrufs optimal gerendert werden können. Die optimalVideoCount Eigenschaft passt sich dynamisch basierend auf Netzwerkbandbreite und Hardwarefunktionen an.

Die optimale Videoanzahl gibt eine ganze Zahl zurück, die die ideale Anzahl von Videos definiert, die auf einer Webseite angezeigt werden können. Anwendungen sollten die Anzahl der Videos aktualisieren, die gemäß der Ausgabe von OVC gerendert werden.

Entwickelnde sollten sicherstellen, dass ihre Anwendung Änderungen an Optimal Video Count in Gruppenaufrufen abonniert und die Anzahl der Videos, die auf einer Webseite gerendert werden, dynamisch basierend auf der OVC-Anzahl anpasst. Der Wert aus der optimalen Videoanzahl (OVC) wird alle 10 Sekunden aktualisiert.

Sie müssen über die Featuremethode des Call-Objekts auf das Feature OptimalVideoCount verweisen. Anschließend können Sie einen Listener über die on Methode des OptimalVideoCountCallFeature festlegen, um benachrichtigt zu werden, wenn sich optimalVideoCount ändert.

Um die Änderungen abbestellen zu können, können Sie die Off-Methode aufrufen. Die aktuelle maximale Anzahl eingehender Videos, die auf einer Webseite gerendert werden können, beträgt 16. Um 16 eingehende Videos ordnungsgemäß zu unterstützen, sollte der Computer mindestens 16 GB RAM und eine 4-Core- oder höhere CPU aufweisen, die nicht älter als drei Jahre ist.

const optimalVideoCountFeature = call.feature(Features.OptimalVideoCount);
optimalVideoCountFeature.on('optimalVideoCountChanged', () =\> {
    const localOptimalVideoCountVariable = optimalVideoCountFeature.optimalVideoCount;
})

Wenn sich der optimale Wert für die Videoanzahl ändert und das Ergebnis auf eine erhöhte Kapazität auf dem lokalen Computer hinweist, können Sie ein neues eingehendes Video mithilfe der createView-Methode erstellen, um weitere eingehende Videodatenströme anzuzeigen, die auf der Seite angezeigt werden sollen.

Umgekehrt sollten Sie, wenn die optimale Anzahl sinkt und kleiner als die aktuelle Anzahl von Videos auf der Seite ist, ein Video mithilfe der Dispose-Methode löschen und das Anwendungslayout entsprechend aktualisieren.

Grund für optimale Videoanzahl geändert

Wenn das SDK die Anzahl der gerenderten Videostreams anpasst, können Entwickler sehen, warum die Änderung aufgetreten ist. Das optimalVideoCountChanged Ereignis enthält eine reason Eigenschaft, die Ihnen dabei hilft, die Benutzeroberfläche anzupassen und Qualitätsprobleme zu beheben.

Unterstützte Gründe:

• Bandbreite – Netzwerkbeschränkungen
• Leistung – Geräteeinschränkungen

Beispiele

const ovcFeature = this.call.feature(Features.OptimalVideoCount);

// Shows the optimalVideoCount value
console.log(ovcFeature.optimalVideoCount);

// shows the last reason for a change
console.log(ovcFeature.lastOvcChangeReason); 

// listener for getting updates on changes
ovcFeature.on('optimalVideoCountChanged', () => {}); 

Dinge, die Sie beim Hinzufügen eines 1080p- oder 720p-Videos zu einer Seite berücksichtigen sollten.

• Sie können ein eingehendes Video von 1080p mit weniger als 720p platzieren.
• Sie können zwei eingehende Videos von 720p mit dem Rest platzieren, der kleiner als 720p ist.

Das WebJS-Aufrufen-SDK unterstützt das 1080p-Videostreaming. Um eine 1080p aus einem Web-Desktop-Browser zu senden, müssen Sie Version 134.1 oder höher des GA oder Public Preview-Calling-SDK verwenden.

Beispielsweise können Sie in einem Gruppenanruf, in dem sieben Teilnehmer ihre Videokameras aktiviert haben, auf jeder Clientseite auswählen, dass die Videos von zwei Teilnehmern in höheren Auflösungen angezeigt werden. Diese beiden Teilnehmer zeigen ihr Video in 720p, indem sie ihre Ansichten auf der Webseite auf 720 Pixel Höhe und 1280 Pixel Breite (oder größer) festlegen. Die verbleibenden fünf Teilnehmervideos sollten auf eine niedrigere Auflösung festgelegt werden, z. B. 360p oder niedriger.

• Stellen Sie sicher, dass die Gesamtzahl der gerenderten Videos den Wert "Optimale Videoanzahl(OVC)" nicht überschreitet.

• Jeder Client kann den Videofeed von bestimmten Benutzern auswählen und die Auflösungsgröße auf ihren einzelnen Geräten anpassen.

• Die Fähigkeit jedes Teilnehmers, eine bestimmte Videoauflösung zu senden, kann variieren. Einige Computer sind mit kameras höherer Qualität ausgestattet, sodass sie ein 1080p-Video übertragen können. Umgekehrt verfügen einige mobile Browser über niedrigere Videoübertragungsfunktionen, z. B. nur 540p. Wenn Sie die Videoauflösung auf eine Seite mit einer Auflösung von 1080p oder 720 Pixel eingebettet haben, stimmt das eingehende Video möglicherweise nicht mit dieser Auflösung überein. In diesem Fall vergrößert das System den Videostream, um die Größe des Videorenderers auszufüllen.

• Derzeit können maximal zwei 720p-Videostreams auf einer Webseite gerendert werden. Wenn mehr als zwei 720p-Streams aktiviert sind, werden alle 720p-Videodarstellungen mit 540p gestreamt.

• Die maximale Anzahl eingehender Remotestreams, die ein Benutzer abonnieren kann, beträgt 16 Videostreams plus eine (1) Bildschirmfreigabe in Desktopbrowsern und vier (4) Videostreams plus eine (1) Bildschirmfreigabe in mobilen Webbrowsern.

• Die Video-Simulcast-Funktion von Azure Communication Services verbessert das Videostreaming, indem ein einzelnes Video aktiviert wird, das von einem Endclient mit mehreren Auflösungen und Bitraten gleichzeitig bereitgestellt wird.

  Mit dieser Funktion können Betrachter mit unterschiedlichen Netzwerkbedingungen auswählen, welche Videodarstellung ausgewählt werden soll, um die bestmögliche Videoqualität ohne Pufferung oder Unterbrechungen zu erhalten. Durch die Optimierung der Bandbreitennutzung sendet Simulcast Datenströme mit höherer Auflösung nur an Benutzer, die sie unterstützen können. Dieses Verhalten minimiert unnötige Datenübertragungen. Simulcast verbessert die Benutzerfreundlichkeit insgesamt, indem eine stabile und konsistente Videoqualität bereitgestellt wird und adaptives Streaming ermöglicht wird.

  Simulcast wird in allen Browsern, insbesondere mobilen Browsern und macOS Safari, nicht unterstützt. Wenn ein Teilnehmer, der iOS Safari, Android Chrome oder macOS Safari verwendet, ein 720p-Video rendert und ein anderer Teilnehmer versucht, dasselbe Video mit einer niedrigeren Auflösung zu rendern, erhalten beide die niedrigere Auflösung. Dieses Problem tritt auf, da diese Geräte kleinere Auflösungen priorisieren, wenn das Senden von Simulcast nicht unterstützt wird.

So konfigurieren Sie das Senden eines 1080p-Datenstroms

Wenn Sie das WebJS SDK zum Senden von Videos mit einer Auflösung von 1080p verwenden, müssen Sie die Videoeinschränkungs-API verwenden und angeben, dass Sie 1080p verwenden möchten. Wenn die Videoeinschränkungs-API nicht verwendet wird und 1080p nicht angegeben ist, beträgt die Standardauflösung des Videostreams 720p.

    const callOptions = {
        videoOptions: {
            localVideoStreams: [...],
            constraints: {
                send: {
                    height: {
                        max: 1080
                    }
                }
            }
        },
        audioOptions: {
            muted: false
        }
    };
    // make a call
    this.callAgent.startCall(identitiesToCall, callOptions);

Zu beachtende Elemente beim Senden eines 1080p-Videostreams

• Die Kamera sollte in der Lage sein, ein 1080p-Video zu senden. Um die auflösungen zu überprüfen, die Ihre Kamera unterstützt, können Sie das folgende JavaScript-Beispiel verwenden, um die verfügbaren Auflösungen zu ermitteln.

async function getSupportedResolutions() {
  const constraints = {
    video: {
      width: { ideal: 4096 }, // Try to get the maximum width
      height: { ideal: 2160 } // Try to get the maximum height
    }
  };
 
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    const videoTrack = stream.getVideoTracks()[0];
    const settings = videoTrack.getSettings();
    
    console.log(`Supported resolution: ${settings.width}x${settings.height}`);
    
    // Stop the video track to release the camera
    videoTrack.stop();
  } catch (error) {
    console.error('Error accessing media devices.', error);
  }
}
 
getSupportedResolutions();

• Der Computer, der eine 1080p sendet, muss über einen leistungsfähigen Computer verfügen, um das Senden eines 1080p zu unterstützen.
• Der Client, der sich auf der Empfängerseite befindet (Personen, die ein 1080p-Video akzeptieren) müssen über ein HTML5-Videowiedergabeelement verfügen, das 1080p akzeptieren kann. Wenn ein beliebiger Teilnehmer am Anruf keine 1080p-Funktion zum Empfangen des Videos aktiviert hat, passt sich der Anruf an und wählt eine kleinere Auflösung.
• Alle Personen im Anruf, die einen 1080p-Videostream senden und empfangen, müssen über die Bandbreite verfügen, um einen 1080p-Stream zu unterstützen.

Anzahl von Videos, die gleichzeitig in einem Raster platziert werden sollen

Da sich das Azure Communication Services WebJS Calling SDK weiterentwickelt, unterstützt eine seiner Wichtigsten Funktionen viele eingehende Videostreams in einem Rasterlayout auf Desktop- und mobilen Browsern. Dieses Feature ist nützlich für Szenarien wie virtuelle Klassenzimmer, große Teambesprechungen oder Kundensupportcenter, in denen mehrere Teilnehmer gleichzeitig sichtbar sein müssen.

Diese Skalierbarkeit führt jedoch zu einem Kompromiss zwischen der Anzahl der gerenderten Videostreams und der visuellen Qualität jedes Datenstroms. Da die Gesamtfläche des Bildschirms festgelegt ist, bedeutet die Erhöhung der Anzahl der Videokacheln, dass jeder einzelne Videorenderer einen kleineren Teil des Bildschirms belegen muss. Um die Leistung aufrechtzuerhalten und eine Überlastung der Renderingpipeline des Browsers zu vermeiden, passt das SDK die Auflösung jedes eingehenden Videostreams basierend auf seiner gerenderten Größe dynamisch an. Dadurch wird sichergestellt, dass Bandbreite und CPU-Auslastung innerhalb akzeptabler Grenzwerte bleiben. Dies bedeutet aber auch, dass die Auflösung jedes Videos möglicherweise verringert wird, um sich an das Raster anzupassen.

Dieses adaptive Verhalten trägt dazu bei, eine stabile Benutzerleistung sicherzustellen. In einem 2x2-Raster mit 4 Teilnehmern kann jedes Video beispielsweise mit einer höheren Auflösung gerendert werden. Im Gegensatz dazu, bei einem 5x5-Raster, das 25 Teilnehmer anzeigt, ist jede Kachel kleiner und das SDK kann Videostreams herunterskalieren, um sie an die Anzeigegröße anzupassen. Dieser Ansatz reduziert die Bandbreitennutzung und verringert die Wahrscheinlichkeit, dass Frames verworfen oder deren Wiedergabe verzögert werden. Um bis zu 25 eingehende Videodatenströme zu unterstützen, empfiehlt es sich, einen Computer mit mindestens einem 8-Core-Prozessor und 16 GB RAM zu verwenden.

In der folgenden Tabelle wird veranschaulicht, wie sich die Videoauflösung basierend auf der Anzahl der Teilnehmer ändert, die im eingehenden Videoraster gleichzeitig angezeigt werden.

Schlussfolgerung

Um zu bestimmen, wie viele Videos auf einer Webseite platziert werden sollen, müssen Sie die Auflösung, den Gerätetyp, die Bandbreite und die Benutzererfahrung sorgfältig berücksichtigen. Befolgen Sie diese Richtlinien und bewährten Methoden, um Web-Apps zu erstellen, die nicht nur ansprechend aussehen, sondern auch nahtlos funktionieren und benutzern auf verschiedenen Geräten und Verbindungsgeschwindigkeiten ein optimales Anzeigeerlebnis bieten.

Verwandte Artikel

Sie können die Medienqualitätsstatistik-API im WebJS SDK verwenden, um die Videoübertragungs- und Empfangsauflösung in Echtzeit zu ermitteln. Weitere Informationen finden Sie unter Medienqualität.