多方视频通话

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


1.一对一:

画中画布局示例图:

视频通话中,画中画布局指视频图像布局上有重叠。
注意:画中画布局时需注意2点:
(1)底层视频控件的父div和上层控件父div放入DOM树的顺序:先放入底层的,后放入上层的。
(2)需要隐藏视频窗口时,直接操作父div(将父div 设置display:none)。

画中画布局示例图

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


  • 示例代码:
<!--html文件中:-->
<div class="videoContainer" style="position:relative">
    <div id="otherVideoContainer" style="position:absolute"></div> <!--底层,即对方的视频控件父div:-->
    <div id="myVideoContainer" style="position:absolute"></div>  <!--上层,即自己的视频控件父div-->
</div>
//js代码部分:
//1.创建视频控件对象	
var otherVideoUI = CRVideo_CreatVideoObj();  			
otherVideoUI.id("other_video_obj");
$("div.otherVideoContainer").append(otherVideoUI.handler());   //把创建的控件放入DOM树中

var myVideoUI = CRVideo_CreatVideoObj();			
myVideoUI.id("my_video_obj");
$("div.myVideoContainer").append(myVideoUI.handler()); 

//2.设置宽高和父div布局
$("#otherVideoContainer").css({"display":"block","left":"0px",
"top":"0px","width":"1280px","height":"720px","zIndex":1000});
otherVideoUI.width(1280);
otherVideoUI.height(720);			

$("#myVideoContainer").css({"display":"block","left":"795px",
"top":"445px","width":"480px","height":"270px","zIndex":1001});
myVideoUI.width(480);
myVideoUI.height(270);

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

//4.设置视频编码参数
var cfg = {};
cfg.sizeType = 12; //720P: 1280*720 (不同的分辨率,请参考 CRVideo_VideoCfg)
cfg.fps = 12;
CRVideo_SetVideoCfg(cfg);

//5.设置视频流
setTimeout(function(){
    otherVideoUI.setVideo(otherUID);  //otherUID为对方的登录ID
    myVideoUI.setVideo(myUID); //myUID为自己的登录ID
}, 500);

//6.画中画处理
setTimeout(function(){
    myVideoUI.raise(); 
}, 800);

相关API请参考:

相关结构定义请参考:


2.多方视频:

多方视频示例图: