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 的不同限制。我們還啟動了一個演示應用程式，在該應用程式中，我們為桌面瀏覽器和移動瀏覽器設定了不同的約束。

列印頁面