4.1、集成 ar-rtcp 实时直播

引入组件

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

组件地址：https://docs.anyrtc.io/v1/RTCP/web.html

兼容情况

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

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

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

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

2、在 vue 文件 引入 ar-rtcp

import ArRTCPKit from 'ar-rtcp';

3、使用指南

文档地址：https://ding-doc.dingtalk.com/doc#/dev/ep7bpq

使用以下代码获取免登授权码（调用此api不需要进行鉴权，即不需要进行dd.config）。获取的免登授权码有效期5分钟，且只能使用一次，请查看获取免登授权码API。

3.1、实例化对象

let options = {};
let rtcp = new ArRTCPKit (options);

3.2、监听回调

//加入频道成功
rtcp.on("join-success", () =>{

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

});

//收到远程视频
rtcp.on("stream-subscribed", (rtcpID, mediaRender) =>{

});
//收到辅流视频
rtcp.on("exstream-subscribed", (rtcpID, mediaRender) =>{

});

3.3、配置开发者信息

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

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

//配置私有云(默认无需配置)
//rtcp.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>