4.3、集成 ar-call 点对点电话

引入组件

引入 ar-call 组件，实现点对点电话。

组件地址：

https://docs.anyrtc.io/v1/CALL/web.html

兼容情况

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

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

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

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

2、在 vue 文件 引入 ar-call

import ArCall from 'ar-call';

3、使用指南

3.1、实例化对象

options为实例配置，包括自定义数据、码率自适应是否开启、日志级别等。

let options = {};
let call = new ArCall(options);

3.2、监听回调

//上线成功回调
call.on("online-success", () => {

});
//上线失败回调
//根据code码查询错误原因
call.on("online-failed", (errCode) => {

});
//收到通话请求
call.on("make-call", (roomId, peerUserId, callMode, peerUserData, callExtend) => {

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

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

});
//收到挂断或者下线
call.on("end-call", (peerUserId, errCode) => {

});

3.3、配置开发者信息

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

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

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

3、最终伪代码如下：

<script>
    import ArCall from 'ar-call';
    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>