WebRTC - Supporto mobile

Nel mondo mobile, il supporto WebRTC non è allo stesso livello dei desktop. I dispositivi mobili hanno la loro strada, quindi WebRTC è qualcosa di diverso anche sulle piattaforme mobili.

Quando si sviluppa un'applicazione WebRTC per desktop, si considera l'utilizzo di Chrome, Firefox o Opera. Tutti supportano WebRTC fuori dagli schemi. In generale, hai solo bisogno di un browser e non preoccuparti dell'hardware del desktop.

Nel mondo mobile ci sono tre possibili modalità per WebRTC oggi:

L'applicazione nativa
L'applicazione browser
Il browser nativo

Android

Nel 2013, il browser Web Firefox per Android è stato presentato con il supporto WebRTC pronto all'uso. Ora puoi effettuare videochiamate su dispositivi Android utilizzando il browser mobile Firefox.

Ha tre componenti WebRTC principali:

PeerConnection - abilita le chiamate tra i browser
getUserMedia - fornisce l'accesso alla telecamera e al microfono
DataChannels - fornisce il trasferimento dei dati peer-to-peer

Google Chrome per Android fornisce anche il supporto WebRTC. Come hai già notato, le funzionalità più interessanti di solito compaiono per la prima volta in Chrome.

L'anno scorso, il browser mobile Opera è apparso con il supporto WebRTC. Quindi per Android hai Chrome, Firefox e Opera. Altri browser non supportano WebRTC.

iOS

Sfortunatamente, WebRTC non è supportato su iOS ora. Sebbene WebRTC funzioni bene su Mac quando si utilizza Firefox, Opera o Chrome, non è supportato su iOS.

Al giorno d'oggi, la tua applicazione WebRTC non funzionerà immediatamente sui dispositivi mobili Apple. Ma c'è un browser: Bowser. È un browser web sviluppato da Ericsson e supporta WebRTC immediatamente. Puoi controllare la sua homepage suhttp://www.openwebrtc.org/bowser/.

Oggi è l'unico modo amichevole per supportare la tua applicazione WebRTC su iOS. Un altro modo è sviluppare tu stesso un'applicazione nativa.

Telefoni Windows

Microsoft non supporta WebRTC su piattaforme mobili. Ma hanno ufficialmente confermato che implementeranno ORTC (Object Realtime Communications) nelle versioni future di IE. Non hanno in programma di supportare WebRTC 1.0. Hanno etichettato il loro ORTC come WebRTC 1.1, sebbene sia solo un miglioramento della comunità e non lo standard ufficiale.

Quindi oggi gli utenti di Window Phone non possono utilizzare le applicazioni WebRTC e non c'è modo di superare questa situazione.

Mora

Le applicazioni WebRTC non sono supportate in alcun modo su Blackberry.

Utilizzo di un browser nativo WebRTC

Il caso più comodo e comodo per gli utenti di utilizzare WebRTC è utilizzare il browser nativo del dispositivo. In questo caso, il dispositivo è pronto per eseguire eventuali configurazioni aggiuntive.

Oggi solo i dispositivi Android con versione 4 o successiva forniscono questa funzionalità. Apple continua a non mostrare alcuna attività con il supporto WebRTC. Quindi gli utenti di Safari non possono utilizzare le applicazioni WebRTC. Microsoft inoltre non l'ha introdotto in Windows Phone 8.

Utilizzo di WebRTC tramite applicazioni browser

Ciò significa utilizzare applicazioni di terze parti (browser Web non nativi) per fornire le funzionalità WebRTC. Per ora, ci sono due di queste applicazioni di terze parti. Bowser, che è l'unico modo per portare le funzionalità WebRTC sul dispositivo iOS e Opera, che è una bella alternativa per la piattaforma Android. Il resto dei browser mobili disponibili non supportano WebRTC.

Applicazioni mobili native

Come puoi vedere, WebRTC non ha ancora un ampio supporto nel mondo mobile. Quindi, una delle possibili soluzioni è sviluppare un'applicazione nativa che utilizzi l'API WebRTC. Ma non è la scelta migliore perché la caratteristica principale di WebRTC è una soluzione multipiattaforma. Ad ogni modo, in alcuni casi questo è l'unico modo perché un'applicazione nativa può utilizzare funzioni o caratteristiche specifiche del dispositivo che non sono supportate dai browser HTML5.

Limitazione del flusso video per dispositivi mobili e desktop

Il primo parametro dell'API getUserMedia prevede un oggetto di chiavi e valori che dica al browser come elaborare i flussi. Puoi controllare la serie completa di vincoli suhttps://tools.ietf.org/html/draft-alvestrand-constraints-resolution-03. È possibile impostare le proporzioni video, frameRate e altri parametri opzionali.

Il supporto dei dispositivi mobili è uno dei maggiori problemi perché i dispositivi mobili hanno uno spazio limitato sullo schermo e risorse limitate. È possibile che il dispositivo mobile acquisisca solo una risoluzione di 480x320 o un flusso video più piccolo per risparmiare energia e larghezza di banda. L'utilizzo della stringa dell'agente utente nel browser è un buon modo per verificare se l'utente è su un dispositivo mobile o meno. Vediamo un esempio. Crea il file index.html -

<!DOCTYPE html> 
<html lang = "en">
 
   <head> 
      <meta charset = "utf-8" /> 
   </head> 
	
   <body> 
      <video autoplay></video> 
      <script src = "client.js"></script> 
   </body>
	
</html>

Quindi crea il seguente file client.js :

//constraints for desktop browser 
var desktopConstraints = { 

   video: { 
      mandatory: { 
         maxWidth:800,
         maxHeight:600   
      }  
   }, 
	
   audio: true 
}; 
 
//constraints for mobile browser 
var mobileConstraints = { 

   video: { 
      mandatory: { 
         maxWidth: 480, 
         maxHeight: 320, 
      } 
   }, 
	
   audio: true 
}
  
//if a user is using a mobile browser 
if(/Android|iPhone|iPad/i.test(navigator.userAgent)) { 
   var constraints = mobileConstraints;   
} else { 
   var constraints = desktopConstraints; 
}
  
function hasUserMedia() { 
   //check if the browser supports the WebRTC 
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia); 
}
  
if (hasUserMedia()) {
  
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia;
	
   //enabling video and audio channels 
   navigator.getUserMedia(constraints, function (stream) { 
      var video = document.querySelector('video');
		
      //inserting our stream to the video tag     
      video.src = window.URL.createObjectURL(stream);
		
   }, function (err) {}); 
} else { 
   alert("WebRTC is not supported"); 
}

Esegui il server web utilizzando il comando statico e apri la pagina. Dovresti vedere che è 800x600. Quindi apri questa pagina in una visualizzazione mobile utilizzando gli strumenti di Chrome e controlla la risoluzione. Dovrebbe essere 480 x 320.

I vincoli sono il modo più semplice per aumentare le prestazioni della tua applicazione WebRTC.

Sommario

In questo capitolo abbiamo appreso i problemi che possono verificarsi durante lo sviluppo di applicazioni WebRTC per dispositivi mobili. Abbiamo scoperto diversi limiti nel supportare l'API WebRTC su piattaforme mobili. Abbiamo anche lanciato un'applicazione demo in cui impostiamo diversi vincoli per i browser desktop e mobili.

↰ Previous page Next page ↱