多方视频通话

功能介绍

多方视频通话时，根据当前业务场景合理设置视频编码参数，可以在较低的带宽占用下实现流畅清晰的音视频沟通，下面将针对几种常见场景进行介绍。

1.一对一

• 画中画布局示例图:

常用于如双人视频聊天场景，双方通常都希望看到对方比较清晰的视频，此时可以使用较高的视频编码分辨率，比如720P或480P。

• 示例代码：

<!--html代码-->
<div class="videoContainer">
    <div id="otherVideoContainer"></div> <!--底层，即对方的视频控件父div：-->
    <div id="myVideoContainer"></div>  <!--上层，即自己的视频控件父div-->
</div>

/* css代码 */
.videoContainer {
    position: relative;
    width: 1280px;
    height: 720px;
}
#otherVideoContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#myVideoContainer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* 画中画需要处理层级关系 */
}

//js部分：
//创建视频控件对象	
var otherVideoUI = CRVideo_CreatVideoObj();
//把创建的控件放入DOM树中
document.getElementById('otherVideoContainer').appendChlid(otherVideoUI.handler());   
//otherUID为对方的登录ID
otherVideoUI.setVideo(otherUID);

//创建视频控件对象	
var myVideoUI = CRVideo_CreatVideoObj();
//把创建的控件放入DOM树中
document.getElementById('myVideoContainer').appendChlid(myVideoUI.handler());
//myUID为自己的登录ID
myVideoUI.setVideo(myUID);

//3.打开用户摄像头
CRVideo_OpenVideo(myUID)

相关API请参考：

• CRVideo_CreatVideoObj
• CRVideo_OpenVideo
• VideoObj.handler()
• VideoObj.setVideo()

2.多方视频

• 多方视频示例图：

常用于在线教育场景，老师的视频画面比较大，可以使用较高的分辨率比如720P，下面学生的视频画面比较小，应采用较低的视频编码分辨率，比如360P或256P。

• 示例代码：

<!-- html代码 -->
<div id="videoContent">
    <div class="mainVideo"></div>
    <div class="smallVideo"></div>
</div>

/* css代码 */
* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    background-color: #0c1d25;
}

#videoContent {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#videoContent .mainVideo {
    display: flex;
    width: 1280px;
    height: 720px;
    margin-bottom: 10px;
    background-color: yellow;
}

#videoContent .smallVideo {
    font-size: 0;
    display: flex;
}

#videoContent .smallVideo .student {
    height: 243px;
    width: 432px;
    margin-right: 10px;
    background-color: green;
}

#videoContent .smallVideo .student:last-of-type {
    margin-right: 0;
}

//js代码部分：
CRVideo_GetAllMembers().forEach(member => {
    const videoObj = CRVideo_CreatVideoObj();
    //假设老师的userID为teacher,需要放入指定的盒子
    if (member.userID === 'teacher') {
        document.getElementsByClassName('mainVideo')[0].appendChild(videoObj.handler());
    } else {
        const div = document.createElement('div');
        div.appendChild(videoObj.handler());
        div.className = 'student';
        document.getElementsByClassName('smallVideo')[0].appendChild(div);
    }
    videoObj.setVideo(member.userID);
});

//3.打开自己的摄像头
CRVideo_OpenVideo(UID);  //自己的登录ID

相关API请参考：

• CRVideo_CreatVideoObj
• CRVideo_GetAllMembers
• CRVideo_OpenVideo

相关结构定义请参考：

• CRVideo_MemberInfo

3.个性化视图

• 图一:

• 图二: