4.2、集成 ar-meet 视频会议

引入组件

引入 ar-rtcp 组件，实现实时直播。

组件地址：

https://docs.anyrtc.io/v1/MEET/web.html
https://docs.anyrtc.io/v1/MEET/miniapp.html#installSDK

兼容情况

• Chrome、Firefox、safari 11(以上)等，具体使用webRTC检测工具
• H5支持chrome内核。

1、使用 npm 命令安装 ar-meet

在 uni-app 项目的根目录，执行 npm 命令:

npm install ar-meet --save-dev
# 安装或更新至最新版本
npm install ar-meet@latest --save-dev

2、在 vue 文件 引入 ar-meet

import ArMeetKit from 'ar-meet';

3、使用指南

3.1、实例化对象

options为会议配置项，包括用户信息、会议类型、视频分辨率、会议身份类型、码率自适应等。

let options = {};
let meet = new ArMeetKit(options);

3.2、监听回调

//加入会议成功
meet.on("join-success", () => {

});
//加入会议失败
//根据code码查询错误原因
meet.on("join-failed", (code) => {

});
//设置其他人视频显示窗口
//对方（或己方）同意视频通话请求后，会收到此回调，收到后需要将`mediaRender`添加展示到页面上。
meet.on("stream-subscribed", (peerUserId, pubId, userId, rtcUserData, mediaRender) => {

});
//其他人离开移除视频显示窗口
meet.on("stream-unsubscribed", (peerUserId, pubId, userId, rtcUserData) => {

});

3.3、配置开发者信息

配置开发者信息，开发者信息可在anyRTC管理后台中获得，详见创建anyRTC账号。

//配置开发者信息
meet.initAppInfo(APP_ID, APP_TOKEN);

//配置私有云(默认无需配置)
//meet.configServer(SERVE_URL);

3.4、设置本地显示窗口

设置本地显示窗口，参数constraints为音视频配置项，包含视频帧率、码率、相机类型等。

rtcp.setLocalVideoCapturer({
  video: {
    enabled: true,
    deviceId: ""
  },
  audio: {
    enabled: true,
    deviceId: ""
  }
}).then(e => {
  //将视频e.mediaRender绑定到页面
  //可以在这里发布视频
}).catch(err => {
   console.log(err);
});

3.5、视频流操作

mediaType媒体类型：0 视音频，1音频
stream辅流视频
rtcpID系统分配的频道ID
mediaRender视频对象

//发布视频流
rtcp.publish(mediaType);
//取消发布
rtcp.unPublishEx();
//发布屏幕辅流(屏幕共享)
rtcp.publishEx(stream)
//取消发布屏幕辅流(屏幕共享)
rtcp.unPublishEx();
//订阅
rtcp.unSubscribe(rtcpID)
//取消订阅
rtcp.unSubscribe();

3.6、退出

离开房间。

rtcp.close();

3、最终伪代码如下：

<script>
    import ArRTCPKit from 'ar-rtcp';
    export default {
        data() {
            return {
                rtcp : null
            }
        },
        onLoad() {
            this.rtcp = new ArRTCPKit ({
                videoProfile: 'ARVideoProfile480P', // 视频分辨率，发布媒体流的类型为音视频时才成效
                logLevel     : 'error', //打印日志级别： info、warning、error
                userId         : '', //自定义用户ID
                userData     : {}, //自定义用户数据，推荐JSON字符串
                autoBitrate : true    //是否开启码流自适应
            });
        },
        methods: {

        }
    }
</script>