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中初始化属性,并且根据传入的参数进行属性设置。