前言
WebRTC 是一种多媒体通信技术，它可以在不需要中央服务器的情况下，直接通过浏览器进行实时通信（如视频聊天、音频聊天等）。在前端开发中，我们可以借助 WebRTC 技术实现实时通信功能。而 Redux-WebRTC 是一个基于 Redux 的 WebRTC 框架，它提供了丰富的 API 接口，可以帮助我们更方便地使用 WebRTC 技术，并且具有良好的状态管理能力。
本文将介绍如何使用 npm 包 redux-webrtc 实现 WebRTC 功能，并提供详细的代码示例和解释，旨在帮助读者更好地了解 WebRTC 以及如何使用 redux-webrtc 包。
环境要求
- Node.js
- npm 或 yarn
- React.js
安装
# 使用 npm 安装 npm install redux-webrtc # 使用 yarn 安装 yarn add redux-webrtc
使用
初始化
将 redux-webrtc 集成到您的应用程序中非常容易。在使用之前，我们需要先初始化 redux store。
-- -------------------- ---- ------- -- ---- ----- ----- ------ - ----------- - ---- -------- ------ - --------------- - ---- -------- ------ - ------------- - ---- --------------- ----- -------- - ----------------- ------- ------------- --- ----- ----- - ----------------------
配置
然后在应用程序中配置您的 WebRTC 端点和房间 ID。这可以通过在组件或模块中使用 RTCConfiguration 和 room 属性来完成。room 属性是您当前所连接的聊天室的名称，RTCConfiguration 是 WebRTC 官方 API 提供的连接选项。您可以在 MDN 上获取更多信息。
-- -------------------- ---- -------
-- -------
----- ------ - -
----------------- -
----------- -
-
----- -
-------------------------------
--------------------------------
-------------------------------
-
-
-
--
----- --------------
--在组件中，使用 connectRTC action creator 并将配置传递到 configureRTC action 中来配置我们的 WebRTC 端点。
-- -------------------- ---- -------
-- ----- ------ --
------ - ------- - ---- --------------
------ - ----------- ------------ - ---- ---------------
----- --------- ------- --------------- -
-- -------
------------------- -
-- -- ------ --
----- - --------- ------ - - -----------
-------------------------------
-- --- --- ----
-----------------------
-
-- -------
-
-- ----- ----- -----
------ ------- ------------- -- --
---- -----------------
------ -------------------
------
---------------接下来，使用 createOffer 和 answer action creator 来创建 offer 和 answer。所有直接参与聊天的用户都必须以此方式创建一个 offer 和 answer。
-- -------------------- ---- -------
-- -- ------------ ---- -----
------ - ----------- - ---- ---------------
----- --------- ------- --------------- -
-- -------
------------------- -
-- ---- -----
----- - -------- - - -----------
------------------------
-
-------- -
------ -
-- -------
--
-
-
-- -------发送和接收 IceCandidate
下一步是为我们的 WebRTC 接收器设置一个 iceCandidate，并将这个 iceCandidate 发送给远程端点。
-- -------------------- ---- -------
------ - ------ - ---- ---------------
----- --------- ------- --------------- -
-- -------
----------------------------- -
----- - -------- - - -----------
----------------------------
-
-- -------
-当我们接收到一个远程 IceCandidate 时，我们必须添加它。我们可以使用 addIce action creator 来将其添加到我们的 WebRTC 端点上。
-- -------------------- ---- -------
------ - ------ - ---- ---------------
----- --------- ------- --------------- -
-- -------
----------------------------- -
----- - -------- - - -----------
----------------------------
-
---------------------------------- ---------- -
----- - --------- --- - - -----------
-------------------- ------- ------------
-
-- -------
-Offer 和 Answer 交换
在最初连接 WebRTC 端点时，两个端点必须交换 offer 和 answer。在 redux-webrtc 中，我们可以使用 createOffer 和 createAnswer action creator 来生成 offer 和 answer，并使用 setLocalDescription 和 setRemoteDescription action creator 来将这些值传送回远程端点。
-- -------------------- ---- -------
------ - ------------ ------------- --------------------- ------------------- - ---- ---------------
----- --------- ------- --------------- -
-- -------
-------------------------- -
----- - --------- ---- ----- - - -----------
----- -------------- - -----------------------------
----- ----- - ----- ------------------------- ----------
------------------------------------------
----- -------- - ----------------------
----- ------ - ----- -------------------------- -----------
--------------------------------------------
-
-- -------
-媒体流
最后一步是启动 WebRTC 流。我们使用 getMedia 和 setLocalStream action creator 获取本地媒体流，用于在组件中启动本地 WebRTC 流。
-- -------------------- ---- -------
------ - --------- -------------- - ---- ---------------
----- --------- ------- --------------- -
-- -------
----- ----------------- -
----- - --------- --- - - -----------
----- - ------ ----- - - ------------------------
----- ----------- - ----- ------------------- ------ ----- ----
---------------------------- --------------
-
-- -------
-示例代码
下面是一个基本的 WebRTC 视频聊天组件示例代码。它一次连接一个聊天室，需使用其他人员参与才能进行视频聊天。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------- - ---- --------
------ - --------------- - ---- --------
------ - -------------- --------- ------------- -----------
------------ ------------- --------------------- --------------------
------- -------------- - ---- ---------------
----- -------- - -----------------
------- -------------
---
----- ----- - --------------------- ----
----- --------- - -
----------------- -
----------- -
-
----- -
-------------------------------
--------------------------------
-------------------------------
-
-
--
------ -
------ -----
------ ----
-
--
----- --------------
--
----- --------- ------- --------------- -
------------------- -
----- - -------- - - -----------
-----------------------------------------------------
----------------------------------
-----------------------
-
----- -------------------------- -
----- - --------- ---- ----- - - -----------
----- -------------- - -----------------------------
----- ----- - ----- ------------------------- ----------
------------------------------------------
----- -------- - ----------------------
----- ------ - ----- -------------------------- -----------
--------------------------------------------
-
----------------------------- -
----- - -------- - - -----------
----------------------------
-
---------------------------------- ---------- -
----- - --------- --- - - -----------
-------------------- ------- ------------
-
----- ----------------- -
----- - --------- --- - - -----------
----- - ------ ----- - - ------------------------
----- ----------- - ----- ------------------- ------ ----- ----
---------------------------- --------------
-
----- ------------------ -
----- - --------- --- - - -----------
----- - ------ ------ - - ----------------------------
----- --------- - ----
--------------------------------- - -
-------------------------------------
------ ----
--
----- ----------------- - --- ------------------------------
----- --------------------------------- ------- --------------------
----- -------------------------- ---------
----- ----------- - --- -----------------------------
----- ---------------------------------- ------- --------------
-
----- ------------------- -
----- - --------- --- - - -----------
----- - ------ ------ - - ------------------------------
----- -------- - ----
---------------------------------- - -
--------------------------------------
------- ----
--
----- ---------------- - --- -----------------------------
----- --------------------------------- --------- -------------------
----- ------------------------- -----------
----- ------------ - --- ------------------------------
----- ---------------------------------- --------- ---------------
-
-------- -
------ -
-----
--- --- ---
------
--------------- -- - --------------- - ----------- --
--------
-----
--------
------- ------ --- -------
--------- ------
---------- -----
--
---------
--- --- ---
----------------------------------------- -- -
------
------------
---------------- -- -
----- - ----- - - -----------
-------------------------------------------
--------------------- - -- -- - ------------------- --
--
---------------- --- ------------------
--------
--------
------- ------ --- -------
--------- ------
---------- -----
--
---------
---
------- ----------- -- ------------------------
----- -----
---------
------- ----------- -- ------------------------------------------------- --------------
----------------------------------------- -- -
--------------- -------------
------- ----------- -- ------------------------------- -------------
------- ----------- -- ----------------------------- -------------
-----------------
---
------
--
-
-
------ ------- ------------- -- --
---- -----------------
------ -------------------
------- ---------
---------------总结
在本文中，我们介绍了如何使用 npm 包 redux-webrtc 来构建实时 WebRTC 应用程序。通过深入的示例代码和解释，我们了解了如何使用 connectRTC 和 configureRTC action creator 实现 WebRTC 端点配置，使用 createOffer 和 addIce action creator 实现媒体流的传输等等。这些示例代码可以帮助您更好地理解这个技术，并为您的下一个 WebRTC 项目提供无价的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cc2