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

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来获取数据。

RoomClient.js

RoomClient是一个用于与服务器进行通信和管理房间状态的类。它使用protoo-client库与服务器进行WebSocket通信，并使用mediasoup-client库处理音视频传输。

protooClient 通常用于与服务器进行实时通信，与服务器进行双向通信，处理来自服务器的请求和通知。

在初始化时，传入store对象, 在constructor中初始化属性，并且根据传入的参数进行属性设置。

joi