npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

miniprogram-ar-play

v1.0.9

Published

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

Downloads

5

Readme

ar-play 拉流组件

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

小程序自定义组件

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

准备工作

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

使用说明

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

使用方法

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

WXML 文件中引用 ar-play

<!-- 拉流组件 -->
<ar-play 
  id="{{pubID}}-play"
  data-id="{{pubID}}"
  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}}" 
    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来暂停、播放等操作。| |playURL|String|-|是|ar-play组件拉流URL| |objectFit|String|contain|否|contain图像长边填满屏幕,短边区域会被填充⿊⾊; fillCrop图像铺满屏幕,超出显示区域的部分将被截掉| |orientation|String|vertical|否|画面方向:vertical竖直; horizontal水平| |enableAudio|Boolean|true|否|ar-play组件是否静音| |bindNetStateChange|Function|-|否|监听ar-play组件拉流网络质量| |bindPlayStatus|Function|-|否|ar-play组件播放状态的回调|

完整代码(以实时视频会议为例)

WXML

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

<!-- 推流组件,view包裹可自定义样式 -->
<view>
  <ar-push 
    id="arPush"
    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}}" 
    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>

JS

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

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

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

  //停止推流
  pausePush () {
    this.data.arPusherComponent.pause();
  },
  //恢复推流
  resumePush () {
    this.data.arPusherComponent.resume();
  },
  //切换摄像头
  switchCamera () {
    this.data.arPusherComponent.switchCamera();
  },
  //截图
  takeSnapshot () {
    this.data.arPusherComponent.snapshot(res => {
      console.log("截图结果", res);
    });
  },
  //打开/关闭摄像头
  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();
  },
})