WebRTC 是一种开放的实时通信协议，它可以直接在浏览器或移动设备上实现点对点的音视频通信和数据传输。ngwebrtc 是 WebRTC 的一种封装，基于 AngularJS 构建，它提供了许多简便易用的 API，帮助我们快速开发 WebRTC 应用。
在本文中，我们将详细介绍如何使用 npm 包 ngwebrtc，来实现基本的音视频通信功能。
安装 ngwebrtc
我们可以通过 npm 安装 ngwebrtc：
npm install ngwebrtc
除此之外，我们还需要安装相关依赖项：
npm install simple-peer wrtc
安装完成后，我们就可以在项目中使用 ngwebrtc 了。
创建 WebRTC 连接
我们可以使用 ngwebrtc 中的 ngwebrtc-service 服务来创建 WebRTC 连接。在我们的 AngularJS 控制器中注入该服务，然后调用 createConnection() 方法即可创建连接：
angular.module('myApp', ['ngwebrtc'])
.controller('myCtrl', ['$scope', 'ngwebrtcService', function($scope, ngwebrtcService) {
// 创建 WebRTC 连接
var connection = ngwebrtcService.createConnection();
}]); createConnection() 方法会返回一个 WebRTC 连接对象。接下来，我们需要设置连接的参数和事件监听器。
-- -------------------- ---- -------
----------------------- -------------
--------------------- ---------- ------------------ ---------------- ---------------- -
-- -- ------ --
--- ---------- - -----------------------------------
-- ------
----------------------
----------- -- ----- ------------------------------ --
---
-- ----------
---------------------------- --------------- -
----------------------- ----- --------- -------
---
----在上面的代码中，我们通过 setConfig() 方法设置了 ICE 服务器地址，用于 NAT 穿透。同时，我们还监听了 stateChange 事件，来检测连接状态的变化。
创建本地流
在创建 WebRTC 连接后，我们需要获取本地的音视频流，并将其发送给远程端。我们可以使用 ngwebrtc-service 服务中的 captureMedia() 方法来获取本地流：
-- -------------------- ---- -------
----------------------- -------------
--------------------- ---------- ------------------ ---------------- ---------------- -
-- -- ------ --
--- ---------- - -----------------------------------
-- ------
----------------------
----------- -- ----- ------------------------------ --
---
-- ----------
---------------------------- --------------- -
----------------------- ----- --------- -------
---
-- --------
---------------------------------------------------- -
-------------------- ----- ----- ------ ---------- --------
-- ------- ------ ---
-----------------------------
---
----captureMedia() 方法返回一个 Promise，当成功获取本地流后，我们将其添加到 WebRTC 连接中。接下来，我们将学习如何建立点对点连接，进行音视频通信。
建立点对点连接
建立点对点连接时，我们需要为连接指定远程端的 ID。在 ngwebrtc 中，我们可以使用 ngwebrtc-watcher 指令来实现。
首先，我们需要在 HTML 中添加 ngwebrtc-watcher 指令：
<ngwebrtc-watcher id="remotePeerId"></ngwebrtc-watcher>
然后，在我们的控制器中，获取 ngwebrtc-watcher 指令对应的 $watch 对象，并监听远程端 ID 的变化：
-- -------------------- ---- -------
----------------------- -------------
--------------------- ---------- ------------------ ---------------- ---------------- -
-- -- ------ --
--- ---------- - -----------------------------------
-- ------
----------------------
----------- -- ----- ------------------------------ --
---
-- ----------
---------------------------- --------------- -
----------------------- ----- --------- -------
---
-- --------
---------------------------------------------------- -
-------------------- ----- ----- ------ ---------- --------
-- ------- ------ ---
-----------------------------
-- ----- -- ---
----------------------------- ---------------- -
-- -------- -
------------------- ---- ----- --------
-- -------
--- ---- - ---------------------------
-- ----------
---------------------- --------------- -
----------------- ----- --------- -------
---
-- ----------
--------------- -------------- -
--------------------- ------ ------- ------
---
----------------- ---------------- -
--------------------- ------ --------- --------
-- ------------
--- ----- - ---------------------------------------
--------------- - -------
---
-
---
---
----在上面的代码中，我们通过 $watch 监听了远程端 ID 的变化，获取到新的 ID 后，调用 connection.connect() 方法建立点对点连接。并监听连接状态和远程端数据、流的变化，以及将远程视频流显示在浏览器中。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
--------------- ------------
-------
----- -----------------------
--------- -----------
------ --------------- -----------------
---------- -----------
------ ---------------- -----------------
---------- ---- --------
------ ----------- ------------------------
------- --------------------------------------------------------------------------------
------- --------------------------------------------------------------------------
------- --------------------------------------------------------------------------
------- -----------------------------------------------------------------------
--------
----------------------- -------------
--------------------- ---------- ------------------ ---------------- ---------------- -
-- -- ------ --
--- ---------- - -----------------------------------
-- ------
----------------------
----------- -- ----- ------------------------------ --
---
-- ----------
---------------------------- --------------- -
----------------------- ----- --------- -------
---
-- --------
---------------------------------------------------- -
-------------------- ----- ----- ------ ---------- --------
-- ------- ------ ---
-----------------------------
-- ----- -- ---
----------------------------- ---------------- -
-- -------- -
------------------- ---- ----- --------
-- -------
--- ---- - ---------------------------
-- ----------
---------------------- --------------- -
----------------- ----- --------- -------
---
-- ----------
--------------- -------------- -
--------------------- ------ ------- ------
---
----------------- ---------------- -
--------------------- ------ --------- --------
-- ------------
--- ----- - ---------------------------------------
--------------- - -------
---
-
---
---
----
---------
-------
-------总结
本文介绍了如何使用 npm 包 ngwebrtc，在 AngularJS 应用中实现基本的音视频通信功能。我们可以通过 ngwebrtc-service 服务创建 WebRTC 连接，并获取本地音视频流，通过 ngwebrtc-watcher 指令指定远程端 ID，通过 connection.connect() 方法建立点对点连接，实现音视频通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005574a81e8991b448d4434