上一节:
下一节:

  WebRTC - MediaStream API

  • 简述

    MediaStream API 旨在轻松访问来自本地摄像头和麦克风的媒体流。getUserMedia()方法是访问本地输入设备的主要方法。
    API 有几个关键点 -
    • 实时媒体流由视频或音频形式的流对象表示
    • 它通过在 Web 应用程序开始获取流之前询问用户的用户权限来提供安全级别
    • 输入设备的选择由 MediaStream API 处理（例如，当有两个摄像头或麦克风连接到设备时）
    每个 MediaStream 对象包括几个 MediaStreamTrack 对象。它们代表来自不同输入设备的视频和音频。
    每个 MediaStreamTrack 对象可能包含多个通道（右声道和左声道）。这些是 MediaStream API 定义的最小部分。
    有两种方法可以输出 MediaStream 对象。首先，我们可以将输出渲染为视频或音频元素。其次，我们可以将输出发送到 RTCPeerConnection 对象，然后将其发送到远程对等点。

  • 使用媒体流 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将我们的流加载到视频元素中，它创建一个 URL 表示参数中给定的对象。
    现在刷新你的页面，点击允许，你应该会在屏幕上看到你的脸。
    媒体流 API
    请记住使用 Web 服务器运行所有脚本。我们已经在 WebRTC 环境教程中安装了一个。

  • 媒体流 API

    特性

    • MediaStream.active (read only) - 如果 MediaStream 处于活动状态，则返回 true，否则返回 false。
    • MediaStream.ended (read only, deprecated) - 如果在对象上触发了结束事件，则返回 true ，这意味着流已被完全读取，如果尚未到达流的末尾，则返回 false。
    • MediaStream.id (read only) - 对象的唯一标识符。
    • MediaStream.label (read only, deprecated) - 由用户代理分配的唯一标识符。
    您可以在我的浏览器中看到上述属性的外观 -
    特性

    事件处理程序

    • MediaStream.onactive - 当 MediaStream 对象变为活动状态时触发的活动事件的处理程序。
    • MediaStream.onaddtrack -添加新MediaStreamTrack对象时触发的addtrack事件的处理程序。
    • MediaStream.onended (deprecated) -流终止时触发的结束事件的处理程序。
    • MediaStream.oninactive - 当MediaStream对象变为非活动状态时触发的非活动事件的处理程序。
    • MediaStream.onremovetrack - removetrack事件的处理程序，当从中删除MediaStreamTrack对象时触发。

    方法

    • 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() - 音频按钮。现在应该删除音轨。然后对视频轨道执行相同的操作。
    点击 getAudioTracks
    如果单击getTracks()按钮，您应该会看到所有MediaStreamTracks（所有连接的视频和音频输入）。然后点击getTrackById()获取音频 MediaStreamTrack。
    点击 getTrackById

    概括

    在本章中，我们使用 MediaStream API 创建了一个简单的 WebRTC 应用程序。现在您应该清楚地了解使 WebRTC 工作的各种 MediaStream API。
上一节:
下一节: