音视频通话

多方视频通话

更新时间: 2024/06/20 14:30:11

功能介绍

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

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());   
//otherUserID为对方的登录ID
otherVideoUI.setVideo(otherUserID);

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

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

相关API请参考:

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(UserID);  //自己的登录ID

相关API请参考:

相关结构定义请参考:

3.个性化视图

  • 图一:

图一示例图

  • 图二:

图2示例图