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目录下执行npm start命令后其实就是将相关静态资源复制到server/public目录下，并且开启了文件刷新监控，多端同步，并自动打开浏览器访问访问配置的路径。然后所有的请求处理是由server来处理的，app起到辅助作用。

 关于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支持最好。

6、jsx文件

客户端页面涉及到React使用，简单了解一下,React官方文档.

index.jsx中使用：

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';

render(
    <Provider store={store}>
        <RoomContext.Provider value={roomClient}>
            <Room />
        </RoomContext.Provider>
    </Provider>,
    document.getElementById('mediasoup-demo-app-container')
);

Room.jsx，这是一个自定义的React的class组件，所有页面元素最后都被组合进这个组件中。

class Room extends React.Component
{
    render()
    {
        const {
            roomClient,
            room,
            me,
            amActiveSpeaker,
            onRoomLinkCopy
        }    = this.props;

        return (
            <Appear duration={300}>
                <div data-component='Room'>
                    <Notifications />
        ...............
        ...............

    componentDidMount()
    {
        const { roomClient }    = this.props;

        roomClient.join();
    }
}

componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行，类似于wondow.load()，此处在Room组件渲染完成后执行join()加入Room方法。

7、页面样式

Room页面样式用 Stylus 语法指定，静态文件位于 app/stylus/ 目录下，Room.styl中定义了自己的样式，Peers.styl中定义了参会者的样式，了解一下stylus语法后可按需求修改。

8、app启动失败解决方案

app在启动时可能出现

Error: ENOSPC:System limit for number of file watchers reached

解决方案 这里。

转载于:https://www.cnblogs.com/jixiaohua/p/11573957.html