开发学院,分享开发教程和最新动态

WebRTC MediaStream接口

WebRTC MediaStream接口


MediaStream API旨在方便地从用户本地摄像机和麦克风访问媒体流。getUserMedia()方法是访问本机输入设备的主要方式。


API有几个关键点:


实时视频或音频以流对象的形式表示。

一定的安全控制,在web应用程序开始获取流数据之前,它通过询问用户是否授权。

输入设备的选择由MediaStream 处理(例如,当本地计算机有两个或者两个以上的摄像头或麦克风连接时).


每个MediaStream对象包括几个MediaStreamTrack对象。它们代表来自不同输入设备的视频和音频。


每个MediaStreamTrack对象可能包括几个信道(右声道和左声道)。这些是MediaStream定义的最小部件。


有两种方法可以输出MediaStream对象。首先,我们可以将输出显示为视频或音频元素。其次,我们可以将输出发送到RtcPeerConnection对象,然后将其发送到远程计算机。


使用MediaStream接口


让我们创建一个简单的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"); 
}

在这里,我们创建getUserMedia()函数,它检查webrtc是否受支持。然后,我们访问getUserMedia函数,其中第二个参数是接受来自用户设备的流的回调。然后,我们使用window.url.createObjectUrl将流加载到视频元素中,它创建一个表示参数中给定对象的URL。


现在刷新你的页面,点击允许,你应该看到你的脸在屏幕上。


请记住使用web服务器运行所有脚本。我们已经在webrtc环境教程中安装了一个。


MediaStream接口


属性


MediaStream.active (只读) -如果MediaStream处于活动状态,则返回true ,否则返回false。


MediaStream.ended (只读,不推荐) -如果在对象上已触发结束事件,则返回true ,这意味着流已完全读取,如果未达到流结尾,则为false。


MediaStream.id (只读)—对象的唯一标识符。


MediaStream.label (只读,不推荐)−用户代理分配的唯一标识符。


事件


MediaStream.onactive—当MediaStream对象变为活动时触发的活动事件的处理程序。


MediaStream.onaddtrack—在添加新的MediaStreamTrack对象时触发的addTrack事件的处理程序。


MediaStream.onended (不推荐) -当流终止时触发的结束事件的处理程序。


MediaStream.oninactive—当MediaStream对象变为非活动状态时触发的非活动事件的处理程序。


MediaStream.onremovetrack -在从它移除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>


我们添加几个按钮来尝试几个MediaStreamAPI。然后,为新创建的按钮添加事件处理程序,我们来修改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创建了一个简单的WebRTC应用程序。现在您应该对使WebRTC工作的各种MediaStream有一个清晰的概述。