miniprogram-ar-rtmpc

实时连麦小程序SDK

使用此组件需要依赖小程序基础库 2.2.1 以上版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

准备工作

• 注册微信小程序，登录小程序后台获取微信小程序appid，appSecrert，修改类目审核（社交、教育、医疗、政务民生、金融，目前只有这些支持），配置socket合法域名wss://teameeting.anyrtc.io:9095
• 前往平台注册账号获取开发者信息，创建应用并开通小程序服务
• 开发-配置中开启“使用npm模块”，基础库选择2.4.0及以上，打开“不校验合法域名”、真机调试打开“调试”。集成moniprogram-ar-meet、moniprogram-ar-push、moniprogram-ar-play

使用说明

1.结合小程序实时连麦SDK使用
2.结合小程序推流组件和小程序拉流组件使用

使用方法

• 安装 ar-rtmpc

npm install --save miniprogram-ar-rtmpc

• 会议初始化

//创建实例
let wxrtmpc = new wxRTMPC();
that.setData({
  wxrtmpc: wxrtmpc
});
//初始化
wxrtmpc.initEngine(config.DEV_ID, config.APP_ID, config.APP_KEY, config.APP_TOKEN, config.APP_DOMAIN);

• 加入房间

//加入房间
wxrtmpc.joinRoom(roomId, userid, username,JSON.stringify({ userid }));
//加入房间成功回调
wxrtmpc.on("onJoinRoomOK", () => {
  wx.showToast({
    title: '加入房间成功',
  });
});

• 收到推流地址

//收到推流URL回调，将URL绑定到ar-push推流组件中，其他人将收到自己的视频
wxrtmpc.on("onGetPushUrl", (code, data) => {
  console.log('onGetPushUrl', code, data);
  if (code === 0) {//成功
    that.setData({
      pushURL: data.pushURL
    });
  } else {
    wx.showToast({
      icon: 'none',
      title: '获取房间签名失败',
    });
  }
});

• 退出房间

wxrtmpc.leaveRoom();
//自行路由跳转

完整代码

WXML

<!--pages/room/room.wxml-->
<live-player wx:if="{{watchUrl && !onLine}}" style="width:100%;height:210px" id="rtcwatcher" src="{{watchUrl}}" autoplay binderror="onPlayError" bindstatechange="onPlay"></live-player>
<button wx:if="{{!onLine}}" type="button" bindtap="apply">连麦</button>

<ar-push 
  id="arPush"
  width="{{pushWidth}}"
  height="200"
  coverImg="123"
  enableAudio="{{enableAudio}}"
  enableVideo="{{enableVideo}}"
  pushURL="{{pushURL}}" 
  bindRoomEvent="handleRoomEvent">
</ar-push>

<button class="meet_btn" bindtap="pausePush">暂停推流</button>
<button class="meet_btn" bindtap="resumePush">恢复推流</button>
<button class="meet_btn" bindtap="switchCamera">切换前后摄像头</button>
<button class="" bindtap="enableCamera">开关摄像头 ：： 当前状态{{enableVideo ? '开' : '关'}}</button>
<button class="" bindtap="enableMicphone">开关麦克风 ：： 当前状态{{enableAudio ? '开' : '关'}}</button>

<!-- ar拉流组件，view包裹可自定义样式-->
<view wx:for="{{members}}" wx:key="index">
  <ar-play 
    id="{{item.pubID}}-play"
    pubID="{{item.pubID}}" 
    width="{{item.width}}" 
    height="{{item.height}}" 
    playURL="{{item.playURL}}" 
    bindPlayStatus="handlePlayStatus">
  </ar-play>
  <button class="meet_btn" data-id="{{item.pubID}}" bindtap="pause">暂停</button>
  <button class="meet_btn" data-id="{{item.pubID}}" bindtap="play">播放</button>
  <button class="meet_btn" data-id="{{item.pubID}}" bindtap="full">全屏</button>
</view>

<button wx:if="{{onLine}}" type="button" bindtap="hangup">挂断</button>

JS

var wxRTMPC = require('../../lib/RTMPCXcxKit.js').default;
const config = require('../../config.js');
const _windowWidth = wx.getSystemInfoSync().windowWidth;

// pages/room/room.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    onLine: false,
    watchUrl: '',//游客默认观看主播流
    userID: '',
    arPusherComponent: null,
    wxrtmpc: null,

    pushURL: '',
    pushWidth: _windowWidth,
    enableAudio: false,
    enableVideo: true,
    
    members: [],
  },

  onScreen () {
    wx.setKeepScreenOn({
      keepScreenOn: true
    })
  },

  offScreen () {
    wx.setKeepScreenOn({
      keepScreenOn: false
    })
  },

  //停止推流
  pausePush() {
    arPusherComponent: this.selectComponent('#arPush') && this.data.arPusherComponent.pause();
  },

  //恢复推流
  resumePush() {
    arPusherComponent: this.selectComponent('#arPush') && this.data.arPusherComponent.resume();
  },

  //切换摄像头
  switchCamera() {
    arPusherComponent: this.selectComponent('#arPush') && this.data.arPusherComponent.switchCamera();
  },

  //打开/关闭摄像头
  enableCamera() {
    this.setData({
      enableVideo: !this.data.enableVideo
    });
  },

  //打开/关闭麦克风
  enableMicphone() {
    this.setData({
      enableAudio: !this.data.enableAudio
    });
  },
  
  //暂停远程人员音视频流
  pause(e) {
    let that = this;
    let data = e.currentTarget.dataset;

    //参考 https://developers.weixin.qq.com/miniprogram/dev/api/media/live/LivePlayerContext.pause.html
    that.selectComponent(`#${data.id}-play`).pause({
      complete: res => {
        console.log('selectComponent pause', res);
      }
    });
  },

  //播放远程人员音视频流
  play(e) {
    let that = this;
    let data = e.currentTarget.dataset;

    //参考 https://developers.weixin.qq.com/miniprogram/dev/api/media/live/LivePlayerContext.play.html
    that.selectComponent(`#${data.id}-play`).play({
      complete: res => {
        console.log('selectComponent pause', res);
      }
    });
  },

  //使远程人员音视频流全屏
  full(e) {
    let that = this;
    let data = e.currentTarget.dataset;

    //参考 https://developers.weixin.qq.com/miniprogram/dev/api/media/live/LivePlayerContext.requestFullScreen.html
    that.selectComponent(`#${data.id}-play`).requestFullScreen({
      direction: 90,
      complete: res => {
        console.log('selectComponent pause', res);
      }
    });
    //此处由于只做演示，所以2秒之后结束全屏
    setTimeout(() => {
      that.selectComponent(`#${data.id}-play`).exitFullScreen({
        complete: res => {
          console.log('selectComponent pause', res);
        }
      });
    }, 2000);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    let roomId = '' + options.roomid;
    let wxrtmpc = new wxRTMPC();

    that.onScreen();

    that.setData({
      watchUrl: options.rtmpUrl,
      wxrtmpc: wxrtmpc,
      arPusherComponent: that.selectComponent('#arPush')
    });

    wxrtmpc.initEngine(config.DEV_ID, config.APP_ID, config.APP_KEY, config.APP_TOKEN, config.APP_DOMAIN);

    let userid = '' + parseInt(Math.random() * 10000);
    wxrtmpc.joinRTCLine(roomId, userid, JSON.stringify({ userid }));
    
    //连接RTC结果回调
    wxrtmpc.on("onRTCJoinLineResult", (code, data) => {
      console.log('onRTCJoinLineResult', code, data);
    });
    //申请连线结果
    wxrtmpc.on("onRTCApplyLineResult", (code, id) => {
      console.log('onRTCApplyLineResult', code, id);
      if (code === 0) {
        that.setData({
          onLine: true
        });
      }
    });
    //连线被挂断
    wxrtmpc.on("onRTCHangupLine", () => {
      console.log('onRTCHangupLine');
      that.setData({
        onLine: false
      });
    });
    wxrtmpc.on("onGetPushUrl", (code, data) => {
      if (code === 0) {//成功
        that.setData({
          pushURL: data.pushURL
        });
      } else {
        wx.showToast({
          icon: 'none',
          title: '获取房间签名失败',
        });
      }
    });
    //直播人员列表
    wxrtmpc.on("onRTCMemberListNotify", (nTotal, RoomID, RoomSvrID) => {
      console.log('onRTCMemberListNotify', nTotal, RoomID, RoomSvrID);
    });
    //直播开始
    wxrtmpc.on("onRTCLiveStart", () => {
      console.log('onRTCLiveStart');
    });
    //直播暂时停止
    wxrtmpc.on("onRTCLiveStop", () => {
      console.log('onRTCLiveStop');
      that.backIndex();
    });
    //直播结束
    wxrtmpc.on("onRTCLineLeave", () => {
      console.log('onRTCLineLeave');
    });
  },

  backIndex () {
    wx.navigateBack();
  },
  
  //申请连线
  apply() {
    this.data.wxrtmpc.applyRTCLine(JSON.stringify({ nickName: 'hello' }));
  },

  //挂断连线
  hangup () {
    this.data.wxrtmpc.hangupRTCLine();
    this.backIndex();
  },

  //监听房间事件
  handleRoomEvent (e) {
    let that = this;
    let data = e.detail;

    console.log('handleRoomEvent', data);
    let members = that.data.members;
    
    switch (data.tag) {
      case "MemberJoin":
        let newMember = data.detail;

        newMember.map(item => {
          let nitem = Object.assign({}, item, {
            width: 100,
            height: 100
          });
          members.push(nitem);
        });

        that.setData({
          members: members
        });
        break;
      case "MemberLeave":
        let leaveUsers = data.detail;

        members.map((item, index) => {
          leaveUsers.map((i, n) => {
            if (i.pubID === item.pubID) {
              members.splice(index, 1);
            }
          });
        });

        that.setData({
          members: members
        });
        break;
      case "PushError":
        //重新进会
        break;
    }
  },

  //监听播放状态
  handlePlayStatus (e) {
    let that = this;
    let data = e.detail;

    //错误码参考 https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
    console.log('handlePlayStatus', `pubID为 ${data.pubID} 的播放状态为 ${data.code}`);
  },

  //未连线时播放主播rtmp流状态
  onPlay (e) {
    console.log('onPlay', e);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log('onHide');
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log('onUnload');
    this.onScreen();
    //断开RTC连接并释放资源
    this.data.wxrtmpc.clear();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})