腾讯云 视频通话插件 Andord 和 IOS 支持多人通话 直播

腾讯云视频通话插件

1. 首先要到腾讯云，申请视频通话 sdkAppId ,

https://cloud.tencent.com/product/trtc

2. 每个用户名都要通过加密计算返回用户 usersig ,计算的方法

https://cloud.tencent.com/document/product/647/17275

实例化插件

const call=uni.requireNativePlugin('TencentCall'); 

3. 调用的方法 openCall

  call.openCall({"userid":"Android_trtc_01","roomid":110235,"usersig":"eJxlj1FPgzAYRd-5FaSvGv1aKIJvmyiDjYgDNfjSENrNhgmslDld9t9VXCKJ9-Wc3Jt7MEzTRNkivSjKsulrzfRHK5B5bSJA53*wbSVnhWaW4v*g2LdSCVastFADxJRSAjB2JBe1lit5MiY1V813o1a6ZIBHYscrNqz9NtkABDzXdsaKXA8wvs1vwgc-X3uzKpwpdZ-O91KUvv8cZBkOP7fV2Qsp*w12l7Jru3j7Hr5OFn1E75JdMM29x7oLrWx6mRMMxZN2wPXIMo1FFG2SpAjmo0kt38TpmgPOlWtbdER3QnWyqQeBAKaYWPATZByNL2lJX-o_"},ret=>{


    });

4. 参数说明

5. 回调 ret

{"code":1,"您主动退出了当前视频通话"}

{"code":2,"sdkAppId 不能为空,如没有请到腾讯云申请"}

{"code":3,"参数不能为空"}

{"code":4,"成功进入房间"}

{"code":5,"对方已连接上当前视频通话"}

{"code":6,"对方已挂断当前视频通话"}

android 用户测试数据

{
    "sdkappid": 1400209846,
    "users": [{
        "userId": "Android_trtc_01",
        "userToken": "eJxlj1FPgzAYRd-5FaSvGv1aKIJvmyiDjYgDNfjSENrNhgmslDld9t9VXCKJ9-Wc3Jt7MEzTRNkivSjKsulrzfRHK5B5bSJA53*wbSVnhWaW4v*g2LdSCVastFADxJRSAjB2JBe1lit5MiY1V813o1a6ZIBHYscrNqz9NtkABDzXdsaKXA8wvs1vwgc-X3uzKpwpdZ-O91KUvv8cZBkOP7fV2Qsp*w12l7Jru3j7Hr5OFn1E75JdMM29x7oLrWx6mRMMxZN2wPXIMo1FFG2SpAjmo0kt38TpmgPOlWtbdER3QnWyqQeBAKaYWPATZByNL2lJX-o_"
    }, {
        "userId": "Android_trtc_02",
        "userToken": "eJxlj0FPg0AYRO-8CsIVIx8LC9TEA6HQSqCo0EsvG2S3dVUWXJamjfG-q9hEEuf6XmYyH5qu60aVldd103SjUESde2boN7oBxtUf7HtOSa2II*k-yE49l4zUe8XkBG2MMQKYO5wyofieX4xQUNl9NyqpGgJoJg70lUxrv00uAIJF4HpzhR8mmMfb6G6Nm-VWDvGwZI9pjJ6b0n8IK3vcLRKwCnzI74NolVvtEK9CHocvbWTR*j1JTLNIZbnJRLH0w835LUM7y3w6tXRkXsrt6tjdziYVb9nlmgeeH7gOntEjkwPvxCQgsLGNHPiJoX1qX9AAXyY_"
    }, {
        "userId": "Android_trtc_03",
        "userToken": "eJxlj81Og0AYRfc8BWFbox8MQ6lJF-yVGNBqwbS4mRBmaj4tP07H1mp891ZsIol3e07uzf3SdF038jS7LKuqfW8UU4dOGPq1boBx8Qe7DjkrFSOS-4Pio0MpWLlWQvbQpJRaAEMHuWgUrvFseA2X7alRSVUxIANxy19Zv-bbZANYMHFtZ6jgcw9vo4fgJl76mGVyYc*w3DkE74l7lRARpTL2Q7*ID93yLk8e*Vv46aE3jkQzA7Ipwsl85NcvAc2fgs2qDXjKF-OktUeyzApar7z9dDqYVFiL8zUHnLFrEzqgOyG32Da9YIFJTYvATwztWzsC*eFfaQ__"
    }, {
        "userId": "Android_trtc_04",
        "userToken": "eJxlj01Pg0AURff8CsLa6BtggDbpAi39MCBt0QirCTIDeWkKZJjWFuN-V7GJJN7tObk390PTdd14DpPbvCiaY62YurTC0Ke6AcbNH2xb5CxXzJL8HxTnFqVgeamEHCChlJoAYwe5qBWWeDX8msvmu1FJVTCwR2LH92xY*22yAUyYeLYzVrAaYBRsH9bBZJXvw2rpwlOxTRZYe3GhnLDnfeRl5Jx0c4xPQezuHl989NcQXejboQJy19vLTfaevqa*22QLS6ygKo*ku494O99AWs1mo0mFB3G95oDjerZFR-QkZIdNPQgmEEpMC35iaJ-aFyxUX7w_"
    }]
}

IOS 用户测试数据

{
    "sdkappid": 1400209846,
    "users": [{
        "userId": "iOS_trtc_01",
        "userToken": "eJxlj11PgzAYhe-5FYRbjb4UytC7KW58CRKmqDcNlG5rdNCVqiPG-27EJTbx3D5Pzsn5NEzTtFZpeVZT2r91iqhRMMu8NC2wTv*gELwltSKObP9BdhBcMlKvFZMTtDHGCEB3eMs6xdf8aPC8JEoqSsDWpKF9IdPSb4sLgODCdz1d4ZsJ3t48XUdF4IcFiqJxNd-vspwGomnkMkgP1aMnZBZnd0OYJl7fuHH4EW3nMSz7roYKzZ7r0t-gcfFaXT2M2zAPFr2bnO-vc3ZS*EzRRJtUfMeOtzzwZr7rYI2*MznwvpsEBDa2kQM-sYwv4xtJKl5p"
    }, {
        "userId": "iOS_trtc_02",
        "userToken": "eJxlj01Pg0AURff9FYStRh-DpyYuUDAWaAulLFxNcBjokxTI8DTaxv9uxCaSeLfn5N7c00LTNH2X5FelEP1bR5w*B6lrt5oO*uUfHAaseEncVNU-KD8GVJKXNUk1QcO2bQYwd7CSHWGNZwM3OSdFggObSWPV8mnpt8UCYHDjWc5cwWaCq7B4WD4aLDiaeN3KNi5SCtduWdc7t7jfRpEyVJAEbT9WzXZMOx9DnwQE4zHz4kiuL1ZJuvcJsjTq5XO6EfkhDsVr8-K0zPZK3M0mCQ-yfMsBx-Us057Rd6lG7LtJYGDYBjPhJ-ria-ENgJ9fHQ__"
    }, {
        "userId": "iOS_trtc_03",
        "userToken": "eJxlj11PgzAARd-5FQ2vGFMoZbBkD0y32QXEjSVGXxo*WlPZaGVFYYv-3ciWSOJ9PSf35p4NAIC5i9LbrChkW2uqe8VMMAUmNG-*oFKipJmmqCn-QdYp0TCacc2aAdoYYwfCsSNKVmvBxdUQSUp1owsK0Ug6lhUdli4tLoQODHzXGyvibYDxYnNHln0VEpnHUhYtz14PX6dkwe6f80TyzIpUGu9rqw930eSlCsV8TtZlV*23qH0gPFl11qrPOd7ayRPpl64f5IqcHj*C9TvfzGajSS0O7HrLg97EdxEe0U-WHIWsB8GBNrYdBH9jGt-GDxTCX88_"
    }, {
        "userId": "iOS_trtc_04",
        "userToken": "eJxlj11LhEAYhe-9FeKtETM640fQTe7m2q6JjIt0NYiO9mb5MTsrVvTfI1tI6Nw*D*dwPjVd143swK6LsuzPneLqfRCGfqMbyLj6g8MAFS8Ut2X1D4p5ACl4USshF4gppRZCawcq0Smo4WJAwriSquSIrKRT1fJl6beFIGQh3yPOWoFmgfH2GERp4G9yl27HY23i7MkO-exlbB-rOBlxGzVzcd4JNGdT-vqcpVHz0N3toj5gZghyz8Tmw8xJ7BGLsnCidg8u2Y-3LDEPRXq7mlTwJi63HOS4HrHpik5CnqDvFsFCmGLLRj8xtC-tG-ziXaM_"
    }]
}

以上测试数据，因为通讯流量已用完，但可以正常打开视频页面

6.只要进入roomid 相同的房间，即可进入视频对话。

腾讯云视频通话插件

1. 首先要到腾讯云，申请视频通话sdkAppId , 腾讯云视频通讯收费情况请注册时查看相关收费标准。

腾讯云收费介绍:https://cloud.tencent.com/product/trtc

腾讯云实时音频通话控制后台:https://console.cloud.tencent.com/trtc

2. 每个有用户名都可以通过加密计算返回用户 usersig ,计算的方法

https://cloud.tencent.com/document/product/647/17275

提示，如果发现有华为andorid 10 打包打开有白屏的情况，看下打包的时候，是不是把x86指令打包进去了，需要移除x86打包才能正常。

3. 实例化插件

const call=uni.requireNativePlugin('Html5App-TencentCall'); 

IOS 需要配置以下权限

    "ios" : {
        "privacyDescription" : {
        "NSCameraUsageDescription" : "访问摄像头才可以正常使用,允许吗?",
        "NSMicrophoneUsageDescription" : "访问麦克风才可以正常使用,允许吗?"
        },
        "UIBackgroundModes" : [ "audio" ] //允许音频在后台播放，才可以让应用进入后台时继续通话
    }

4. 调用的方法 openCall , 默认的多人视频(多人视频，最多显示6个人，在屏幕上)

call.openCall({
        "userid": "Android_trtc_02",
        "roomid": 110235,
        "usersig": "eJxlj0FPg0AYRO-8CsIVIx8LC9TEA6HQSqCo0EsvG2S3dVUWXJamjfG-q9hEEuf6XmYyH5qu60aVldd103SjUESde2boN7oBxtUf7HtOSa2II*k-yE49l4zUe8XkBG2MMQKYO5wyofieX4xQUNl9NyqpGgJoJg70lUxrv00uAIJF4HpzhR8mmMfb6G6Nm-VWDvGwZI9pjJ6b0n8IK3vcLRKwCnzI74NolVvtEK9CHocvbWTR*j1JTLNIZbnJRLH0w835LUM7y3w6tXRkXsrt6tjdziYVb9nlmgeeH7gOntEjkwPvxCQgsLGNHPiJoX1qX9AAXyY_",
        isShowBackIcon:1,
        setBeautyStyle:{"beautyStyle":1,beautyLevel:6,whitenessLevel:4,ruddinessLevel:3},
        videoFps:15,
        videoBitrate:600,
        buttons:{"float":0,"beauty":0,"videoEnable":1,"mic":1,"camera":0}
    }, ret => {

        console.log(JSON.stringify(ret));
    });

多人通话的回调数据

{"msg":"成功进入房间","code":4}

{"msg":"用户主动退出了当前视频通话","code":1}

• 有新的用户加入了当前视频房间

{"msg":"有新的用户加入了当前视频房间",
"info":{
    "userList":["iOS_trtc_03","iOS_trtc_02"],  //目前在房间通话的所有用户
    "count":2, //目前通话人数，不包括您自己
    "userid":"iOS_trtc_03"  //当前刚进入视频房间的用户id
    },
"code":5
}

• 有用户离开了当前视频房间

{"msg":"有用户离开了当前视频房间",
"info":{
 "userList":[],  //目前在房间通话的所有用户
 "count":0, //目前通话人数，不包括您自己
 "userid":"iOS_trtc_03" //当前刚退视频房间的用户id
 },
 "code":6
 }

安卓悬浮窗权限，以上有效,需要手动到应用权限中设置该应用开启悬浮窗权限，应用返回后台才会显示出来。

一对一, 视频语音通话 模式.

5. 调用的方法 openCall , 一对一通话界面

call.openCall( 
{
"type":1,  //1 代表对一对一界面,0 代表默认界面  
"callType":"video", // 留空，使用默认模式，video 是视频，voice 是语音通话
"username":"英雄", //对方的用户昵称
"useravatar":"http://www.html5-app.com/uploads/avatar/042cae50df1d177b691417a316e4a886.png", //对方的头像
"myname":"都王", //我的昵称
"myavatar":"http://www.html5-app.com/uploads/avatar/f5950e65261f2aa3e846e2262b0c7690.png", //我的头像
"wait":"正在等待对方接受邀请...",
"prompt":"通话中...",
"userid":"iOS_trtc_04",  // 我的腾讯云通话用户id
"roomid":110235, //房间号, 数字,随着填写
"usersig":"eJxlj01Pg0AURff8CjJbjX0M4FB3lICBQKvSmOJmMmUGO5YCDtMvjf-diE0k8W3Pyb33fRqmaaJlmt*wsmz3jab63Alk3pkI0PUf7DrJKdPUVvwfFKdOKkFZpYUaoOW6LgYYO5KLRstKXgy5yKlWuqTgjKSeb*nQ9JviAOBbQjwyVuTrALOwCOLHYFNsj-NyfYAUggD41H3zyD6TeR8*h3M-SuLJuv54f6gmy2O88RPLE-hq4dRTRWLMdz1rzrXDnlahn73MolUxY-dFlLSpx0eVWu7E5S0Cjk08azzoIFQv22YQMFiuhW34OWR8Gd8XZ133" //用户名加密串
},ret=>
{
_this.title+=JSON.stringify(ret);
});

呼起后台应用, 该方法在android 处于后台运行时有效，当应用处于后台运行时，调用该方法可以打开APP回到前台。

• 使用该方法时,需要允许,应用在台后打开, 第一次使用时,会在通知栏有提示.

• 可以用于,推送消息时,应用在后台运行时,可以被动的方式呼起应用,然后打开接听页面.

  call.openApp();

6. 关掉通话界面,

• 调用此方法可以关闭自已的通话界面，例如： 当对方拒绝接听时，可以推送一条指令给自己，再调用此方法，就可以关掉自己的通话界面。

call.close();

• 安卓端，检查是否开启了悬浮窗权限

let is=call.isFloatPermission();

• 安卓端，跳转到悬浮窗权限设置

call.openFloatSetting();

7. 参数说明

主定义美颜效果参数说明 setBeautyStyle

setBeautyStyle:{"beautyStyle":1,beautyLevel:6,whitenessLevel:4,ruddinessLevel:3}

多人视频界面底部5个按钮的显示或隐藏.buttons

buttons:{"float":0,"beauty":0,"videoEnable":0,"mic":0,"camera":0}

视频通话清晰度设置

• videoFps

  15fps或20fps，5fps以下，卡顿感明显。10fps以下，会有轻微卡顿感。20fps以上，则过于浪费（电影的帧率为24fps）。

• videoBitrate

  用来获得更好的清晰度观感, 默认是600kbps , kbps（千比特每秒），又称千比特率，指的是数字信号的传输速率, 越大清晰度越高，可能会出现网络跟不上卡顿的问题，不必设置太大.

一对一视频通话，按钮下方提示文字设置

• 表格中的# 符号是 "|"

{
cancelButtonText:"取消",
hangUpText:"挂断",
leftButtonText:"切换到语音|切换到视频",
rightButtonText:"切换摄像头|免提"
}

// 英文语言提示，例如：
{
cancelButtonText:"Cancel",
hangUpText:"Hang Up",
leftButtonText:"Switch to Voice|Switch to Video",
rightButtonText:"Switch Camera|Speaker"
}

一对一语音通话，按钮下方提示文字设置

{
cancelButtonText:"取消",
hangUpText:"挂断",
leftButtonText:"静音",
rightButtonText:"免提"
}

// 英文语言提示，例如：
{
cancelButtonText:"Cancel",
hangUpText:"Hang Up",
leftButtonText:"Mute",
rightButtonText:"Speaker"
}

8. 回调 ret

{"code":1,"您主动退出了当前视频通话"}

{"code":2,"sdkAppId 不能为空,如没有请到腾讯云申请"}

{"code":3,"参数不能为空"}

{"code":4,"成功进入房间"}

{"code":5,"对方已连接上当前视频通话",time:"00:00"}

{"code":6,"对方已挂断当前视频通话",time:"00:00"}

腾讯云多人聊天室说明

1. 创建房间或加入房间

        plug.joinRoom({
        "userid":"Android_trtc_02",
        "roomid":110235,
        "usersig":"eJxlj01Pg0AURff8CjJbjTw*pqBJF4Bt2oYO0VZiupkQZsDRFugwSIvxv6vYRBLf9pzce9*Hpus62kabmzTLqrZUVJ1rjvQ7HQG6-oN1LRhNFbUl*wf5qRaS0zRXXA7QxBhbAGNHMF4qkYuL4ZdMVt*JSqqMgjUSG-ZGh7bfJAfAmriu544VUQxwPXsIl0HotPmRRbPbpyohoQ1xN9k6ULwuCjWvcdT3L8TuyGFlJL7wN9FpTfAiXzHjuXls5oHc3**DHemS*OrYBgXjuziu*qXhFdPpqFKJA7*85oJju545HvTOZSOqchAsMLFp2fBzSPvUvgB1pGCH"
        },ret=>{

        }
        )

参数说明

• userid => 用户ID
• roomid => 房间ID, 数字，随便定义
• usersig => 用户加密串

用户创建房间 和 其他用户 进入房间都是同样方法，只要房间ID 相同即可， 房主以第一个进入房间的为主。

回调参数

{"code":0,"msg":"进入房间成功"} ,{"code":1,"msg":"进入房间失败"}

当有新用户加入时

{"code":101,
"msg":"有用户加入房间",
"newsUserid":"iOS_trtc_04", //当前加入的用户
"list":["Android_trtc_02","iOS_trtc_04"]   //目前在线用户数组
}

当有用户离开时

{"code":102,
"msg":"有用户离开房间", 
"outUserid":"iOS_trtc_04",  //当前离开的用户
"list":["Android_trtc_02"]   //目前在线用户数组
}

主动离开房间

{"code":1,"msg":"离开房间成功"}

被踢出房间

{"code":3,"msg":"被踢出房间"}

2. 退出房间

plug.exitRoom();

用户关闭页面时，必须调用退出房间，不如不会真正的离开房间,还占用资源。

3. 设置切换音频通道

//0=>代表扬声器,1=> 听筒

plug.setAudioRoute({route:0},ret=>
{


}); 

4. 设置聊天禁言

all=>代表禁止所有人发言,其他代表禁止单个用户ID , mute : 0=>代表禁言,1=> 开启发言

plug.muteRemoteAudio({"userid":"all",mute:0},ret=>{

_this.tip=JSON.stringify(ret); 
});

5. 设置踢出用户

踢出某个用户, userid:all 时代表踢出所有人 ,其他代表单个用户ID

    const _this=this;
    plug.removeUser({"userid":"iOS_trtc_04"},ret=>{

        _this.tip=JSON.stringify(ret); 
    });

6. 设置本地音频是否开启，

mute : 0=>代表静音,1=> 开启声音 ，

    const _this=this;
    plug.muteLocalAudio({mute:1},ret=>{

        _this.tip=JSON.stringify(ret); 
    });

8. 用户名，用户头像，房主，允许房间人数 部分，一些建议。

可以新建一个表，记录创建房间的表， 例如：

• userid => 房主用户ID

• roomid => 房间号，

• num => 允许聊天的人数，

• live => 在线人数记录

• text => 房间介绍

• time => 创建房间时间 等等

• 一些需要的信息， 在用户创建房间时，先把房间数据提交到服务器，再返回打开聊天室页面。

• 用户头像这些，可以根据在线的用户id ,到用户表中拉取图片.

• 人数限制方面， 可以在用户加入前，先访问服务器获取房间信息的在线人数，是否达标，如果没有则让他进入房间。

目前提供的自定义方法

• 自定义模式 只能在 nvue 页面中使用。liveroom 标签作为主屏，用来显示视频的view.

• radius 属性设置，是否圆角显示

  <liveroom radius="false" ref="livePusher" ></liveroom> 

• liveroom-sub 标签用来作副屏，显示小视频的view，例如视频通话中，另一方的小视频窗口.

• radius 属性设置，是否圆角显示

  <liveroom-sub radius="false"  ref="liveroomsub" ></liveroom-sub>

• 通过 ref 方式来获取标签对象。

  this.view=this.$refs.livePusher;

方法介绍

回调事件

-示例

  <liveroom  ref="livePusher" 
  @onError="onError"
  >
  </liveroom> 

可以在腾讯云后台生成一些测试帐号

腾讯云实时音频通话控制后台:https://console.cloud.tencent.com/trtc

• 示例和方法,参考示例工程中的

9 只要进入roomid 相同的房间，即可进入视频对话。

10. 服务器端用户名加密计算 usersig

https://cloud.tencent.com/document/product/647/17275