WebRTC API
它由几个主要的 javascript 对象组成 -
- RTCPeerConnection
- 媒体流
- RTC 数据通道
RTCPeerConnection 对象
此对象是 WebRTC API 的主要入口点。它帮助我们连接到对等点、初始化连接和附加媒体流。它还管理与另一个用户的 UDP 连接。
RTCPeerConnection 对象的主要任务是建立和创建对等连接。我们可以轻松地钩住连接的关键点，因为该对象在它们出现时会触发一组事件。这些事件使您可以访问我们的连接配置 -
RTCPeerConnection 是一个简单的 javascript 对象，您可以通过这种方式简单地创建它 -
[code]
var conn = new RTCPeerConnection(conf);
conn.onaddstream = function(stream) {
// use stream here
};
[/code]
RTCPeerConnection 对象接受一个conf参数，我们将在这些教程的后面部分介绍。当远程用户将视频或音频流添加到他们的对等连接时，会触发onaddstream事件。
媒体流 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对象关闭之前，您可以在任何对等连接上创建通道。
概括
您现在应该已经牢牢掌握了 WebRTC 架构。我们还介绍了 MediaStream、RTCPeerConnection 和 RTCDataChannel API。WebRTC API 是一个不断变化的目标，因此请始终跟上最新的规范。
在这里你可以找到三个不同的层 -
在此模型中，两个设备都运行来自不同服务器的 Web 应用程序。RTCPeerConnection 对象配置流，以便它们可以相互连接，点对点。这个信号是通过 HTTP 或 WebSockets 完成的。但最常用的模型是三角形 -
在此模型中，两个设备都使用相同的 Web 应用程序。它在管理用户连接时为 Web 开发人员提供了更大的灵活性。