mediasoup-demo解析-客户端

1、gulp任务管理

app官方文档

npm start启动app，执行脚本：

"start": "gulp live"

该命令用启动gulp顺序任务组合live，位于gulpfile.js中，关于gulp相关点击这里

gulp.task(‘live‘, gulp.series(
    ‘clean‘,
    ‘lint‘,
    ‘bundle:watch‘,
    ‘html‘,
    ‘css‘,
    ‘resources‘,
    ‘watch‘,
    ‘browser‘
));

分别执行以下任务：

1. clean：清空OUTPUT_DIR目录；
2. lint：将lib目录下的js文件读取到流并进行一些格式化等操作；
3. bundle:watch：开启文件改变监控与绑定，该任务调用了gulpfile.js里面的bundle()函数，而bundle()函数里面主要是将上一步流中的js文件合并生成了mediasoup-demo-app.js文件，合并后的js文件有13.3M
4. html：复制index.html至OUTPUT_DIR目录下；
5. css：读取stylus/index.styl文件，转化，重命名为mediasoup-demo-app.css输出到OUTPUT_DIR目录下；
6. 在OUTPUT_DIR下创建resources目录；
7. watch：监控html, styl, resources...等一系列文件变化
8. browser：静态文件更新多端同步刷新配置

 关于app启动时报的这4个参数错误：

Possible race condition: `window.SHOW_INFO` might be reassigned based on an outdated value of `window.SHOW_INFO` 

该错误来源在app/lib/index.jsx中的run( )函数

if (info)
    window.SHOW_INFO = true;

if (throttleSecret)
    window.NETWORK_THROTTLE_SECRET = throttleSecret;

index.jsx最后被合并进mediasoup-demo-app.js，然后用于index.html，即首页显示相关脚本，该函数里面的window对象为浏览器窗口对象BOM，window的属性即浏览器窗口的属性

2、RoomClient类

关于客户端房间的定义在app/lib/RoomClient.js模块中，该模块中引用了 mediasoup-client 模块，定义了RoomClient类，房间的相关属性，websocket事件，以及麦克风，摄像头，共享，聊天等交互操作。

加入房间后建立websocket连接客户端，用的是 protoo-client 模块，这是一个专为群聊，会议设计的websocket模块，与一般的websocket client略有不同，除了websocket的open，close等事件之外还有request，response，notifaction事件，相关说明参考官方文档。

而server中用了与之对应的 protoo-server 模块，

3、Redux状态容器

除了上面的 gulp 外，RoomClient使用 Redux状态容器来记录 room 页面的状态参数。

Redux的唯一数据源store作为一个全局变量，定义在RoomClient.js中，并且对外暴露了

static init(data)
{
    store = data.store;
}       

init 函数，作为类的静态成员来初始化store，该函数在app/lib/index.jsx中被调用，将store赋给当前window对象并初始化，这些js文件最后合而为一被用于房间页面的js依赖。

导致store状态改变的action 事件描述定义在 app/lib/redux下，而与之对应的改变store的reducer纯函数定义在 app/lib/reducers目录下，STATE.md正是当前所有状态的展示。

然后在RoomClient中用store.dispatch()函数调用相关action改变store状态树，例如：

store.dispatch(
    stateActions.setRoomState(‘closed‘));

 4、WebRTC

WebRTC教程

WebRTC屏幕共享

Android WebRTC完整入门教程

5、屏幕共享的限制

mediasoup-demo client的屏幕捕捉是通过调用浏览器API实现的，只在Chrome和Firefox浏览器中可用，毕竟WebRTC的作为新兴标准，Google支持最好。

mediasoup-demo解析-客户端

原文：https://www.cnblogs.com/jixiaohua/p/11573957.html