All the video platforms developed by TSINGSEE Video support split screen playback. When we need to build a new product through a new framework, we need to consider how to build such a multi-screen split interface in a new way.

As we said last time in “All products I have made before are Worth redoing with RTC”, we are closely developing RTC and will launch RTC-like technical products in the future.

In the process of developing WebRTC to achieve multi-screen segmentation, we will encounter the use of array format to deal with the loop, but this method will need a lot of code, the code is complex and lengthy, not easy to compile and check, how to use less code to achieve the above function is the problem we need to consider at present.

We used the Element-UI framework in development; Therefore, the first thought is to realize multi-screen segmentation through the el-Row and el-Col tags in the Element-UI framework. (Add: use a single column to create a basic grid layout for browser content segmentation.) Using these two tabs is reminiscent of using a simple array, as shown below:

As in group format:

[{ 
children: [{},{}, ....]
}, {
children: [{},{}, ....]
 
},....]
Copy the code

The first array represents the need to loop through the VUE framework to display the contents of the second array. The second array children represents the contents of the video.

But in practice the array is cumbersome, and in the case of the number button above, the object is recreated with each click, greatly affecting the efficiency of code execution.

After a lot of trying and thinking, we came up with a simpler way to implement it, using the Elder-UI library’s el-row and el-Col tags, but at compile time we changed the array code as follows:

The final result is only the above three lines of code to achieve multi-screen segmentation.

Code parameters: value: click the split screen value of the button: such as: 1,2,4,9,16. Get the square root value rows: corresponds to the loop value of the tag el-row. Round cols: corresponds to the cyclic value of the label el-col. Rounding algorithm

The final effect is shown below:

In the process of developing the WebRTC framework, we found it to be a treasure trove worth exploring, and feel free to contact us if you want to know more.