Procedure consigliate per la sottoscrizione ai feed video

2025-06-07

Un elemento fondamentale da considerare quando si creano app Web è come integrare al meglio il video nel layout di pagina. Il posizionamento e il numero di video possono influire sulle prestazioni della pagina, sull'esperienza di qualità dell'utente e sull'estetica complessiva. Questo articolo include linee guida per aiutare gli sviluppatori a determinare il numero di video da inserire in una pagina Web e le migliori dimensioni di risoluzione video per ottimizzare l'esperienza utente finale.

Informazioni sulla risoluzione video

Gli sviluppatori devono conoscere dettagli importanti sulla risoluzione video. La risoluzione fa riferimento al numero di pixel visualizzati in un output video, in genere misurato in width x height formato. Una risoluzione più elevata indica più pixel, portando a immagini più nitide e più chiare. Le risoluzioni video in ingresso disponibili nelle videochiamate di Servizi di comunicazione di Azure includono:

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

Fattori che influenzano la qualità video

Diversi fattori influenzano il numero di video che è possibile inserire in modo efficace in una pagina Web. Questi fattori includono il tipo di dispositivo, la risoluzione, la larghezza di banda disponibile e le considerazioni sull'esperienza utente.

Capacità del dispositivo locale

Il tipo di dispositivo usato per visualizzare la pagina Web svolge un ruolo significativo. Ad esempio, desktop e portatili con schermi più grandi possono contenere più video rispetto ai dispositivi mobili. È consigliabile usare tecniche di progettazione reattive per regolare il numero e le dimensioni dei video in base alle dimensioni dello schermo.

Inoltre, il computer locale deve elaborare, codificare e visualizzare correttamente questi video. Le dimensioni della schermata di monitoraggio locale e delle capacità del browser determinano anche il numero di video attivi che possono essere visualizzati simultaneamente in una pagina Web.

Risoluzione e dimensioni dello schermo video

La risoluzione dello schermo del dispositivo dell'utente finale influisce direttamente sul numero di video che è possibile visualizzare per pagina. Maggiore è la risoluzione del monitor e dello schermo, più video è possibile visualizzare.

Tenere presente che per ogni video inserito in una pagina, maggiore è la larghezza di banda Internet necessaria per i video. Inoltre, il computer locale deve avere funzionalità di prestazioni sufficienti per codificare e visualizzare correttamente il video.

È consigliabile bilanciare la qualità e le prestazioni del video. Non riempire ogni pixel sullo schermo con output video, che può sovraccaricare l'utente. Prendere in considerazione la larghezza di banda in ingresso e in uscita quando si aggiungono altri video a una pagina.

Considerazioni sulla larghezza di banda Internet

Per migliorare l'esperienza dell'utente finale, è necessario comprendere come vengono misurate le velocità internet e quali fattori possono influenzarli. Le velocità Internet vengono in genere misurate in megabit al secondo (Mbps), che indica la velocità con cui i dati vengono scaricati o caricati. Diversi fattori possono influire su queste velocità, tra cui il tipo di connessione Internet (fiber, cavo, wifi, cellulare), la qualità delle apparecchiature di rete (modem, router) e il numero di dispositivi connessi alla rete.

Quando si posizionano più video in una pagina Web, prendere in considerazione la larghezza di banda di rete dell'utente. I video con risoluzione più elevata richiedono più dati per lo streaming. Maggiore è il numero totale di video inseriti in una pagina, maggiore è la larghezza di banda usata da ognuno. Se qualcuno si connette a Internet tramite una connessione con una velocità effettiva della larghezza di banda complessiva inferiore, la possibilità di trasmettere video con risoluzione più elevata o più video in una pagina sono limitati. Viceversa, se un utente ha una maggiore larghezza di banda Internet per il traffico in ingresso e in uscita, ha una maggiore capacità di distribuire e utilizzare video ad alta risoluzione e supportare più video nella pagina.

Metodi per ottimizzare al meglio la modalità di gestione dei flussi video in ingresso

Usare la libreria dell'interfaccia utente Web

La libreria dell'interfaccia utente Web di Servizi di comunicazione di Azure è uno strumento potente per gli sviluppatori che vogliono creare applicazioni Web senza problemi e visivamente accattivanti. La libreria dell'interfaccia utente Web offre un set completo di componenti predefiniti dell'interfaccia utente che sono facili da integrare e altamente personalizzabili. Questa soluzione consente agli sviluppatori di concentrarsi sulla creazione di funzionalità anziché sulla progettazione da zero.

La libreria dell'interfaccia utente Web garantisce standard di progettazione coerenti in progetti e piattaforme diversi, migliorando l'esperienza utente e riducendo il tempo di sviluppo. La documentazione completa e il supporto della community attiva lo rendono una scelta eccellente sia per i principianti che per gli sviluppatori esperti. Applicando la libreria dell'interfaccia utente Web, è possibile semplificare il flusso di lavoro, creare interfacce di qualità professionale e offrire applicazioni Web coinvolgenti in modo più efficiente. Inoltre, l'uso della libreria dell'interfaccia utente Web rimuove le ipotesi di determinare il numero di video che è possibile sottoscrivere in modo ottimale contemporaneamente.

Usare l'API di conteggio video ottimale

Nell'SDK WebJS di Servizi di comunicazione di Azure è stata introdotta la funzionalità di conteggio video ottimale (OVC) che indica alle applicazioni quanti video in ingresso provenienti da partecipanti diversi possono essere visualizzati in modo ottimale durante una chiamata di gruppo. La optimalVideoCount proprietà regola in modo dinamico in base alla larghezza di banda di rete e alle funzionalità hardware. Il conteggio ottimale dei video restituisce un numero intero che definisce il numero ideale di video che possono essere visualizzati in una pagina Web. Le applicazioni devono aggiornare il numero di video di cui è stato eseguito il rendering in base all'output di OVC. Gli sviluppatori devono assicurarsi che l'applicazione sottoscriva le modifiche a Optimal Video Count nelle chiamate di gruppo e devono regolare dinamicamente il numero di video da visualizzare in una pagina Web in base al conteggio OVC. Il valore del conteggio video ottimale (OVC) viene aggiornato ogni 10 secondi.

È necessario fare riferimento alla funzionalità OptimalVideoCount tramite il metodo di funzionalità dell'oggetto Call. È quindi possibile impostare un listener tramite il metodo on di OptimalVideoCountCallFeature per ricevere una notifica quando vengono apportate le optimalVideoCount modifiche. Per annullare la sottoscrizione alle modifiche, è possibile chiamare il metodo off. Il numero massimo corrente di video in ingresso di cui è possibile eseguire il rendering in una pagina Web è 16. Per supportare correttamente 16 video in ingresso, il computer deve avere almeno 16 GB di RAM e una CPU con almeno 4 core e che non abbia più di 3 anni.

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

Quando si verifica una modifica del valore ottimale del numero di video, se il risultato indica una maggiore capacità nel computer locale per altri video in ingresso, è possibile creare un nuovo video in ingresso usando il createView metodo per visualizzare più flussi video in ingresso da visualizzare nella pagina.

Viceversa, se il conteggio ottimale diminuisce ed è minore del numero corrente di video nella pagina, è consigliabile eliminare un video usando il metodo dispose e aggiornare di conseguenza il layout dell'applicazione.

Aspetti da considerare quando si aggiunge un video da 1080p o 720p a una pagina.

È possibile posizionare un video in ingresso di 1080p con il resto più piccolo di 720p.
È possibile posizionare due video in ingresso di 720p con il resto più piccolo di 720p.

WebJS calling SDK supporta lo streaming video 1080p. Per inviare il video in 1080p da un browser desktop web, è necessario usare la versione 134.1 o successiva della versione SDK del GA o di anteprima pubblica.

Ad esempio, in una chiamata di gruppo in cui sette partecipanti hanno le loro telecamere video, in ogni pagina client è possibile selezionare i video di due partecipanti vengono visualizzati a risoluzioni superiori. Questi due partecipanti hanno deciso di mostrare il loro video a una risoluzione di 720p, impostando le dimensioni della visualizzazione sulla pagina web a 720 pixel di altezza e 1280 pixel di larghezza (o maggiore). I cinque video partecipanti rimanenti devono essere impostati su una risoluzione inferiore, ad esempio 360p o inferiore.

Assicurarsi che il numero totale di video sottoposti a rendering non superi il valore OVC Optimal Video Count (OVC).
Ogni client può scegliere il feed video da utenti specifici e regolare le dimensioni di risoluzione nei singoli dispositivi.
La capacità di ogni partecipante di inviare una risoluzione video specifica può variare. Alcuni computer sono dotati di telecamere di qualità superiore, consentendo loro di trasmettere un video di 1080p. Al contrario, alcuni browser mobili hanno funzionalità di trasmissione video inferiori, ad esempio solo 540p. Se hai incorporato la risoluzione video a 1080p o 720p in una pagina, il video in ingresso potrebbe non corrispondere a tale risoluzione. In questo caso, il sistema aumenta la risoluzione del flusso video per adattarsi alle dimensioni del renderer video.
Attualmente, è possibile eseguire il rendering di un massimo di due flussi video di 720p in una pagina Web. Se sono abilitati più di due flussi da 720p, tutti i rendering video da 720p vengono trasmessi a 540p.
Il numero massimo di flussi remoti in ingresso che possono essere sottoscritti è 16 flussi video più 1 condivisione dello schermo nei browser desktop e 4 flussi video più 1 condivisione dello schermo nei Web browser.
La funzionalità Simulcast video di Servizi di comunicazione di Azure migliora lo streaming video abilitando un singolo video distribuito da un client finale a più risoluzioni e velocità in bit contemporaneamente.

Questa funzione consente ai visualizzatori con diverse condizioni di rete di selezionare il rendering video da selezionare per ottenere la migliore qualità video possibile senza buffering o interruzioni. Ottimizzando l'utilizzo della larghezza di banda, simulcast invia flussi di risoluzione più elevati solo agli utenti che possono supportarli. Questo comportamento riduce al minimo la trasmissione dei dati non necessaria. Simulcast migliora l'esperienza utente complessiva fornendo qualità video stabile e coerente e abilita lo streaming adattivo.

Simulcast non è supportato in tutti i browser, in particolare browser per dispositivi mobili e macOS Safari. Se un partecipante che usa iOS Safari, Android Chrome o macOS Safari esegue il rendering di un video 720p e un altro partecipante tenta di eseguire il rendering dello stesso video a una risoluzione inferiore, entrambi riceveranno la risoluzione inferiore. Ciò si verifica perché questi dispositivi assegnano priorità alle risoluzioni più piccole quando l'invio di simulcast non è supportato.

Come configurare per inviare un flusso 1080p

Quando si usa WebJS SDK per inviare video a una risoluzione 1080p, è necessario usare l'API Vincoli video e specificare che si vuole usare 1080p. Se l'API Vincoli video non viene usata e non viene specificato 1080p, la risoluzione predefinita del flusso video è 720p.

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

Elementi da notare quando si invia un flusso video 1080p

La fotocamera in uso deve essere in grado di inviare un video 1080p. Per verificare le risoluzioni supportate dalla fotocamera, è possibile usare l'esempio JavaScript seguente per determinare le risoluzioni disponibili.

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

Il computer che invia un 1080p deve avere un computer abbastanza potente per supportare l'invio di un 1080p.
Il client sul lato ricevente (persone in grado di visualizzare un video 1080p) deve avere un elemento HTML5 di rendering video capace di supportare 1080p per accettare 1080p. Se un partecipante alla chiamata non dispone di un elemento 1080p abilitato per ricevere il video, la chiamata si adatterà e negozierà fino a una risoluzione più piccola.
Tutte le persone sulla chiamata che inviano e ricevono un flusso video di 1080p devono avere la larghezza di banda per supportare un flusso da 1080p.

Risoluzione	Min framerate	Numero massimo di fotogrammi	Velocità in bit massima
1080p	30	30	4 M
720p	30	30	2,5 M
540p	30	30	2 milioni
360p	30	30	1.000.000
240p	15	15	650 K
Risoluzione 180p	7,5	15	250 Kb (350 Kb se 15 fotogrammi al secondo)

È possibile usare l'API statistiche sulla qualità dei supporti all'interno di WebJS SDK per determinare l'invio e la ricezione di video in tempo reale. Per altri dettagli, vedere qui.

Conclusione

Per determinare il numero di video da inserire in una pagina Web, è necessario prendere in considerazione con attenzione la risoluzione, il tipo di dispositivo, la larghezza di banda e l'esperienza utente. Seguire queste linee guida e le procedure consigliate per creare app Web che non solo sembrano accattivanti, ma funzionano senza problemi, offrendo un'esperienza di visualizzazione ottimale per gli utenti in vari dispositivi e velocità di connessione.