WebRTC - 媒體流 API

MediaStream API旨在方便訪問本地攝像頭和麥克風的媒體流。getUserMedia()方法是訪問本地輸入裝置的主要方式。

該API有幾個關鍵點：

即時媒體流以影片或音訊形式由stream物件表示。
它透過使用者許可權提供安全級別，在Web應用程式開始獲取流之前詢問使用者。
輸入裝置的選擇由MediaStream API處理（例如，當有兩個攝像頭或麥克風連線到裝置時）。

每個MediaStream物件包含多個MediaStreamTrack物件。它們代表來自不同輸入裝置的影片和音訊。

每個MediaStreamTrack物件可能包含多個通道（左右聲道）。這些是由MediaStream API定義的最小部分。

輸出MediaStream物件有兩種方法。首先，我們可以將輸出呈現到影片或音訊元素中。其次，我們可以將輸出傳送到RTCPeerConnection物件，然後將其傳送到遠端對等方。

使用MediaStream API

讓我們建立一個簡單的WebRTC應用程式。它將在螢幕上顯示一個影片元素，詢問使用者是否允許使用攝像頭，並在瀏覽器中顯示即時影片流。建立一個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檔案並新增以下內容：

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({ video: true, audio: true }, 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"); 
}

在這裡，我們建立了hasUserMedia()函式，該函式檢查是否支援WebRTC。然後我們訪問getUserMedia函式，其中第二個引數是一個回撥函式，它接受來自使用者裝置的流。然後我們使用window.URL.createObjectURL將我們的流載入到video元素中，該函式建立一個表示引數中給定物件的URL。

現在重新整理頁面，單擊“允許”，您應該會在螢幕上看到您的臉。

記住使用Web伺服器執行所有指令碼。我們已經在WebRTC環境教程中安裝了一個。

MediaStream API

屬性

MediaStream.active（只讀） - 如果MediaStream處於活動狀態，則返回true，否則返回false。
MediaStream.ended（只讀，已棄用） - 如果已在物件上觸發ended事件，則返回true，這意味著流已完全讀取，如果尚未到達流的末尾，則返回false。
MediaStream.id（只讀） - 物件的唯一識別符號。
MediaStream.label（只讀，已棄用） - 由使用者代理分配的唯一識別符號。

您可以在我的瀏覽器中看到上述屬性的外觀：

事件處理程式

MediaStream.onactive - 當MediaStream物件變為活動狀態時觸發的active事件的處理程式。
MediaStream.onaddtrack - 當新增新的MediaStreamTrack物件時觸發的addtrack事件的處理程式。
MediaStream.onended（已棄用） - 當流終止時觸發的ended事件的處理程式。
MediaStream.oninactive - 當MediaStream物件變為非活動狀態時觸發的inactive事件的處理程式。
MediaStream.onremovetrack - 當從MediaStream物件中移除MediaStreamTrack物件時觸發的removetrack事件的處理程式。

方法

MediaStream.addTrack() - 將作為引數給出的MediaStreamTrack物件新增到MediaStream。如果該軌道已被新增，則不會發生任何事情。
MediaStream.clone() - 返回具有新ID的MediaStream物件的克隆。
MediaStream.getAudioTracks() - 返回來自MediaStream物件的音訊MediaStreamTrack物件的列表。
MediaStream.getTrackById() - 透過ID返回軌道。如果引數為空或找不到ID，則返回null。如果多個軌道具有相同的ID，則返回第一個軌道。
MediaStream.getTracks() - 返回來自MediaStream物件的所有MediaStreamTrack物件的列表。
MediaStream.getVideoTracks() - 返回來自MediaStream物件的影片MediaStreamTrack物件的列表。
MediaStream.removeTrack() - 從MediaStream中移除作為引數給出的MediaStreamTrack物件。如果該軌道已被移除，則不會發生任何事情。

要測試上述API，請更改index.html，方法如下：

<!DOCTYPE html> 
<html lang = "en">
 
   <head> 
      <meta charset = "utf-8" /> 
   </head>
	
   <body> 
      <video autoplay></video> 
      <div><button id = "btnGetAudioTracks">getAudioTracks()
         </button></div> 
      <div><button id = "btnGetTrackById">getTrackById()
         </button></div> 
      <div><button id = "btnGetTracks">getTracks()</button></div> 
      <div><button id = "btnGetVideoTracks">getVideoTracks()
         </button></div> 
      <div><button id = "btnRemoveAudioTrack">removeTrack() - audio
         </button></div> 
      <div><button id = "btnRemoveVideoTrack">removeTrack() - video
         </button></div> 
      <script src = "client.js"></script> 
   </body> 
	
</html>

我們添加了一些按鈕來嘗試幾個MediaStream API。然後我們應該為我們新建立的按鈕新增事件處理程式。修改client.js檔案如下：

var stream;
  
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({ video: true, audio: true }, function (s) { 
      stream = s; 
      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"); 
}
  
btnGetAudioTracks.addEventListener("click", function(){ 
   console.log("getAudioTracks"); 
   console.log(stream.getAudioTracks()); 
});
  
btnGetTrackById.addEventListener("click", function(){ 
   console.log("getTrackById"); 
   console.log(stream.getTrackById(stream.getAudioTracks()[0].id)); 
});
  
btnGetTracks.addEventListener("click", function(){ 
   console.log("getTracks()"); 
   console.log(stream.getTracks()); 
});
 
btnGetVideoTracks.addEventListener("click", function(){ 
   console.log("getVideoTracks()"); 
   console.log(stream.getVideoTracks()); 
});

btnRemoveAudioTrack.addEventListener("click", function(){ 
   console.log("removeAudioTrack()"); 
   stream.removeTrack(stream.getAudioTracks()[0]); 
});
  
btnRemoveVideoTrack.addEventListener("click", function(){ 
   console.log("removeVideoTrack()"); 
   stream.removeTrack(stream.getVideoTracks()[0]); 
});

現在重新整理頁面。單擊getAudioTracks()按鈕，然後單擊removeTrack() - audio按鈕。現在應該移除音訊軌道。然後對影片軌道執行相同的操作。

如果您單擊getTracks()按鈕，您應該會看到所有MediaStreamTracks（所有連線的影片和音訊輸入）。然後單擊getTrackById()以獲取音訊MediaStreamTrack。

總結

在本章中，我們使用MediaStream API建立了一個簡單的WebRTC應用程式。現在您應該對使WebRTC工作的各種MediaStream API有一個清晰的概述。

列印頁面