npm 包 webrtc-ring 使用教程

前言

WebRTC(Web Real-Time Communication)是一项支持浏览器进行实时高质量音视频通讯的技术,但是 WebRTC 本身实现起来相对复杂,其中包括 ICE、STUN、TURN、SDP 等概念。不过现在有很多好用的 WebRTC 库可以让我们更方便的实现这些功能,其中最主流的可能就是 SimpleWebRTC。不过在此介绍另外一款 WebRTC 库 — webrtc-ring

webrtc-ring 是一款纯 JS 实现的 WebRTC 库,相对于 SimpleWebRTC 等库,webrtc-ring 的代码体积更小(大约 10KB), 集成了 STUN/TURN 服务器,支持多人通讯等。虽然它在国内使用较少,但是在国外社区中被广泛使用。

本文详细介绍 webrtc-ring 的使用方法,包含示例代码。

安装

安装 webrtc-ring 利用 npm 可以很方便地完成:

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

webrtc-ring 中依赖了一款 Promise 实现的库 bluebird,如果你的项目中未引入可以像如下引入:

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

使用与 DEMO

在使用 webrtc-ring 之前,我们需要有一个 STUN/TURN 服务器。这里我们推荐 coturn,需要的自己配置。之后我们就可以像如下这样在项目中使用 webrtc-ring(以下演示了发布本地视频):

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

-----------

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

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

因为 webrtc-ring 的底层使用了 WebSocket,所以我们在配置完服务器信息后应该监听 ready 事件:

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

发布本地视频流:

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

订阅远程视频流:

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

完整示例代码见Github 仓库

API

webrtc-ring 还有其他丰富的 API 支持,比如说:

  • Ring.connect: 用于创建 Ring 对象
  • Ring.publish: 发布本地流
  • Ring.subscribe: 订阅远程流
  • Ring.leave: 离开会议
  • Ring.getLocalVideo: 获取本地摄像头

详细使用可以查阅 webrtc-ring on Github.

总结

webrtc-ring 是一款轻量级,易上手的 WebRTC 库,相比于 SimpleWebRTC 等库的代码体积更小,相信会在未来被更多人使用。本文主要介绍了 webrtc-ring 的使用方法,同时提供了一个完整的 DEMO 供读者参考。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600671058dd3466f61ffdd84


猜你喜欢

  • npm 包 wifi-control 使用教程

    在前端开发过程中,经常会遇到需要管理、控制本地网络 WiFi 的情况。npm 包 wifi-control 正是一款能够帮助我们在 Node.js 中控制 WiFi 功能的工具。

    4 年前
  • npm 包 wiesels-navbar 使用教程

    wiesels-navbar 是一款前端开发常用的 npm 包,它是一个轻量级、易用的导航栏组件,可以在您的网站或应用程序中方便快捷地创建和自定义导航菜单。 在本篇文章中,我们将介绍如何使用 wies...

    4 年前
  • npm 包 wifi-cli 使用教程

    简介 wifi-cli 是一个可以通过命令行控制 Wi-Fi 连接的 npm 包。它支持在 Windows、macOS 和 Linux 平台上运行,提供了方便快捷的 Wi-Fi 连接和管理功能。

    4 年前
  • npm 包 wifi-cc3000 使用教程

    前言 在现代生活中,无线网络已经成为人们日常生活的一部分。因此,无线网络技术也日渐成熟。而我所介绍的 npm 包 wifi-cc3000,则是针对一种无线网络芯片 CC3000 的 node.js 驱...

    4 年前
  • npm 包 wentto 使用教程

    前言 前端开发中,我们经常需要对网页进行监控,统计数据等等操作。wentto 是一款功能强大的监控工具,可以监控页面资源加载情况、AJAX 请求、错误异常等信息。在这篇文章中,我们将会详细讲解 wen...

    4 年前
  • npm 包 wheelevent.js 使用教程

    wheelevent.js 是一个用于监听鼠标滚轮事件的 JavaScript 库,它可以轻松地为 DOM 元素添加滚轮事件监听器,支持跨浏览器,并提供了丰富的回调函数选项。

    4 年前
  • npm 包 wheelhouse 使用教程

    1. 前言 前端开发中,我们常常需要使用各种各样的第三方包来实现我们的业务需求。npm 是一个非常优秀的包管理工具,十分方便我们使用第三方包。而 wheelhouse 是一个专门用于管理本地 npm ...

    4 年前
  • 使用 wifi-heat NPM 包进行 WiFi 网络调查的教程

    在许多情况下,需要监视和分析 WiFi 热点的强度和范围。这尤其适用于企业和公共场所,这些场所需要不间断的测量和各种报告。 在这篇文章中,我们将介绍一个称为 wifi-heat 的 NPM 软件包。

    4 年前
  • npm包 wifi-name 使用教程

    在开发前端应用程序时,我们有时需要访问设备的 WiFi 网络名称。但是在许多设备上,从 JavaScript 中访问 WiFi 名称是不可能的。幸运的是,npm 包 wifi-name 可以帮助我们轻...

    4 年前
  • npm 包 wifi-name-cli 使用教程

    wifi-name-cli 是一个基于 Node.js 开发的 npm 包,它能够让你从终端获取当前连接 Wi-Fi 的名称。使用这个包可以方便地获取当前 Wi-Fi 信息,避免通过图形化界面进行查找...

    4 年前
  • npm 包 wifi-names 使用教程

    在现代生活中,Wi-Fi 已经成为了无处不在的技术,人们已经离不开 Wi-Fi 了。但是,有时候我们需要寻找一些创新的方式来探测 Wi-Fi 网络。幸运的是,在 npm 上你可以找到一个名为 WiFi...

    4 年前
  • npm 包 wheel-direction 使用教程

    前言 在 Web 前端开发中,能够滚动的组件很多,如轮播图、滚动列表等等。但是有些时候,我们需要控制这些组件的滚动方向,如何实现呢?现在有一个 npm 包叫做 wheel-direction ,它可以...

    4 年前
  • npm 包 wheel-inertia 使用教程

    近年来,随着移动端的普及,滚动效果在前端设计中的应用越来越广泛。其中,滚动的惯性效果能够提高用户体验,并使页面更加生动。而 npm 包 wheel-inertia 正是一款帮助我们实现滚动惯性效果的工...

    4 年前
  • npm 包 wheel-of-fortune 使用教程

    介绍 wheel-of-fortune 是一个基于 Canvas 实现的转盘游戏组件,可以用于网页中的抽奖活动等场景。该组件支持自定义奖品数量、奖品内容、动画效果等。

    4 年前
  • npm包 WheelCapture 使用教程

    前言 在前端开发中,我们经常需要实现一些界面组件交互的动画效果,其中包括鼠标滚轮的滚动事件。本文将介绍一个npm包 WheelCapture,它可以帮助我们更加轻松的实现鼠标滚轮事件的监听和处理。

    4 年前
  • npm 包 wheel-picker 使用教程

    介绍 Wheel Picker 是一个用于移动端的 JavaScript 组件,可以实现类似于原生 iOS 的滚轮选择器功能。它可以让用户方便地选择日期、时间、城市等信息。

    4 年前
  • npm 包 wheelhouse-core 使用教程

    本篇文章旨在介绍 npm 包 wheelhouse-core 的使用方法。wheelhouse-core 是一个前端组件库,提供了一系列的组件和工具,帮助开发者快速构建专业的前端应用程序。

    4 年前
  • npm 包 wifi-password 使用教程

    什么是 wifi-password? wifi-password 是一个可以获取当前 Wi-Fi 网络密码的 npm 包。它可以在命令行下方便地帮助我们获取 Wi-Fi 的密码,避免了繁琐的查找和手动...

    4 年前
  • npm 包 wifi-password-cli 使用教程

    前言 在现代的生活中,Wi-Fi 已经成为了我们不可或缺的一部分。无论是在家庭中还是在工作场景中,我们都需要频繁地连接 Wi-Fi 网络。但是,想要连接一个 Wi-Fi 网络需要输入密码,有些 Wi-...

    4 年前
  • npm 包 wifi-scanners 使用教程

    背景介绍 在现代化的工作和生活中,无线网络已成为人们必不可少的通信方式。但是,有时候我们需要扫描附近的无线网络,以方便我们连接更加稳定和快速的热点。Node.js的一个 npm 包 wifi-scan...

    4 年前

相关推荐

    暂无文章