2020.12.7这一周 工作记录

rong初始化的时机：

每次打开一个项目中的页面，都是从app.jsx开始的。

app.jsx->RouteMatcher(IRRoomPage)->Initializer中使用了RoomV2WebSocket组件，该组件中的OnConnect方法会初始化rong。

（RouteMatcher的功能是把参数传给组件...虽然没太看懂是怎么传的)

也就是通过环境检测，

若环境符合要求，改变浏览器地址栏url，从app.jsx进入，按步骤走，此时已经获取音视频权限，初始化不会出错。

若环境不符合要求，则停留在环境检测页面。

所有现在改成，app.jsx那里进入时，分类，记录下role，若环境符合要求，则在房间初始化成功后进入房间；若不符合要求，则停留。

Index.jsx页面设计

Step Step1设备检测 Step2 进入面试房间

Step1设备检测 ：

欢迎使用极客神灯面试平台！

首次使用需要进行设备检测，若设备网络不变下次无需检测。

（若未开启：）

！检测到您未开启摄像头麦克风，请参考以下方法进行调整：

……

（若开启：）

一项一项地检测，麦克风、扬声器、摄像头。

麦克风：可以检测当前音量

扬声器：做成点击播放音量的亚子

摄像头：能够获取摄像头的媒体资源，并显示到窗口的标签中

今天利用了antd组件库中的Grid布局方式，还挺好用的，感觉flex只适合需要布局的元素比较少的情况，当元素比较多，又有很多行的时候，同时垂直方向还有很多地方需要对齐时，使用grid会方便很多。

然后有时候会需要在一小块地方用flex布局，这时候虽然上下都在一列，但是因为flex布局会该表元素原来在的位置，所以对齐这几px又是有点麻烦。我的情况是只需要文字右边对齐，所以使用justify-content = space-between，让文字右边贴着Col，然后下一行让文字text-align=right就可以了，效果还挺好的。

静态页面做完，开始补逻辑。
【图片】
这个是本电脑的媒体设备，groupId又几个是重复的，老板说过滤掉，好嘛，就过滤掉。那现在就只剩下一个“默认-麦克风”，一个camera，一个“默认-扬声器”。