miniprogram-anyrtc-play

小程序自定义组件

Usage no npm install needed!

<script type="module">
  import miniprogramAnyrtcPlay from 'https://cdn.skypack.dev/miniprogram-anyrtc-play';
</script>

README

# anyrtc-play

小程序自定义组件

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

使用说明

1.结合anyrtc小程序会议SDK使用
2.结合anyrtc小程序推流组件anyrtc小程序拉流组件使用

使用方法

  1. 安装 anyrtc-play
npm install --save miniprogram-anyrtc-play
  1. 在需要使用 slide-view 的页面 page.json 中添加 anyrtc-play 自定义组件配置
{
  "usingComponents": {
    "anyrtc-play": "miniprogram-anyrtc-play"
  }
}

WXML 文件中引用 anyrtc-play

<!-- anyrtc发布 -->
<anyrtc-play 
  id="{{pubID}}-play"
  width="200"
  height="200"
  enableAudio="{{enableAudio}}"
  playURL="{{playURL}}" 
  bindPlayStatus="handlePlayStatus">
</anyrtc-play>

组件可递归、可用view包裹自定义样式。例如:

<view wx:for="{{members}}" wx:key="index">
  <anyrtc-play 
    id="{{item.pubID}}-play" 
    pubID="{{item.pubID}}" 
    width="{{item.width}}" 
    height="{{item.height}}" 
    playURL="{{item.playURL}}" 
    bindPlayStatus="handlePlayStatus">
  </anyrtc-play>
  <button data-id="{{item.pubID}}" bindtap="pause">暂停</button>
  <button data-id="{{item.pubID}}" bindtap="play">播放</button>
  <button data-id="{{item.pubID}}" bindtap="full">全屏</button>
</view>

anyrtc-play的属性介绍如下:

|属性名|类型|默认值|是否必须|说明| |--|--|--|--|--|--| |id|String|-|是|用户获取组件的LivePlayerContext来暂停、播放等操作。| |width|Number|显示屏幕的宽度|是|anyrtc-play组件的宽度| |height|Number|0|是|anyrtc-play组件的高度| |playURL|String|-|是|anyrtc-play组件拉流URL| |enableAudio|Boolean|true|否|anyrtc-play组件是否静音| |bindPlayStatus|Functiong|-|否|anyrtc-play组件播放状态的回调|

完整代码

WXML

<!--pages/room/room.wxml-->

<!-- anyrtc发布,view包裹可自定义样式 -->
<view>
  <anyrtc-push 
  id="anyrtcpush"
  width="{{pushWidth}}"
  height="200"
  coverImg="123"
  enableAudio="{{enableAudio}}"
  enableVideo="{{enableVideo}}"
  pushURL="{{pushURL}}" 
  bindRoomEvent="handleRoomEvent"></anyrtc-push>
</view>

<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>

<!-- anyrtc订阅,view包裹可自定义样式-->
<view wx:for="{{members}}" wx:key="index">
  <anyrtc-play id="{{item.pubID}}-play" pubID="{{item.pubID}}" width="{{item.width}}" height="{{item.height}}" playURL="{{item.playURL}}" bindPlayStatus="handlePlayStatus"></anyrtc-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 type="button" bindtap="leaveRoom">退出房间</button>

JS

const _windowWidth = wx.getSystemInfoSync().windowWidth
const config = require('../../config.js');
let wxRTMeet = require('miniprogram-anyrtc-meet');

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

  /**
   * 页面的初始数据
   */
  data: {
    anyrtcPusherComponent: null,
    wxmeet: null,
    pushURL: '',
    pushWidth: _windowWidth,
    enableVideo: true,
    enableAudio: false,
    members: []
  },

  //停止推流
  pausePush () {
    this.data.anyrtcPusherComponent.pause();
  },
  //恢复推流
  resumePush () {
    this.data.anyrtcPusherComponent.resume();
  },
  //切换摄像头
  switchCamera () {
    this.data.anyrtcPusherComponent.switchCamera();
  },
  //打开/关闭摄像头
  enableCamera () {
    this.setData({
      enableVideo: !this.data.enableVideo
    });
  },
  //打开/关闭麦克风
  enableMicphone () {
    this.setData({
      enableAudio: !this.data.enableAudio
    });
  },
  //退出房间
  leaveRoom() {
    this.data.wxmeet.leaveRoom();
    wx.navigateBack();
  },

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

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

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

    that.onScreen();

    that.setData({
      wxmeet: wxmeet,
      anyrtcPusherComponent: that.selectComponent('#anyrtcpush')
    });

    wxmeet.initEngineWithAnyRTCInfo(config.DEV_ID, config.APP_ID, config.APP_KEY, config.APP_TOKEN, config.APP_DOMAIN);

    let userid = '' + parseInt(Math.random() * 10000);
    let username = '' + parseInt(Math.random() * 1000000);

    wxmeet.joinRoom(roomId, userid, username,JSON.stringify({ userid }));

    wxmeet.on("onJoinRoomOK", () => {
      wx.showToast({
        title: '加入房间成功',
      });
    });
    
    wxmeet.on("onGetPushUrl", (code, data) => {
      console.log('onGetPushUrl', code, data);
      if (code === 0) {//成功
        that.setData({
          pushURL: data.pushURL
        });
      } else {
        wx.showToast({
          icon: 'none',
          title: '获取房间签名失败',
        });
      }
    });
  },

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

    console.log('handleRoomEvent', data);
    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}`);
  },

  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);
  },

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

  },

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

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    //小程序后台,手机切到主页面
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    //返回入口,关闭小程序
    this.data.wxmeet.leaveRoom();
    this.offScreen();
  },
})

技术支持

加QQ技术咨询群:580477436 (一群) 554714720 (二群)
欢迎加入anyRTC社区 和我们一起探讨WebRTC技术以及解决集成问题。