Optymalizuj rozmieszczenie wideo w swojej aplikacji internetowej

Kluczowym elementem, który należy wziąć pod uwagę podczas tworzenia aplikacji internetowych, jest to, jak najlepiej zintegrować wideo z układem strony. Liczba i umieszczanie filmów wideo wpływa na wydajność strony, doświadczenie użytkownika i ogólną estetykę. Ten artykuł zawiera wskazówki ułatwiające deweloperom określenie, ile filmów wideo ma być umieszczanych na stronie internetowej, oraz najlepszy rozmiar rozdzielczości wideo w celu zoptymalizowania środowiska użytkownika końcowego.

Zrozumienie rozdzielczości wideo

Deweloperzy muszą znać ważne szczegóły dotyczące rozdzielczości wideo. Rozdzielczość odnosi się do liczby pikseli wyświetlanych na danych wyjściowych wideo, zwykle mierzonych w width x height formacie. Wyższa rozdzielczość oznacza więcej pikseli, co prowadzi do ostrzejszego i jaśniejszego obrazu. Dostępne rozdzielczości wideo przychodzące w połączeniach wideo w usługach Azure Communication Services obejmują:

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

Czynniki wpływające na jakość wideo

Kilka czynników wpływa na liczbę filmów wideo, które można skutecznie umieścić na stronie internetowej. Czynniki te obejmują zagadnienia dotyczące typu urządzenia, rozdzielczości, dostępnej przepustowości i środowiska użytkownika.

Możliwości urządzeń lokalnych

Typ urządzenia używanego do wyświetlania strony internetowej odgrywa znaczącą rolę. Na przykład komputery stacjonarne i laptopy z większymi ekranami mogą pomieścić więcej filmów wideo niż urządzenia przenośne. Zalecamy stosowanie dynamicznych technik projektowania w celu dostosowania liczby i rozmiarów filmów wideo na podstawie wymiarów ekranu.

Ponadto maszyna lokalna musi przetwarzać, kodować i wyświetlać te filmy wideo prawidłowo. Rozmiar ekranu monitora lokalnego i możliwości przeglądarki określają również liczbę aktywnych filmów wideo, które mogą być wyświetlane jednocześnie na stronie internetowej.

Rozdzielczość i rozmiar ekranu wideo

Rozdzielczość wyświetlania urządzenia użytkownika końcowego ma bezpośredni wpływ na liczbę filmów wideo, które można wyświetlić na stronie. Im większa rozdzielczość monitora i ekranu, tym więcej filmów wideo można wyświetlić.

Należy pamiętać, że dla każdego filmu wideo, które umieszczasz na stronie, tym większa przepustowość internetu jest wymagana. Ponadto maszyna lokalna musi mieć wystarczające możliwości wydajności, aby kodować i wyświetlać wideo prawidłowo.

Zalecamy równoważenie jakości i wydajności wideo. Nie wypełniaj każdego piksela na ekranie sygnałem wideo, co może przeciążyć użytkownika. Rozważ przepustowość przychodzącą i wychodzącą podczas dodawania kolejnych filmów wideo do strony.

Zagadnienia dotyczące przepustowości internetowej

Aby poprawić środowisko użytkownika końcowego, musimy zrozumieć, jak prędkości internetowe są mierzone i jakie czynniki mogą mieć na nie wpływ. Szybkość internetu jest zwykle mierzona w megabitach na sekundę (Mb/s), co wskazuje szybkość pobierania lub przekazywania danych. Kilka czynników może mieć wpływ na te prędkości, w tym typ połączenia internetowego (światłowodowe,, sieć Wi-Fi, sieć komórkowa), jakość sprzętu sieciowego (modem, router) i liczbę urządzeń podłączonych do sieci.

Podczas umieszczania wielu filmów wideo na stronie internetowej należy wziąć pod uwagę przepustowość sieci użytkownika. Wideo o wyższej rozdzielczości wymagają więcej danych do strumieniowego przesyłania. Im więcej wideo umieszczonych na stronie, tym więcej przepustowości zużywa każde z nich. Jeśli ktoś łączy się z Internetem za pośrednictwem połączenia z niższą ogólną przepustowością, ich możliwość oglądania online wideo o wyższej rozdzielczości lub wielu filmów na stronie jest ograniczona. Z drugiej strony, jeśli ktoś ma wyższą przepustowość internetu zarówno dla ruchu przychodzącego, jak i wychodzącego, ma większą możliwość dostarczania i korzystania z filmów wideo o wysokiej rozdzielczości i uwzględnienia większej liczby filmów wideo na stronie.

Metody najlepszego optymalizowania sposobu obsługi przychodzących strumieni wideo

Korzystanie z biblioteki interfejsu użytkownika sieci Web

Biblioteka interfejsu użytkownika usług Azure Communication Services to zaawansowane narzędzie dla deweloperów, którzy chcą tworzyć bezproblemowe i wizualnie atrakcyjne aplikacje internetowe. Biblioteka interfejsu użytkownika sieci Web oferuje kompleksowy zestaw wstępnie utworzonych składników interfejsu użytkownika, które są łatwe do zintegrowania i wysoce dostosowywalne. To rozwiązanie umożliwia deweloperom skoncentrowanie się na tworzeniu funkcji, a nie na projektowaniu od podstaw.

Biblioteka interfejsu użytkownika sieci Web zapewnia spójne standardy projektowania w różnych projektach i platformach, zwiększając środowisko użytkownika i skracając czas programowania. Jego obszerna dokumentacja i aktywna obsługa społeczności sprawiają, że jest doskonałym wyborem zarówno dla początkujących, jak i doświadczonych deweloperów. Stosując bibliotekę internetowego interfejsu użytkownika, możesz usprawnić przepływ pracy, tworzyć profesjonalne interfejsy i wydajniej dostarczać atrakcyjne aplikacje internetowe. Ponadto użycie biblioteki interfejsu użytkownika sieci Web usuwa zgadywanie określania, ile filmów wideo można optymalnie subskrybować jednocześnie.

Używaj interfejsu API do optymalnego liczenia wideo

Zestaw SDK webJS usług Azure Communication Services wprowadził optymalną liczbę wideo (OVC), która informuje aplikacje o liczbie napływających filmów wideo od różnych uczestników, które mogą być optymalnie renderowane podczas rozmowy grupowej. Właściwość optimalVideoCount dostosowuje się dynamicznie na podstawie przepustowości sieci i możliwości sprzętowych.

Optymalna liczba filmów wideo zwraca liczbę całkowitą definiującą idealną liczbę filmów wideo, które mogą być wyświetlane na stronie w sieci. Aplikacje powinny zaktualizować liczbę wideo renderowanych zgodnie z danymi wyjściowymi z OVC.

Deweloperzy powinni upewnić się, że ich aplikacja subskrybuje zmiany w rozmowach grupowych Optimal Video Count i dynamicznie dostosowuje liczbę wideo renderowanych na stronie internetowej na podstawie licznika OVC. Wartość optymalnej liczby wideo (OVC) aktualizuje się co 10 sekund.

Należy odwołać się do cechy OptimalVideoCount za pomocą metody obiektu Call. Następnie można ustawić odbiornik za pomocą metody on z OptimalVideoCountCallFeature, aby otrzymywać powiadomienia, gdy optimalVideoCount się zmienia.

Aby anulować subskrypcję zmian, możesz wywołać metodę off. Bieżąca maksymalna liczba przychodzących filmów wideo, które można renderować na stronie internetowej, wynosi 16. Aby prawidłowo obsługiwać 16 przychodzących filmów wideo, komputer powinien mieć co najmniej 16 GB pamięci RAM i 4-rdzeniowy lub większy procesor, który nie jest starszy niż trzy lata.

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

Gdy zmienia się optymalna liczba wideo, jeśli wynik wskazuje na zwiększoną zdolność lokalnego komputera do odbioru większej liczby nadchodzących filmów, możesz utworzyć nowe przychodzące wideo za pomocą metody createView, aby wyświetlić więcej strumieni wideo na stronie.

Z drugiej strony, jeśli optymalna liczba maleje i jest mniejsza niż bieżąca liczba filmów na stronie, rozważ usunięcie filmu za pomocą metody dispose i odpowiednie zaktualizowanie układu aplikacji.

Powód zmiany optymalnej liczby wideo

Gdy zestaw SDK dostosowuje liczbę renderowanych strumieni wideo, deweloperzy mogą zobaczyć, dlaczego nastąpiła zmiana. Zdarzenie optimalVideoCountChanged zawiera właściwość reason, co pomaga w dostosowywaniu interfejsu użytkownika i rozwiązywaniu problemów z jakością.

Obsługiwane powody

• Przepustowość — ograniczenia sieci
• Wydajność — ograniczenia urządzeń

Examples:

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', () => {}); 

Kwestie, które należy wziąć pod uwagę podczas dodawania filmu wideo 1080p lub 720p do strony.

• Można umieścić jedno wideo przychodzące w jakości 1080p z pozostałymi mniejszymi niż 720p.
• Możesz umieścić dwa filmy o jakości 720p, reszta mniejsza niż 720p.

Zestaw SDK WebJS do wykonywania połączeń obsługuje przesyłanie strumieniowe wideo 1080p. Aby wysłać 1080p z przeglądarki pulpitu internetowego, należy użyć wersji 134.1 lub nowszej wersji ogólnie dostępnej lub publicznej wersji zapoznawczej zestawu SDK.

Na przykład podczas rozmowy grupowej, w której siedmiu uczestników ma włączone kamery wideo, na każdej stronie klienta można wybrać dwóch uczestników, których filmy będą wyświetlane w wyższej rozdzielczości. Ci dwaj uczestnicy ustawili swoje wideo na 720p, ustawiając widoki na stronie internetowej na 720 pikseli wysokości i 1280 pikseli szerokości (lub więcej). Pozostałe pięć filmów wideo uczestników powinno być ustawionych na niższą rozdzielczość, taką jak 360p lub niższa.

• Upewnij się, że łączna liczba renderowanych filmów wideo nie przekracza wartości Optimal Video Count (OVC).

• Każdy klient może wybrać kanał wideo od określonych użytkowników i dostosować rozmiar rozdzielczości na poszczególnych urządzeniach.

• Możliwość wysyłania konkretnej rozdzielczości wideo przez każdego uczestnika może się różnić. Niektóre komputery są wyposażone w kamery o wyższej jakości, umożliwiając im przesyłanie wideo 1080p. Z drugiej strony niektóre przeglądarki mobilne mają niższe możliwości transmisji wideo, takie jak tylko 540p. Jeśli rozdzielczość wideo zostanie osadzona na 1080p lub 720p na stronie, przychodzące wideo może nie odpowiadać tej rozdzielczości. W takim przypadku system skaluje strumień wideo w celu wypełnienia rozmiaru modułu renderowania wideo.

• Obecnie na stronie internetowej można renderować maksymalnie dwa strumienie wideo 720p. Jeśli włączono więcej niż dwa strumienie 720p, wszystkie odwzorowania wideo 720p są przesyłane strumieniowo na 540p.

• Maksymalna liczba przychodzących strumieni zdalnych, które użytkownik może subskrybować, to 16 strumieni wideo oraz jedno udostępnianie ekranu w przeglądarkach na komputerach stacjonarnych, a 4 strumienie wideo oraz jedno udostępnianie ekranu w mobilnych przeglądarkach internetowych.

• Usługa Azure Communication Services wideo Simulcast zwiększa możliwości przesyłania strumieniowego wideo, umożliwiając jednoczesne dostarczanie pojedynczego wideo przez klienta końcowego w wielu rozdzielczościach i przepływnościach bitów.

  Ta funkcja umożliwia widzom z różnymi warunkami sieciowymi wybór wersji wideo, którą chcą otrzymać, aby uzyskać najlepszą możliwą jakość wideo bez buforowania i przerw. Dzięki optymalizacji użycia przepustowości program simulcast wysyła strumienie o wyższej rozdzielczości tylko do użytkowników, którzy mogą je obsługiwać. To zachowanie minimalizuje niepotrzebne przesyłanie danych. Simulcast poprawia ogólne środowisko użytkownika, zapewniając stabilną i spójną jakość wideo oraz umożliwia adaptacyjne przesyłanie strumieniowe.

  Program Simulcast nie jest obsługiwany we wszystkich przeglądarkach, w szczególności w przeglądarkach mobilnych i macOS Safari. Jeśli uczestnik korzystający z przeglądarki Safari systemu iOS, Android Chrome lub macOS Safari renderuje wideo o rozdzielczości 720p, a inny uczestnik spróbuje renderować ten sam film w niższej rozdzielczości, obaj otrzymają niższą rozdzielczość. Ten problem występuje, ponieważ te urządzenia ustalają priorytety mniejszych rozdzielczości, gdy wysyłanie simulcast nie jest obsługiwane.

Jak skonfigurować wysyłanie strumienia 1080p

W przypadku używania zestawu SDK usługi WebJS do wysyłania wideo w rozdzielczości 1080p należy użyć interfejsu API ograniczeń wideo i określić, że chcesz użyć formatu 1080p. Jeśli interfejs API ograniczeń wideo nie jest używany i nie określono wartości 1080p, domyślna rozdzielczość strumienia wideo to 720p.

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

Elementy do zanotowania podczas wysyłania strumienia wideo 1080p

• Aparat powinien być w stanie wysłać wideo 1080p. Aby sprawdzić obsługiwane rozdzielczości aparatu, możesz użyć następującego przykładu języka JavaScript, aby określić dostępne rozdzielczości.

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();

• Maszyna wysyłająca 1080p musi mieć wystarczająco zaawansowaną maszynę do obsługi wysyłania 1080p.
• Klient po stronie odbiorcy (osoby akceptujące wideo 1080p) musi mieć element HTML5 do renderowania wideo w 1080p, aby akceptować 1080p. Jeśli żaden uczestnik połączenia nie ma włączonej możliwości 1080p do odbioru wideo, połączenie dostosowuje się do niższej rozdzielczości.
• Wszystkie osoby wysyłające i odbierające strumień wideo 1080p muszą mieć przepustowość do obsługi strumienia 1080p.

Ile filmów umieścić w siatce jednocześnie

Ponieważ zestaw SDK połączeń webJS usług Azure Communication Services nadal ewoluuje, jedną z jego kluczowych funkcji jest obsługa wielu przychodzących strumieni wideo w układzie siatki w przeglądarkach klasycznych i mobilnych. Ta funkcja jest cenna w scenariuszach, takich jak wirtualne klasy, duże spotkania zespołowe lub centra pomocy technicznej klienta, w których wielu uczestników musi być widocznych jednocześnie.

Jednak ta skalowalność wprowadza kompromis między liczbą strumieni wideo renderowanych i jakością wizualizacji każdego strumienia. Ponieważ całkowity rozmiar ekranu jest stały, zwiększenie liczby kafelków wideo oznacza, że każdy indywidualny moduł renderujący wideo musi zajmować mniejszą część ekranu. Aby zachować wydajność i uniknąć przeciążenia potoku renderowania przeglądarki, zestaw SDK dynamicznie dostosowuje rozdzielczość każdego przychodzącego strumienia wideo na podstawie jego renderowanego rozmiaru. Gwarantuje to, że przepustowość i użycie procesora pozostają w dopuszczalnych limitach, ale oznacza to również, że wraz z dołączeniem większej liczby uczestników rozdzielczość każdego wideo może się zmniejszyć, aby dopasować siatkę.

To zachowanie adaptacyjne pomaga zapewnić stabilną wydajność użytkownika. Na przykład na siatce 2x2 z 4 uczestnikami każdy wideo można wyświetlać w wyższej rozdzielczości. Natomiast w przypadku siatki 5x5 wyświetlającej 25 uczestników każdy kafelek jest mniejszy, a zestaw SDK może obniżyć rozmiar strumieni wideo w celu dopasowania go do rozmiaru ekranu. Takie podejście redukuje zużycie przepustowości i obniża ryzyko zgubionych klatek lub opóźnień. Aby obsługiwać maksymalnie 25 przychodzących strumieni wideo, zaleca się używanie komputera z co najmniej 8-rdzeniowym procesorem i 16 GB pamięci RAM

W poniższej tabeli pokazano, jak rozdzielczość wideo zmienia się na podstawie liczby uczestników wyświetlanych w przychodzącej siatce wideo w dowolnym momencie.

Podsumowanie

Aby określić, ile filmów wideo ma być umieszczanych na stronie internetowej, należy dokładnie rozważyć rozwiązanie, typ urządzenia, przepustowość i środowisko użytkownika. Postępuj zgodnie z tymi wytycznymi i najlepszymi rozwiązaniami, aby tworzyć aplikacje internetowe, które nie tylko wyglądają atrakcyjnie, ale także bezproblemowo działają, zapewniając optymalne środowisko wyświetlania dla użytkowników różnych urządzeń i szybkości połączeń.

Powiązane artykuły

Możesz użyć interfejsu API statystyk jakości multimediów w zestawie SDK WebJS, aby określić rozdzielczość wysyłania i odbierania wideo w czasie rzeczywistym. Aby uzyskać więcej informacji, zobacz Jakość multimediów.