上一节:
下一节:

  WebRTC - 移动支持

  • 简述

    在移动世界中，对 WebRTC 的支持与在桌面上的支持不同。移动设备有自己的方式，因此 WebRTC 在移动平台上也有所不同。
    移动支持
    在为桌面开发 WebRTC 应用程序时，我们考虑使用 Chrome、Firefox 或 Opera。它们都支持开箱即用的 WebRTC。一般来说，您只需要一个浏览器，而不用担心桌面的硬件。
    在移动世界中，今天的 WebRTC 有三种可能的模式 -
    • 本机应用程序
    • 浏览器应用程序
    • 本机浏览器

  • 安卓

    2013 年，适用于 Android 的 Firefox Web 浏览器提供了开箱即用的 WebRTC 支持。现在，您可以使用 Firefox 移动浏览器在 Android 设备上进行视频通话。
    它具有三个主要的 WebRTC 组件 -
    • PeerConnection - 启用浏览器之间的调用
    • getUserMedia - 提供对相机和麦克风的访问
    • DataChannels - 提供点对点数据传输
    Google Chrome for Android 也提供 WebRTC 支持。正如您已经注意到的，最有趣的功能通常首先出现在 Chrome 中。
    在过去的一年里，支持 WebRTC 的 Opera 移动浏览器出现了。所以对于 Android，你有 Chrome、Firefox 和 Opera。其他浏览器不支持 WebRTC。

  • iOS

    不幸的是，现在 iOS 不支持 WebRTC。尽管 WebRTC 在 Mac 上使用 Firefox、Opera 或 Chrome 时运行良好，但在 iOS 上不受支持。
    如今，您的 WebRTC 应用程序无法直接在 Apple 移动设备上运行。但是有一个浏览器 - Bowser。它是由 Ericsson 开发的 Web 浏览器，开箱即用地支持 WebRTC。您可以在http://www.openwebrtc.org/bowser/查看它的主页。
    今天，它是在 iOS 上支持 WebRTC 应用程序的唯一友好方式。另一种方式是自己开发原生应用。

  • Windows 手机

    Microsoft 不支持移动平台上的 WebRTC。但他们已经正式确认，他们将在未来版本的 IE 中实现 ORTC（Object Realtime Communications）。他们不打算支持 WebRTC 1.0。他们将他们的 ORTC 标记为 WebRTC 1.1，尽管这只是社区增强而不是官方标准。
    所以今天的 Window Phone 用户不能使用 WebRTC 应用程序，也没有办法克服这种情况。

  • 黑莓

    Blackberry 也不支持 WebRTC 应用程序。

  • 使用 WebRTC 本机浏览器

    用户使用 WebRTC 最方便、最舒适的情况是使用设备的本机浏览器。在这种情况下，设备已准备好运行任何其他配置。
    目前只有版本 4 或更高版本的 Android 设备提供此功能。Apple 仍然没有显示任何支持 WebRTC 的活动。所以 Safari 用户不能使用 WebRTC 应用程序。微软也没有在 Windows Phone 8 中引入它。

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

    这意味着使用第三方应用程序（非本地网络浏览器）来提供 WebRTC 功能。目前，有两个这样的第三方应用程序。Bowser，这是将 WebRTC 特性引入 iOS 设备和 Opera 的唯一途径，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"); 
}
    使用静态命令运行 Web 服务器并打开页面。您应该看到它是 800x600。然后使用 Chrome 工具在移动视口中打开此页面并检查分辨率。它应该是 480x320。
    运行网络服务器
    约束是提高 WebRTC 应用程序性能的最简单方法。

  • 概括

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