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(
    
        
            
        
    ,
    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 (
            
                
............... ............... 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

你可能感兴趣的:(mediasoup-demo解析-客户端)