WebRTC - Soporte móvil
En el mundo móvil, el soporte de WebRTC no está al mismo nivel que en los equipos de escritorio. Los dispositivos móviles tienen su propio camino, por lo que WebRTC también es algo diferente en las plataformas móviles.
Al desarrollar una aplicación WebRTC para escritorio, consideramos usar Chrome, Firefox u Opera. Todos ellos admiten WebRTC desde el primer momento. En general, solo necesita un navegador y no preocuparse por el hardware del escritorio.
En el mundo móvil, existen tres modos posibles para WebRTC en la actualidad:
- La aplicación nativa
- La aplicación del navegador
- El navegador nativo
Androide
En 2013, el navegador web Firefox para Android se presentó con soporte WebRTC listo para usar. Ahora puede realizar videollamadas en dispositivos Android utilizando el navegador móvil Firefox.
Tiene tres componentes principales de WebRTC:
PeerConnection - habilita llamadas entre navegadores
getUserMedia - proporciona acceso a la cámara y al micrófono
DataChannels - proporciona transferencia de datos peer-to-peer
Google Chrome para Android también proporciona compatibilidad con WebRTC. Como ya habrás notado, las funciones más interesantes suelen aparecer por primera vez en Chrome.
El año pasado, apareció el navegador móvil Opera con soporte WebRTC. Entonces, para Android tienes Chrome, Firefox y Opera. Otros navegadores no son compatibles con WebRTC.
iOS
Desafortunadamente, WebRTC ahora no es compatible con iOS. Aunque WebRTC funciona bien en Mac cuando se usa Firefox, Opera o Chrome, no es compatible con iOS.
Hoy en día, su aplicación WebRTC no funcionará en los dispositivos móviles de Apple de forma inmediata. Pero hay un navegador: Bowser. Es un navegador web desarrollado por Ericsson y es compatible con WebRTC listo para usar. Puedes consultar su página de inicio enhttp://www.openwebrtc.org/bowser/.
Hoy en día, es la única forma amigable de admitir su aplicación WebRTC en iOS. Otra forma es desarrollar una aplicación nativa usted mismo.
Teléfonos Windows
Microsoft no admite WebRTC en plataformas móviles. Pero han confirmado oficialmente que van a implementar ORTC (Object Realtime Communications) en futuras versiones de IE. No planean admitir WebRTC 1.0. Etiquetaron su ORTC como WebRTC 1.1, aunque es solo una mejora de la comunidad y no el estándar oficial.
Así que hoy los usuarios de Windows Phone no pueden usar aplicaciones WebRTC y no hay forma de superar esta situación.
Mora
Las aplicaciones WebRTC tampoco son compatibles con Blackberry, de ninguna manera.
Uso de un navegador nativo de WebRTC
El caso más conveniente y cómodo para que los usuarios utilicen WebRTC es utilizar el navegador nativo del dispositivo. En este caso, el dispositivo está listo para trabajar con cualquier configuración adicional.
Actualmente, solo los dispositivos Android de la versión 4 o superior ofrecen esta función. Apple todavía no muestra ninguna actividad con el soporte de WebRTC. Por tanto, los usuarios de Safari no pueden utilizar aplicaciones WebRTC. Microsoft tampoco lo introdujo en Windows Phone 8.
Uso de WebRTC a través de aplicaciones de navegador
Esto significa utilizar aplicaciones de terceros (navegadores web no nativos) para proporcionar las funciones de WebRTC. Por ahora, existen dos aplicaciones de terceros. Bowser, que es la única forma de llevar las funciones de WebRTC al dispositivo iOS y Opera, que es una buena alternativa para la plataforma Android. El resto de los navegadores móviles disponibles no son compatibles con WebRTC.
Aplicaciones móviles nativas
Como puede ver, WebRTC aún no tiene un gran soporte en el mundo móvil. Entonces, una de las posibles soluciones es desarrollar aplicaciones nativas que utilicen la API WebRTC. Pero no es la mejor opción porque la característica principal de WebRTC es una solución multiplataforma. De todos modos, en algunos casos, esta es la única forma porque una aplicación nativa puede utilizar funciones específicas del dispositivo o características que no son compatibles con los navegadores HTML5.
Restricción de la transmisión de video para dispositivos móviles y de escritorio
El primer parámetro de la API getUserMedia espera un objeto de claves y valores que le indique al navegador cómo procesar los flujos. Puede consultar el conjunto completo de restricciones enhttps://tools.ietf.org/html/draft-alvestrand-constraints-resolution-03. Puede configurar la relación de aspecto de video, frameRate y otros parámetros opcionales.
La compatibilidad con dispositivos móviles es uno de los mayores problemas porque los dispositivos móviles tienen un espacio de pantalla limitado y recursos limitados. Es posible que desee que el dispositivo móvil solo capture una resolución de 480x320 o una transmisión de video más pequeña para ahorrar energía y ancho de banda. El uso de la cadena de agente de usuario en el navegador es una buena manera de probar si el usuario está en un dispositivo móvil o no. Veamos un ejemplo. Cree el archivo index.html -
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
</head>
<body>
<video autoplay></video>
<script src = "client.js"></script>
</body>
</html>Luego crea el siguiente archivo 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");
}Ejecute el servidor web con el comando estático y abra la página. Debería ver que es 800x600. Luego abra esta página en una ventana gráfica móvil usando herramientas de Chrome y verifique la resolución. Debe ser de 480x320.
Las restricciones son la forma más sencilla de aumentar el rendimiento de su aplicación WebRTC.
Resumen
En este capítulo, aprendimos sobre los problemas que pueden ocurrir al desarrollar aplicaciones WebRTC para dispositivos móviles. Descubrimos diferentes limitaciones de admitir la API de WebRTC en plataformas móviles. También lanzamos una aplicación de demostración en la que establecemos diferentes restricciones para navegadores de escritorio y móviles.