Mediasoup-demo app的一些个人理解逻辑梳理

TuTu0204

已于 2024-08-02 11:35:04 修改

阅读量1.8k

点赞数 34

CC 4.0 BY-SA版权

文章标签：前端 react node.js webrtc websocket

于 2024-03-27 14:00:51 首次发布

本文链接：https://blog.csdn.net/liurui0204/article/details/137075645

Mediasoup-demo

App文件夹下的index.html 是应用的入口页面，在页面中，使用了一个 id 为 'mediasoup-demo-app-container' 的 div 元素作为 React 的挂载点。当 index.html 页面加载时，它会引用lib文件夹下的index.jsx文件。

Index.jsx

在这个页面中首先导入了所需的模块和组件, 然后执行逻辑。

创建了一个Logger对象，它用于记录应用程序的日志信息，帮助开发人员进行调试、排查问题以及监控应用的运行状态。

定义reduxMiddlewares数组并添加thunk中间件，thunk是常用的Redux中间件, 能在store中处理异步逻辑。

createStore创建了一个store，reducers参数是一个包含所有reducer的对象，它们负责处理不同action的逻辑。undefined参数是初始状态，由各个reducer自己定义。applyReduxMiddleware(...reduxMiddlewares)应用了Redux中间件，对dispatch的action进行拦截和处理，进行日志记录、异步操作等。

调用用 domready模块，为了在DOM树生成后并且其他资源加载以及渲染前就执行, 在这个函数中异步调用了 run() 函数。

`run`函数

使用 url-parse 模块解析当前 URL 中的查询参数，从中提取出配置参数。

参数	类型	描述	默认值
roomId	字符串	房间的 ID	自动生成
displayName	字符串	参与者的名称	自动生成
handlerName	字符串	mediasoup-client `Device` 实例的处理程序名称	自动检测
forceTcp	布尔值	强制使用 TCP 代替 UDP 进行 RTC（音频/视频/数据通道）	false
produce	布尔值	启用音频/视频发送	true
consume	布尔值	启用音频/视频接收	true
datachannel	布尔值	启用数据通道	true
forceVP8	布尔值	强制使用 VP8 编解码器进行网络摄像头和屏幕共享	false
forceH264	布尔值	强制使用 H264 编解码器进行网络摄像头和屏幕共享强制使用 VP9 编解码器进行网络摄像头和屏幕共享	false
forceVP9	布尔值	强制使用 VP9 编解码器进行网络摄像头和屏幕共享	false
enableWebcamLayers	布尔值	启用网络摄像头的 Simulcast 或 SVC	true
enableSharingLayers	布尔值	启用屏幕共享的 Simulcast 或 SVC	true
webcamScalabilityMode	字符串	网络摄像头的 `scalabilityMode` (可伸缩模式)	对于 VP8/H264（每个 Simulcast 编码）是 'L1T3'，对于 VP9 是 'L3T3_KEY'
sharingScalabilityMode	字符串	屏幕共享的 `scalabilityMode`(可伸缩模式)	对于 VP8/H264（每个 Simulcast 编码）是 'L1T3'，对于 VP9 是 'L3T3'
numSimulcastStreams	数字	Simulcast 在网络摄像头和屏幕共享中的流数量	3
info	布尔值	显示有关媒体传输的详细信息	false
faceDetection	布尔值	运行人脸检测	false
externalVideo	布尔值	发送外部视频而不是本地网络摄像头	false
e2eKey	字符串	媒体端到端加密/解密的密钥（仅适用于某些 OPUS 和 VP8 编解码器）
consumerReplicas	数字	创建自己的人工副本并接收其音频和视频（不在 UI 中显示）	0

根据解析到的参数，初始化一系列配置。

store.dispatch使用 Redux 的 action 来设置全局的状态，存储在 store 中，可以被整个项目访问和使用。

基于解析到的参数和配置，创建一个RoomClient对象，这个对象将负责处理与房间相关的逻辑，包括加入房间、发送和接收媒体数据等操作。

使用 React 的 render 方法，将Room组件渲染到页面上的id 为 mediasoup-demo-app-container 的 DOM 元素。

<Provider store={store}>
    <RoomContext.Provider value={roomClient}>
        <Room />   //引用Room.jsx文件
    </RoomContext.Provider>
</Provider>

Redux和Provider：

Redux是一种用于应用程序状态的库，它通过一个全局的store来存储和管理状态数据。

Provider是React Redux库提供的组件，用于将Redux的store传递给整个React组件树。

通过connect函数连接到Redux store的组件可以直接从store中获取所需的state和dispatch，并且不需要手动传递props。

Context和RoomContext.Provider：

Context是React提供的一种用于在组件树中共享数据的机制，它允许在组件之间共享数据，不必通过props来进行传递。

RoomContext.Provider是自定义的Context对象提供的组件，用在组件树中向下传递数据。

通过RoomContext.Consumer或useContext钩子来获取Context中的值，从而在组件中获取和使用数据。

Redux和Provider主要用于全局状态的管理和数据共享，而Context和RoomContext.Provider主要用于在组件树中共享局部的数据。在Redux中，通过connect函数连接的组件可以直接从Redux store中获取数据，而在Context中，需要通过RoomContext.Consumer或useContext来获取数据。