WebRTC - Assistance mobile

Dans le monde mobile, le support WebRTC n'est pas au même niveau que sur les ordinateurs de bureau. Les appareils mobiles ont leur propre chemin, donc WebRTC est également quelque chose de différent sur les plates-formes mobiles.

Lors du développement d'une application WebRTC pour ordinateur de bureau, nous envisageons d'utiliser Chrome, Firefox ou Opera. Tous prennent en charge WebRTC hors de la boîte. En général, vous avez juste besoin d'un navigateur et ne vous souciez pas du matériel du bureau.

Dans le monde mobile, il existe trois modes possibles pour WebRTC aujourd'hui -

  • L'application native
  • L'application de navigateur
  • Le navigateur natif

Android

En 2013, le navigateur Web Firefox pour Android a été présenté avec le support WebRTC prêt à l'emploi. Vous pouvez désormais passer des appels vidéo sur les appareils Android à l'aide du navigateur mobile Firefox.

Il comporte trois principaux composants WebRTC -

  • PeerConnection - permet les appels entre navigateurs

  • getUserMedia - donne accès à la caméra et au microphone

  • DataChannels - assure le transfert de données peer-to-peer

Google Chrome pour Android fournit également une prise en charge WebRTC. Comme vous l'avez déjà remarqué, les fonctionnalités les plus intéressantes apparaissent généralement d'abord dans Chrome.

L'année dernière, le navigateur mobile Opera est apparu avec le support WebRTC. Donc, pour Android, vous avez Chrome, Firefox et Opera. Les autres navigateurs ne prennent pas en charge WebRTC.

iOS

Malheureusement, WebRTC n'est pas pris en charge sur iOS maintenant. Bien que WebRTC fonctionne bien sur Mac lors de l'utilisation de Firefox, Opera ou Chrome, il n'est pas pris en charge sur iOS.

De nos jours, votre application WebRTC ne fonctionnera pas directement sur les appareils mobiles Apple. Mais il existe un navigateur - Bowser. C'est un navigateur Web développé par Ericsson et il prend en charge WebRTC hors de la boîte. Vous pouvez consulter sa page d'accueil surhttp://www.openwebrtc.org/bowser/.

Aujourd'hui, c'est le seul moyen convivial de prendre en charge votre application WebRTC sur iOS. Une autre façon est de développer vous-même une application native.

Téléphones Windows

Microsoft ne prend pas en charge WebRTC sur les plates-formes mobiles. Mais ils ont officiellement confirmé qu'ils allaient implémenter ORTC (Object Realtime Communications) dans les futures versions d'IE. Ils ne prévoient pas de prendre en charge WebRTC 1.0. Ils ont qualifié leur ORTC de WebRTC 1.1, bien qu'il ne s'agisse que d'une amélioration de la communauté et non de la norme officielle.

Donc, aujourd'hui, les utilisateurs de Windows Phone ne peuvent pas utiliser les applications WebRTC et il n'y a aucun moyen de surmonter cette situation.

la mûre

Les applications WebRTC ne sont pas non plus prises en charge sur Blackberry.

Utilisation d'un navigateur natif WebRTC

Le cas le plus pratique et le plus confortable pour les utilisateurs d'utiliser WebRTC consiste à utiliser le navigateur natif de l'appareil. Dans ce cas, l'appareil est prêt à utiliser toutes les configurations supplémentaires.

Aujourd'hui, seuls les appareils Android de version 4 ou supérieure offrent cette fonctionnalité. Apple n'affiche toujours aucune activité avec le support WebRTC. Les utilisateurs de Safari ne peuvent donc pas utiliser les applications WebRTC. Microsoft ne l'a pas non plus introduit dans Windows Phone 8.

Utilisation de WebRTC via des applications de navigateur

Cela signifie utiliser des applications tierces (navigateurs Web non natifs) afin de fournir les fonctionnalités WebRTC. Pour l'instant, il existe deux applications tierces de ce type. Bowser, qui est le seul moyen d'apporter les fonctionnalités WebRTC à l'appareil iOS et à Opera, qui est une belle alternative pour la plate-forme Android. Les autres navigateurs mobiles disponibles ne prennent pas en charge WebRTC.

Applications mobiles natives

Comme vous pouvez le voir, WebRTC n'a pas encore un grand support dans le monde mobile. Ainsi, l'une des solutions possibles est de développer des applications natives qui utilisent l'API WebRTC. Mais ce n'est pas le meilleur choix car la principale fonctionnalité WebRTC est une solution multiplateforme. Quoi qu'il en soit, dans certains cas, c'est le seul moyen, car une application native peut utiliser des fonctions spécifiques à l'appareil ou des fonctionnalités qui ne sont pas prises en charge par les navigateurs HTML5.

Contraindre le flux vidéo pour les appareils mobiles et de bureau

Le premier paramètre de l' API getUserMedia attend un objet de clés et de valeurs indiquant au navigateur comment traiter les flux. Vous pouvez consulter l'ensemble complet des contraintes surhttps://tools.ietf.org/html/draft-alvestrand-constraints-resolution-03. Vous pouvez configurer le rapport d'aspect vidéo, le frameRate et d'autres paramètres facultatifs.

La prise en charge des appareils mobiles est l'un des plus gros problèmes, car les appareils mobiles ont un espace d'écran limité et des ressources limitées. Vous souhaiterez peut-être que l'appareil mobile ne capture qu'une résolution de 480x320 ou un flux vidéo plus petit pour économiser de l'énergie et de la bande passante. L'utilisation de la chaîne de l'agent utilisateur dans le navigateur est un bon moyen de tester si l'utilisateur est sur un appareil mobile ou non. Voyons un exemple. Créez le fichier index.html -

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

Créez ensuite le fichier client.js suivant -

//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"); 
}

Exécutez le serveur Web à l'aide de la commande statique et ouvrez la page. Vous devriez voir que c'est 800x600. Ensuite, ouvrez cette page dans une fenêtre mobile à l'aide des outils Chrome et vérifiez la résolution. Ce devrait être 480x320.

Les contraintes sont le moyen le plus simple d'augmenter les performances de votre application WebRTC.

Sommaire

Dans ce chapitre, nous avons découvert les problèmes pouvant survenir lors du développement d'applications WebRTC pour les appareils mobiles. Nous avons découvert différentes limitations de la prise en charge de l'API WebRTC sur les plates-formes mobiles. Nous avons également lancé une application de démonstration dans laquelle nous avons défini différentes contraintes pour les navigateurs de bureau et mobiles.