Optimera videoplacering i webbappen

Ett viktigt element att tänka på när du skapar webbappar är hur du bäst integrerar video i sidlayouten. Placering och antal videor kan påverka sidprestanda, användarkvalitet och övergripande estetik. Den här artikeln innehåller riktlinjer som hjälper utvecklare att avgöra hur många videor som ska visas på en webbsida och den bästa videoupplösningsstorleken för att optimera slutanvändarupplevelsen.

Förstå videoupplösning

Utvecklare måste känna till viktig information om videoupplösning. Upplösning avser antalet bildpunkter som visas på en videoutdata, vanligtvis mätt i width x height format. Högre upplösning innebär fler bildpunkter, vilket leder till skarpare och tydligare bilder. Inkommande videoupplösningar som är tillgängliga i Azure Communication Services-videosamtal är:

• 1080p (full HD): 1920 x 1 080 bildpunkter
• 720p (HD): 1 280 x 720 bildpunkter
• 540p (qHD): 960 x 540 bildpunkter
• 360p (SD): 640 x 360 bildpunkter
• 240p: 426 x 240 bildpunkter
• 180p: 320 x 180 bildpunkter

Faktorer som påverkar videokvaliteten

Flera faktorer påverkar hur många videor du effektivt kan placera på en webbsida. Dessa faktorer omfattar enhetstyp, upplösning, tillgänglig bandbredd och överväganden för användarupplevelse.

Lokala enheters kapaciteter

Den typ av enhet som används för att visa webbsidan spelar en viktig roll. Till exempel kan stationära och bärbara datorer med större skärmar hantera fler videor än mobila enheter. Vi rekommenderar att du använder dynamiska designtekniker för att justera antalet och storleken på videor baserat på skärmdimensioner.

Dessutom måste den lokala datorn bearbeta, koda och visa dessa videor korrekt. Storleken på den lokala skärm- och webbläsarfunktionerna avgör också antalet aktiva videor som kan visas samtidigt på en webbsida.

Upplösning och videoskärmstorlek

Slutanvändarenhetens visningsupplösning påverkar direkt antalet videor som du kan visa per sida. Ju högre upplösning bildskärmen och skärmen har, desto fler videor kan du visa.

Ju fler videor du placerar på en sida, desto mer internetbandbredd kräver de. Dessutom måste den lokala datorn ha tillräckliga prestandafunktioner för att koda och visa videon korrekt.

Vi rekommenderar att du balanserar videokvaliteten och prestandan. Fyll inte varje bildpunkt på skärmen med videoutdata, vilket kan överbelasta användaren. Överväg inkommande och utgående bandbredd när du lägger till fler videor på en sida.

Överväganden för Internetbandbredd

För att förbättra slutanvändarupplevelsen måste vi förstå hur Internethastigheter mäts och vilka faktorer som kan påverka dem. Internethastigheter mäts vanligtvis i megabitar per sekund (Mbit/s), vilket anger den hastighet med vilken data laddas ned eller laddas upp. Flera faktorer kan påverka dessa hastigheter, inklusive typen av internetanslutning (fiber, kabel, wifi, mobilnät), kvaliteten på nätverksutrustningen (modem, router) och antalet enheter som är anslutna till nätverket.

När du placerar flera videor på en webbsida bör du tänka på användarens nätverksbandbredd. Videor med högre upplösning kräver mer data att strömma. Ju mer övergripande videor som placeras på en sida, desto mer bandbredd förbrukar var och en. Om någon ansluter till Internet via en anslutning med lägre övergripande bandbreddsdataflöde är deras möjlighet att strömma videor med högre upplösning eller flera videor på en sida begränsad. Om någon däremot har högre Internetbandbredd för både inkommande och utgående trafik har de större möjlighet att leverera och använda högupplösta videor och hantera fler videor på sidan.

Metoder för att optimera hur du hanterar inkommande videoströmmar på bästa sätt

Använda webbgränssnittsbiblioteket

Webbgränssnittsbiblioteket för Azure Communication Services är ett kraftfullt verktyg för utvecklare som vill skapa sömlösa och visuellt tilltalande webbprogram. Webbgränssnittsbiblioteket erbjuder en omfattande uppsättning fördefinierade gränssnittskomponenter som är enkla att integrera och mycket anpassningsbara. Med den här lösningen kan utvecklare fokusera på att skapa funktioner i stället för att designa från grunden.

Webbgränssnittsbiblioteket säkerställer konsekventa designstandarder för olika projekt och plattformar, vilket förbättrar användarupplevelsen och minskar utvecklingstiden. Dess omfattande dokumentation och aktiva communitystöd gör det till ett utmärkt val för både nybörjare och erfarna utvecklare. Genom att använda webbgränssnittsbiblioteket kan du effektivisera arbetsflödet, skapa gränssnitt av professionell kvalitet och leverera engagerande webbprogram mer effektivt. Om du använder webbgränssnittsbiblioteket tar du också bort gissningen att avgöra hur många videor du kan prenumerera optimalt på samtidigt.

Använda optimalt API för videoantal

Azure Communication Services WebJS SDK introducerade Optimal Video Count (OVC) som informerar program om hur många inkommande videor från olika deltagare som kan renderas optimalt under ett gruppsamtal. Egenskapen optimalVideoCount justeras dynamiskt baserat på nätverksbandbredd och maskinvarufunktioner.

Det optimala antalet videor returnerar ett heltal som definierar det ideala antalet videor som kan visas på en webbsida. Program bör uppdatera antalet videor som återges enligt utdata från OVC.

Utvecklare bör se till att deras program prenumererar på ändringar i Optimal Video Count under gruppanrop och dynamiskt justera antalet videor som visas på en webbsida baserat på OVC-antal. Värdet från optimalt antal video (OVC) uppdateras var 10:e sekund.

Du måste referera till funktionen OptimalVideoCount via funktionsmetoden för anropsobjektet. Du kan sedan ange en lyssnare via on-metoden för OptimalVideoCountCallFeature för att bli meddelad när optimalVideoCount ändras.

Om du vill avbryta prenumerationen på ändringarna kan du anropa off-metoden. Det aktuella maximala antalet inkommande videor som kan renderas på en webbsida är 16. För att kunna stödja 16 inkommande videor korrekt bör datorn ha minst 16 GB RAM-minne och en 4-kärnor eller större CPU som inte är äldre än tre år.

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

Om det finns en ändring i det optimala värdet för antal videor, om resultatet indikerar ökad kapacitet på den lokala datorn för fler inkommande videor, kan du skapa en ny inkommande video med hjälp av createView metoden för att visa fler inkommande videoströmmar som ska visas på sidan.

Om det optimala antalet minskar och är mindre än det aktuella antalet videor på sidan, kan du överväga att ta bort en video genom att använda dispose-metoden och uppdatera programmets layout i enlighet med detta.

Anledningen till ändring av optimalt antal videor

När SDK:et justerar antalet renderade videoströmmar kan utvecklare se varför ändringen inträffade. Händelsen optimalVideoCountChanged innehåller en reason egenskap som hjälper dig att anpassa användargränssnittet och felsöka kvalitetsproblem.

Orsaker som stöds:

• Bandbredd – Nätverksbegränsningar
• Prestanda – Enhetsbegränsningar

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

Saker att tänka på när du lägger till en 1080p- eller 720p-video på en sida.

• Du kan placera en inkommande video på 1 080p med resten mindre än 720p.
• Du kan placera två inkommande 720p-videor med resten mindre än 720p.

WebJS anropande SDK stöder 1080p videouppspelning. Om du vill sända 1080p från en webbläsare på skrivbordet måste du använda version 134.1 eller senare av GA- eller offentlig förhandsversion av samtals-SDK.

Till exempel, i ett gruppsamtal där sju deltagare har sina videokameror på, kan du på varje klientsida välja två deltagares videor visas med högre upplösningar. Dessa två deltagare visar sin video i 720p genom att justera sina vyer på webbsidan till 720 pixlar i höjd och 1280 pixlar i bredd (eller större). De återstående fem deltagarvideorna ska vara inställda på en lägre upplösning, till exempel 360p eller lägre.

• Kontrollera att det totala antalet renderade videor inte överskrider OVC-värdet (Optimal Video Count).

• Varje klient kan välja videoflöde från specifika användare och justera upplösningsstorleken på sina enskilda enheter.

• Varje deltagares möjlighet att skicka en specifik videoupplösning kan variera. Vissa datorer är utrustade med kameror av högre kvalitet, vilket gör det möjligt för dem att överföra en 1080p-video. Omvänt har vissa mobila webbläsare lägre funktioner för videoöverföring, till exempel endast 540p. Om du inbäddade videoupplösningen till 1080p eller 720p på en sida kanske den inkommande videon inte matchar den upplösningen. I det här fallet skalar systemet upp videoströmmen för att fylla videoåtergivningens storlek.

• För närvarande kan högst två 720p-videoströmmar renderas på en webbsida. Om fler än två 720p-strömmar är aktiverade strömmas alla 720p-videoåtergivningar på 540p.

• Det maximala antalet inkommande fjärrströmmar som en användare kan prenumerera på är 16 videoströmmar plus en (1) skärmdelning i skrivbordswebbläsare och fyra (4) videoströmmar plus en (1) skärmdelning på mobila webbläsare.

• Med möjligheten Simulcast i Azure Communication Services förbättras videoströmningen genom att en enda videoström från slutklienten kan levereras samtidigt i flera olika upplösningar och bithastigheter.

  Den här funktionen gör det möjligt för användare med varierande nätverksförhållanden att välja vilken videoåtergivning som ska väljas för att få bästa möjliga videokvalitet utan buffring eller avbrott. Genom att optimera bandbreddsanvändningen skickar simulcast endast strömmar med högre upplösning till användare som kan stödja dem. Det här beteendet minimerar onödig dataöverföring. Simulcast förbättrar den övergripande användarupplevelsen genom att tillhandahålla stabil och konsekvent videokvalitet och möjliggör anpassningsbar strömning.

  Simulcast stöds inte i alla webbläsare, särskilt mobila webbläsare och macOS Safari. Om en deltagare som använder iOS Safari, Android Chrome eller macOS Safari renderar en 720p-video och en annan deltagare försöker återge samma video med lägre upplösning får båda den lägre upplösningen. Det här problemet beror på att dessa enheter prioriterar mindre lösningar när simulcast-sändning inte stöds.

Så här konfigurerar du för att skicka en 1080p-ström

När du använder WebJS SDK för att skicka video med en upplösning på 1080p måste du använda API:et videobegränsningar och ange att du vill använda 1080p. Om API:et för videobegränsningar inte används och 1080p inte har angetts är standardupplösningen för videoströmmar 720p.

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

Objekt att notera när du skickar en 1080p videoström

• Kameran ska kunna skicka en 1080p video. Om du vill kontrollera de upplösningar som kameran stöder kan du använda följande JavaScript-exempel för att fastställa tillgängliga upplösningar.

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

• Datorn som skickar en 1080p måste ha en tillräckligt kraftfull dator för att kunna skicka en 1080p.
• Klienten som är på mottagarsidan (personer som accepterar en 1080p-video) måste ha ett HTML5-element för videoåtergivning som kan 1080p för att acceptera 1080p. Om någon deltagare i samtalet inte har ett 1080p-element aktiverat för att ta emot videon justeras och förhandlas samtalet ned till en mindre upplösning.
• Alla personer i samtalet som skickar och tar emot en 1080p videoström måste ha bandbredden för att stödja en 1080p-ström.

Hur många videor som ska placeras i ett rutnät i taget

När Azure Communication Services WebJS Calling SDK fortsätter att utvecklas, stöder en av dess viktigaste funktioner många inkommande videoströmmar i en rutnätslayout på skrivbords- och mobilwebbläsare. Den här funktionen är värdefull för scenarier som virtuella klassrum, stora teammöten eller kundsupportcenter där flera deltagare måste vara synliga samtidigt.

Den här skalbarheten medför dock en kompromiss mellan antalet renderade videoströmmar och den visuella kvaliteten på varje ström. Eftersom den totala skärmfastigheten är fast innebär en ökning av antalet videopaneler att varje enskild videoåtergivning måste uppta en mindre del av skärmen. För att upprätthålla prestanda och undvika överlagring av webbläsarens återgivningspipeline justerar SDK:et dynamiskt upplösningen för varje inkommande videoström baserat på dess renderade storlek. Detta säkerställer att bandbredden och CPU-användningen förblir inom acceptabla gränser, men det innebär också att när fler deltagare ansluter kan upplösningen för varje video minska för att rymma rutnätet.

Det här anpassningsbara beteendet hjälper till att säkerställa stabila användarprestanda. I ett 2x2-rutnät med 4 deltagare kan till exempel varje video återges med en högre upplösning. Däremot, med ett 5x5-rutnät som visar 25 deltagare, är varje panel mindre och SDK kan skala ned videoströmmar för att passa visningsstorleken. Den här metoden minskar bandbreddsanvändningen och minskar sannolikheten för förlorade bildrutor eller fördröjningar. För att stödja upp till 25 inkommande videoströmmar rekommenderar vi att du använder en dator med minst en processor med 8 kärnor och 16 GB RAM-minne

I följande tabell visas hur videoupplösningen ändras baserat på antalet deltagare som visas i det inkommande videorutnätet samtidigt.

Slutsats

För att avgöra hur många videor som ska visas på en webbsida måste du noga överväga lösning, enhetstyp, bandbredd och användarupplevelse. Följ dessa riktlinjer och metodtips för att skapa webbappar som inte bara ser tilltalande ut utan också fungerar sömlöst, vilket ger en optimal visningsupplevelse för användare på olika enheter och anslutningshastigheter.

Relaterade artiklar

Du kan använda API:et för mediekvalitetsstatistik i WebJS SDK för att fastställa realtidsvideons upplösning för sändning och mottagning. Mer information finns i Mediakvalitet.