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，一個“預設-揚聲器”。