小程序学习之路一：直播（音频）

备注：公司需要做一个微信小程序，本人属于微信小程序小白，从未做过微信小程序，于是开始了我的学习之路

现在开始我的第一个功能模块：音频直播，经过和后台同事们的沟通与交流，决定使用腾讯云直播，来实现该功能。（后台接通腾讯云直播，给我推流拉流的地址）

---

尤其注意：使用该功能之前，要保证你的微信小程序拥有该权限，根据官网给出的解释，我理解的是：暂只针对国内部分类型的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。

Step1：在 live.xml中 ，添加直播控件live-player、live-pusher

因为我的是音频直播，所以设置enable-camera="{{false}}" ，各位童鞋可以自行按照官网给出的参数去设置你想要的功能

live-player

基础库 1.7.0 开始支持，低版本需做兼容处理。

实时音视频播放。相关api：wx.createLivePlayerContext

live-pusher

基础库 1.7.0 开始支持，低版本需做兼容处理。

实时音视频录制。需要用户授权 scope.camera、scope.record。

Step2：在 live.js中 ，添加对推流、拉流的控制方法，用于点击事件调用

  onReady(res) {
    this.ctLivePlayer = wx.createLivePlayerContext('playerView');
    this.ctLivePusher = wx.createLivePusherContext('pusherView')
  },
/**==============Player事件开始=============**/

  playerStateChange(e) {
    console.log('live-player code:', e.detail.code)
  },

  playerError(e) {
    console.error('live-player error:', e.detail.errMsg)
  },

  bindPlayerPlay() {
    this.ctLivePlayer.play({
      success: res => {
        console.log('play success')
      },
      fail: res => {
        console.log('play fail', res)
      }
    })
  },
  bindPlayerPause() {
    console.log('进入暂停')
    this.ctLivePlayer.pause({
      success: res => {
        console.log('pause success')
      },
      fail: res => {
        console.log('pause fail')
      }
    })
  },
  bindPlayerStop() {
    console.log('进入停止')
    this.ctLivePlayer.stop({
      success: res => {
        console.log('stop success')
      },
      fail: res => {
        console.log('stop fail')
      }
    })
  },
  bindPlayerResume() {
    console.log('进入恢复')
    this.ctLivePlayer.resume({
      success: res => {
        console.log('resume success')
      },
      fail: res => {
        console.log('resume fail')
      }
    })
  },
  bindPlayerMute() {
    console.log('进入静音')
    this.ctLivePlayer.mute({
      success: res => {
        console.log('mute success')
      },
      fail: res => {
        console.log('mute fail')
      }
    })
  },
  /**==============Player事件结束=============**/

  /**==============Pusher事件开始=============**/
  pusherStateChange(e) {
    console.log('live-pusher code:', e.detail.code)
  },
  bindPusherStart() {
    this.ctLivePusher.start({
      success: res => {
        console.log('start success')
      },
      fail: res => {
        console.log('start fail')
      }
    })
  },
  bindPusherPause() {
    this.ctLivePusher.pause({
      success: res => {
        console.log('pause success')
      },
      fail: res => {
        console.log('pause fail')
      }
    })
  },
  bindPusherStop() {
    this.ctLivePusher.stop({
      success: res => {
        console.log('stop success')
      },
      fail: res => {
        console.log('stop fail')
      }
    })
  },
  bindPusherResume() {
    this.ctLivePusher.resume({
      success: res => {
        console.log('resume success')
      },
      fail: res => {
        console.log('resume fail')
      }
    })
  },
  bindPusherSwitchCamera() {
    this.ctLivePusher.switchCamera({
      success: res => {
        console.log('switchCamera success')
      },
      fail: res => {
        console.log('switchCamera fail')
      }
    })
  },
  /**==============Pusher事件结束=============**/

Step3：通过上面的两个步骤，只要你的推流、拉流的地址是正确的，你就能正常直播。如果出现了什么问题，也能通过错误码，对照官网给出的错误码对应的错误信息解释得到答案。

注意：只能在真机上调试，模拟器是无法进行直播操作的

也许，可能会出现以下错误情况：

1、小程序没有开通该权限，无法使用该功能；

2、推流、拉流地址错误；

文章摘自：
https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html