npm 包 redsee-client 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 redsee-client

redsee-client 是一个用于实现实时音视频通信的 npm 包。该包采用 WebRTC 技术，支持多人视频会议、屏幕共享、文字聊天等功能。并且其提供了良好的 API 接口，便于使用者在自己的项目中进行二次开发，实现更多的定制化需求。在前端开发领域，redsee-client 是一个非常值得一试的开源项目。本文将和大家一起探究这个有趣的项目！

如何安装 redsee-client

redsee-client 可以通过 npm 进行安装:

npm install redsee-client --save

安装过程中，会自动安装相关的依赖包。

如何使用 redsee-client

redsee-client 的使用分为服务端和客户端两部分，客户端主要负责调用接口函数；服务端主要是建立信令服务器，进行各个客户端之间的视频流交互。

服务端的配置

redsee-client 需要一个信令服务器用于实现点对点通信。如果你没有搭建过自己的信令服务器可以借助 redsee-client 提供的教程进行搭建。搭建好服务端之后，根据具体配置参数，你可以得到信令服务器的 url 地址，例如 ws://example.com:8080。接着在客户端中进行配置：

import Redsee from 'redsee-client';
const redsee = new Redsee({
  url: 'ws://example.com:8080'
});

客户端的调用

定义好 redsee 对象后，就可以调用相关接口。例如，要加入一个房间:

-- -------------------- ---- -------
------------------------- -
  ------ -----
  ------ -----
  -------------- -----
---------- -- -
  -- ----------
----------- -- -
  -- ------
---

其中 'roomId' 可以由开发者自行指定；audio、video、sharingScreen 分别代表是否开启音频、视频、屏幕共享等选项。值得注意的是，在此之前，我们需要确保本地的摄像头和麦克风是可用状态。我们可以使用 getUserMedia 方法来获取访问用户媒体设备所需的授权:

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
}).then((stream) => {
  // 获取到本地视频/音频流
}).catch(() => {
  // 获取本地视频/音频流失败
});

这里我们指定了开启音频和视频两条流，实际上你也可以只开启其中一项。使用了 redsee.joinRoom 接口后，会产生一个 Room 对象，该对象拥有一些接口供用户使用，例如跟其他房间成员通讯:

-- -------------------- ---- -------
----- ---- - ------------------------- -
  ------ -----
  ------ -----
  -------------- -----
---------------- -- -
  -- -----------
  ----- -------- - ----------- -- ---------------
  ----- ----------- - ---------------------------------  -- --------
  --------------------- - ------- -- -  -- ------------
    -------------------
  --
  ----------------------- --------- -- ------
---

使用案例

下面我们以两个人视频通话为例子来介绍 redsee-client 的使用。测试的两个客户端都需要安装 redsee-client 、express 等相关依赖包。需要注意的是，测试时需要在不同的终端运行不同的客户端。

服务器代码(example/server.js):

-- -------------------- ---- -------
----- ------- - -------------------
----- --------- - --------------
----- ------ - --------------------------------

----- --- - ----------
----- ------ - -----------------
----- ---- - --- -------------- ----

----- --- - --- ------------------------- ---------
-------------------- -------- -------------- ---- -
  ------------------------ ----- -- ---- --------- --
---

客户端一代码(example/client1.js):

-- -------------------- ---- -------
------ ------ ---- ----------------

----- ------ - --- --------
  ---- ---------------------
---

-------------------------------------
  ------ -----
  ------ ----
---------------- -- -
  ----- ---- - ------------------------- -
    ------ -----
    ------ -----
    -------------- -----
  ---

  ---------------------

  ----- -------- - ----------
  ----- ----------- - ---------------------------------
  --------------------- - ------- -- -
    -------------------
  --
  ----------------------- ---------
----------- -- -
  ------------------------- ---------
---

客户端二代码(example/client2.js):

-- -------------------- ---- -------
------ ------ ---- ----------------

----- ------ - --- --------
  ---- ---------------------
---

-------------------------------------
  ------ -----
  ------ ----
---------------- -- -
  ----- ---- - ------------------------- -
    ------ -----
    ------ -----
    -------------- -----
  ---

  ----- ------------ - --------------------------------
  ------------------------ - -----
  ---------------------- - -------
  ------------------------ - --------
  ------------------------- - --------
  ----------------------------------------

  ------------------------- ------- -- -
    -------------------------- ---- -------
    ----- ------------ - --------------------------------
    ------------------------ - -----
    ---------------------- - -------
    ------------------------ - --------
    ------------------------- - --------
    ----------------------------------------

    ----- ----------- - ---------------------------------
    --------------------- - ------- -- -
      -------------------
    --
    ----------------------- ---------
  ---
----------- -- -
  ------------------------- ---------
---

你需要在打开本地服务器后运行 command：

node server
node client1
node client2

运行完成后，可以看到在 client2 打开的网页中有两个视频窗口，一个是自己的，一个是来自 client1 的。运行结果如下图：

总结

redsee-client 是一个非常强大、易用的 npm 包。在本文中，我们介绍了 redsee-client 的安装方法、基本用法以及几个比较实用的接口函数。同时，我们还提供了一个使用案例，通过该案例你可以深入了解该包的应用价值。我们也相信，通过这篇文章的学习，大家可以更快速地上手使用并掌握 redsee-client 这个工具。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8aac

npm 包 redsee-client 使用教程