随着Web Phone 本月,我们想为您提供更多有关 WebRTC 功能的背景知识,该项目为我们基于浏览器的电话完成语音通话奠定了基础。
WebRTC 是 Google 管理的知名项目,可以轻松地通过网络浏览器传输音频、视频和数据。我们在 VirtualPBX 的开发人员使用其 API(应用程序编程接口)来创建可在桌面和移动浏览器中运行的电话。您可以使用它来创建自己的业务应用程序来管理视听信息和传输数据。
这是如何实现的?您在 Javascript 中使用的三个基本 API 控制着应用程序中发生的大部分事情。
getUserMedia 访问硬件
建立任何类型的浏览器到浏览器连接的第一步是了解所涉及的设备。因此,我们要了解的第一个 WebRTC 功能是 getUserMedia API。
看看这个 HTML5 Rocks 文章展示了 getUserMedia 如何在开始通话之前识别并请求访问个人的摄像头和麦克风。
作为开发人员,您只需像这样将参数传递给 getUserMedia:
{audio: true}
或
{video:true, audio:true}
第一个请求会让 getUserMedia 请求使用麦克风,第二个请求会请求使用摄像头和麦克风。对于开发者来说,WebRTC 在幕后隐藏了很多代码,这样的请求很容易发起。
如果您曾经看到浏览器请求使用相机的权限,则该请求背后的操作可能由 getUserMedia 发起。
RTCPeerConnection 建立连接
接下来是在两个(或更多)对等点之间建立连接,以便在它们之间共享信息。第二个主要的 WebRTC 功能是 RTCPeerConnection API。
最基本的 RTCPeerConnection 代码如下所示:
var connection = RTCPeerConnection(config);
该示例的配置 部分需要更多详细信息,例如您要用来帮助建立连接的服务器。最终,您将创建与该请求的连接,然后使用类似于此示例的代码处理音频和视频流:
pc.addTrack(track);
此处的屏幕截图显示了 Mozilla Developer Network 文章扩展了 addTrack 函数的语法,它是 RTCPeerConnection 的一部分。
简而言之,您将使用 RTCPeerConnection 在用户之间建立连接,然后引用 getUserMedia 音频和视频设备;然后您会将这些设备添加到媒体轨道,以保持用户之间的音频和视频连接处于活动状态。
用于任意数据的 RTCDataChannel
构建 WebRTC 应用程序时,您可能还希望让用户共享文本或文件。为此,您需要使用 RTCDataChannel API。
我们将在本文中介绍的 WebRTC 的最后一个功能在 Mozilla 开发者网络。
如上所示,一旦与 RTCPeerConnection 建立连接,下一步就是在该连接内创建数据通道:
sendChannel = connection.createDataChannel("sendChannel");
这里发生的事情是在连接配置中创建了一个名为sendChannel的通道(之前引用过,在本文的RTCPeerConnection部分中建立连接)。现在可以监视 sendChannel,以便应用程序知道数据通道何时打开或关闭:
sendChannel.onopen = handleSendChannelStatusChange;
sendChannel.onclose = handleSendChannelStatusChange;
您将使用的 WebRTC 功能
虽然这篇文章仅仅触及了您可以使用 WebRTC 项目完成的事情的皮毛,但我们希望它能让您瞥见使用它创建应用程序的便捷性。
请记住,getUserMedia、RTCPeerConnection 和 RTCDataChannel 下面有很多层。这三个 API 仅要求开发人员输入少量选项来创建用户之间的连接。后台发生的事情涉及与网络浏览器的接口、连接到服务器、处理编解码器以及管理对等点之间的数据流。开发人员无需手动执行任何繁重的工作。
最令人印象深刻的是 WebRTC 后端的底层复杂性与我们的网络电话等应用程序中的用户界面之间的差异。如果您在市场上购买新的电话系统并希望了解我们的网络电话可以提供什么,让我们的销售团队带领您完成 我们电话系统的个人导览。