WebRTC API 最常用的三个javascript对象

webrtc学习和实践 • 来源：tutorialspoint • 2023年3月8日下午3:49 • WebRTC

本文分享WebRTC API 的几个主要的 javascript 对象，分别是 RTCPeerConnection、MediaStream和RTCDataChannel。

RTCPeerConnection对象

此对象是WebRTC API的主要入口点。它有助于我们连接到对等体，初始化连接并附加媒体流。它还管理与其他用户的UDP连接。

RTCPeerConnection对象的主要任务是设置和创建对等连接。我们可以轻松地钩住连接的关键点，因为这个对象在出现时触发一组事件。这些事件可让您访问我们的连接的配置 –

RTCPeerConnection是一个简单的javascript对象，您可以简单地创建这种方式：

[code] 
var conn = new RTCPeerConnection(conf); 

conn.onaddstream = function(stream) { 
   // use stream here 
}; 

[/code]

RTCPeerConnection对象接受一个conf参数，我们稍后将在这些教程中介绍。所述onaddstream当远程用户添加的视频或音频流，以它们的对等连接事件。

MediaStream API

现代浏览器可让开发人员访问getUserMedia API，也称为MediaStream API。功能有三个要点：

它允许开发者访问表示视频和音频流的流对象
如果用户在他的设备上有多个摄像头或麦克风，它会管理输入用户设备的选择
它提供一个安全级别，要求用户一直他想要获取流

要测试这个API，我们来创建一个简单的HTML页面。它将显示一个<video>元素，请求用户使用相机的权限，并在页面上显示相机的实时流。创建一个index.html文件并添加：

[code] 
<html>
 
   <head> 
      <meta charset = "utf-8"> 
   </head>
	
   <body> 
      <video autoplay></video> 
      <script src = "client.js"></script> 
   </body> 
	 
</html> 
[/code]

然后添加一个client.js文件：

[code] 
//checks if the browser supports WebRTC 

function hasUserMedia() { 
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia 
      || navigator.mozGetUserMedia || navigator.msGetUserMedia; 
   return !!navigator.getUserMedia; 
}
 
if (hasUserMedia()) { 
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia || navigator.msGetUserMedia;
		
   //get both video and audio streams from user"s camera 
   navigator.getUserMedia({ video: true, audio: true }, function (stream) { 
      var video = document.querySelector("video"); 
		
      //insert stream into the video tag 
      video.src = window.URL.createObjectURL(stream); 
   }, function (err) {}); 
	
}else {
   alert("Error. WebRTC is not supported!"); 
}
[/code]

现在打开index.html，你应该看到显示你的脸的视频流。

但要小心，因为WebRTC只能在服务器端工作。如果你只是用浏览器打开这个页面就不行了。您需要在Apache或Node服务器上托管这些文件，或者您喜欢哪些文件。

RTCDataChannel对象

除了在对等体之间发送媒体流，您还可以使用DataChannel API 发送附加数据。该API与MediaStream API一样简单。主要工作是创建一个来自现有RTCPeerConnection对象的通道：

[code] 
var peerConn = new RTCPeerConnection(); 

//establishing peer connection 
//... 
//end of establishing peer connection 
var dataChannel = peerConnection.createDataChannel("myChannel", dataChannelOptions); 

// here we can start sending direct messages to another peer 
[/code]

这就是你所需要的，只需要两行代码。一切都在浏览器的内层完成。您可以在任何对等连接创建一个通道，直到RTCPeerConnection对象关闭。

以上内容节选自：tutorialspoint.com，仅供学习参考。