miniprogram-ar-play

ar-play组件从服务端拉取实时流。

npm

Version: 1.0.3

Version published: 8 years ago

Weekly downloads: 6

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

ar-play 拉流组件

ar-play组件从服务端拉取实时流。

小程序自定义组件

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

准备工作

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

使用说明

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

使用方法

安装 ar-play

npm install --save miniprogram-ar-play

在需要使用 slide-view 的页面 page.json 中添加 ar-play 自定义组件配置

{
  "usingComponents": {
    "ar-play": "miniprogram-ar-play"
  }
}

WXML 文件中引用 ar-play

<!-- 拉流组件 -->
<ar-play 
  id="{{pubID}}-play"
  data-id="{{pubID}}"
  width="200"
  height="200"
  enableAudio="{{enableAudio}}"
  playURL="{{playURL}}" 
  bindNetStateChange="handlePlayNetChange"
  bindPlayStatus="handlePlayStatus">
</ar-play>

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

<view wx:for="{{members}}" wx:key="index">
  <ar-play 
    id="{{item.pubID}}-play" 
    data-id="{{item.pubID}}"
    pubID="{{item.pubID}}" 
    width="{{item.width}}" 
    height="{{item.height}}" 
    playURL="{{item.playURL}}" 
    bindNetStateChange="handlePlayNetChange"
    bindPlayStatus="handlePlayStatus">
  </ar-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>

ar-play的属性介绍如下：

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

完整代码（以实时视频会议为例）

WXML

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

<!-- 推流组件，view包裹可自定义样式 -->
<view>
  <ar-push 
    id="arPush"
    width="{{pushWidth}}"
    height="200"
    coverImg=""
    enableAudio="{{enableAudio}}"
    enableVideo="{{enableVideo}}"
    pushURL="{{pushURL}}" 
    bindNetStateChange="handlePushNetChange"
    bindRoomEvent="handleRoomEvent">
  </ar-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>

<!-- 拉流组件，view包裹可自定义样式-->
<view wx:for="{{members}}" wx:key="index">
  <ar-play 
    id="{{item.pubID}}-play" 
    data-id="{{item.pubID}}"
    pubID="{{item.pubID}}" 
    width="{{item.width}}" 
    height="{{item.height}}" 
    playURL="{{item.playURL}}" 
    bindNetStateChange="handlePlayNetChange"
    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 type="button" bindtap="leaveRoom">退出房间</button>

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

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

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

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;

    let roomId = '' + options.roomid;

    let wxmeet = new wxRTMeet();

    that.setData({
      wxmeet: wxmeet,
      arPusherComponent: that.selectComponent('#arPush')
    });

    wxmeet.initEngine(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("onJoinRoomFaild", (code, info) => {
      console.log("加入房间失败：", code, info ? info : "");
    });

    //收到离开房间指令,收到该回调需要离开房间
    wxmeet.on("onLeaveMeet", (code, info) => {
      console.log("离开房间的原因：", info ? info : "");
    });
    
    wxmeet.on("onGetPushUrl", (code, data) => {
      console.log('onGetPushUrl', code, data);
      if (code === 0) {//成功
        that.setData({
          pushURL: data.pushURL
        });
      } else {
        wx.showToast({
          icon: 'none',
          title: '获取房间签名失败',
        });
      }
    });

    wxmeet.on("onUserMessage", (strUserId, strUserName, strHeaderUrl, strUserData) => {
      console.log("onUserMessage", strUserId, strUserName, strHeaderUrl, strUserData);
    });
  },

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

    console.log('handleRoomEvent', data);
    switch (data.tag) {
      case "MemberChange":
        let arrMember = data.detail;
        arrMember.map(item => {
          item.width = 100;
          item.height = 100;
        });

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

  //监听推流网络质量
  handlePushNetChange (e) {
    let that = this;
    let data = e.detail;

    console.log('handlePushNetChange ====> 音频码率: %d , 视频码率: %d , 网络偏移: %d , 帧率：%d , 视频分辨率： %d * %d , GOP： %d', data.audioBitrate, data.videoBitrate, data.netJitter ? data.netJitter : 0, data.videoFPS, data.videoWidth, data.videoHeight, data.videoGOP);
  },

  //监听拉流网络质量
  handlePlayNetChange(e) {
    let that = this;
    let data = e.detail;

    console.log('handlePlayNetChange 用户PubId：', e.currentTarget.id.replace('user_', '').replace('-play', ''), ' , 用户网络状态: ', data);
  },

  //监听播放状态
  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;

    console.log('pause', data);
    console.log('selectComponent', that.selectComponent(`#${data.id}-play`));

    //参考 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();
  },
})

FAQs

What is miniprogram-ar-play?

Is miniprogram-ar-play popular?

Is miniprogram-ar-play well maintained?

Package last updated on 07 Jan 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install