TSINGSEE青犀視頻研發的視頻平臺都支持分屏播放，當我們需要通過新的框架來搭建一套新的產品的時候，就要考慮到如何通過新的方式來構建這樣一套多屏分割的界面，
我們上次在《我之前做過的所有產品都值得用RTC重做一次》曾經講過，我們對于RTC的研發正在緊密的進行當中，將會在未來推出RTC類的技術產品，
在開發WebRTC實作多屏分割程序中，會遇到用到陣列格式使用回圈來處理，但是該方法會需要很多的代碼量，代碼繁雜冗長，不易于編譯和檢查，怎么才能用少的代碼量實作上圖功能是我們目前要考慮的問題，
我們在開發中用的是element-ui框架；因此首先想到的是通過element-ui框架中的el-row與el-col這二個標簽來實作多屏分割，（補充：使用單一分欄創建基礎的格柵布局，實作瀏覽器內容分割作用）在使用這二個標簽中，又聯想到了使用簡單的陣列，如下圖：
如陣列格式；
[{
children: [{},{}, ....]
}, {
children: [{},{}, ....]
},....]
第一個陣串列示：需要使用vue框架進行回圈，來顯示第二個陣列的內容，
第二個陣列children表示：里面的video內容，
但實際該陣列很繁瑣，并且在上圖中的數字按鈕中，每次點擊都會重新創建物件，極大影響了代碼執行效率，
在多次嘗試和思考后，我們想到了一種較為簡單的實作方式，依然使用element-ui庫的el-row與el-col標簽，但在編譯的時候我們把陣列代碼做如下修改：
最終實作效果就是只有以上三行代碼量來實作多屏分割，
代碼引數介紹：
value: 點擊按鈕分屏的值：如：1，2，4，9，16 ，先獲取根號值
rows: 對應的是el-row這個標簽的回圈值，取整
cols: 對應的是el-col這個標簽的回圈值，四舍五入演算法
最終效果如下圖：
在研發WebRTC框架的程序中，我們發現該框架真的是一個寶藏，很值得我們深入探究，如果還想了解更多，歡迎聯系我們，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/234969.html
標籤：其他