WebRTC - 移动端支持

在移动领域，WebRTC 的支持程度不如桌面端。移动设备有其自身的特点，因此 WebRTC 在移动平台上的表现也略有不同。

在为桌面开发 WebRTC 应用程序时，我们通常会考虑使用 Chrome、Firefox 或 Opera。它们都开箱即用地支持 WebRTC。通常情况下，你只需要一个浏览器，而无需考虑桌面的硬件。

在移动领域，目前 WebRTC 有三种可能的模式：

原生应用程序
浏览器应用程序
原生浏览器

Android

2013 年，Firefox Android 浏览器推出了开箱即用的 WebRTC 支持。现在，您可以使用 Firefox 移动浏览器在 Android 设备上进行视频通话。

它具有三个主要的 WebRTC 组件：

PeerConnection - 启用浏览器间的通话
getUserMedia - 提供对摄像头和麦克风的访问
DataChannels - 提供点对点数据传输

Android 版 Google Chrome 也提供 WebRTC 支持。正如您已经注意到的那样，最有趣的功能通常首先出现在 Chrome 中。

去年，Opera 移动浏览器也推出了 WebRTC 支持。因此，对于 Android，您有 Chrome、Firefox 和 Opera 可供选择。其他浏览器不支持 WebRTC。

iOS

不幸的是，iOS 目前不支持 WebRTC。尽管在使用 Firefox、Opera 或 Chrome 的 Mac 上 WebRTC 工作良好，但它在 iOS 上不受支持。

现在，您的 WebRTC 应用程序无法在 Apple 移动设备上开箱即用。但是有一个浏览器 - Bowser。它是由爱立信开发的，并且开箱即用地支持 WebRTC。您可以访问其主页：http://www.openwebrtc.org/bowser/.

目前，这是在 iOS 上支持 WebRTC 应用程序的唯一便捷方法。另一种方法是自己开发原生应用程序。

Windows Phone

微软不支持移动平台上的 WebRTC。但他们已正式确认将在未来版本的 IE 中实现 ORTC（对象实时通信）。他们不打算支持 WebRTC 1.0。他们将他们的 ORTC 标记为 WebRTC 1.1，尽管它只是一个社区增强功能，而不是官方标准。

因此，今天 Windows Phone 用户无法使用 WebRTC 应用程序，并且目前没有解决方法。

Blackberry

WebRTC 应用程序在 Blackberry 上也不受支持。

使用 WebRTC 原生浏览器

对于用户来说，使用设备的原生浏览器是使用 WebRTC 最方便、最舒适的方式。在这种情况下，设备无需任何额外配置即可工作。

目前只有 Android 4.0 或更高版本的设备提供此功能。Apple 仍然没有显示任何关于 WebRTC 支持的活动。因此，Safari 用户无法使用 WebRTC 应用程序。微软也没有在 Windows Phone 8 中引入它。

通过浏览器应用程序使用 WebRTC

这意味着使用第三方应用程序（非原生网络浏览器）来提供 WebRTC 功能。目前，有两个这样的第三方应用程序：Bowser，这是将 WebRTC 功能引入 iOS 设备的唯一方法；以及 Opera，它是 Android 平台的一个不错的替代方案。其余可用的移动浏览器都不支持 WebRTC。

原生移动应用程序

如您所见，WebRTC 在移动领域的普及率还不太高。因此，一种可能的解决方案是开发利用 WebRTC API 的原生应用程序。但这并不是最佳选择，因为 WebRTC 的主要功能是跨平台解决方案。无论如何，在某些情况下，这是唯一的方法，因为原生应用程序可以利用 HTML5 浏览器不支持的特定设备功能或特性。

限制移动设备和桌面设备的视频流

getUserMedia API 的第一个参数期望一个键值对对象，告诉浏览器如何处理流。您可以在 https://tools.ietf.org/html/draft-alvestrand-constraints-resolution-03. 查看完整的约束集。您可以设置视频纵横比、帧率和其他可选参数。

支持移动设备是一个很大的难题，因为移动设备的屏幕空间和资源有限。您可能希望移动设备仅捕获 480x320 或更小分辨率的视频流以节省电量和带宽。使用浏览器中的用户代理字符串是测试用户是否在移动设备上的一种好方法。让我们来看一个例子。创建 index.html 文件：

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

然后创建以下 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"); 
}

使用 static 命令运行 Web 服务器并打开页面。您应该看到它是 800x600。然后使用 Chrome 工具在移动视口中打开此页面并检查分辨率。它应该是 480x320。

约束是提高 WebRTC 应用程序性能的最简单方法。

总结

在本章中，我们学习了在为移动设备开发 WebRTC 应用程序时可能遇到的问题。我们发现了在移动平台上支持 WebRTC API 的不同限制。我们还启动了一个演示应用程序，在该应用程序中，我们为桌面浏览器和移动浏览器设置了不同的约束。

打印页面