小程序学习之路一:直播(音频)

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

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


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

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

    <live-player wx:if="{{!isAnchor && playerUrl}}" id="playerView" 
      class="playerView" src="{{playerUrl}}" mode="live" 
      bindstatechange="playerStateChange" binderror="playerError" />
    <live-pusher wx:if="{{isAnchor && pushUrl}}" id="pusherView" 
      url="{{pushUrl}}" mode="live" class="playerView"      
      bindstatechange="pusherStateChange" enable-camera="{{false}}" />

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

live-player

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

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

live-pusher

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

实时音视频录制。需要用户授权 scope.camerascope.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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • 关键字:腾讯云、移动直播、liveroom 本文只涉及腾讯云 标签代码结构讲解,只需要有基本的程序结构思维即可...
    学以致用123阅读 1,736评论 0 4
  • 1、手机直播 预览 开发环境搭建 安装微信开发者工具 相对于以前微信以前的产品来说。小程序在发布之初就面向开发者开...
    Zalman1阅读 34,292评论 6 10
  • 我能说我想在电脑的模拟器上看新闻了吗。。。哇哈哈哈 如果自己用命令行打包的应该对xcodebuild和xcrun ...
    終于阅读 5,701评论 0 2
  • 中央广播电视总台音乐厅内,在教育部党组书记、部长陈宝生,中宣部副部长、中央广播电视总台台长慎海雄的共同见证下,全国...
    会宁248南有亮阅读 755评论 0 2
  • 此刻,饱饱的吃完饭后,随意的坐在朋友的床上,突然有点想写的文字。来表达对这顿饭的感动,也对我们的友谊一种发自...
    失忆的风阅读 206评论 0 0