文章目录

• • • 微信小程序接入直播
    • • 一.小程序配置
      • • 1.添加/更改服务类目
        • 2.开通实时播放/录制音视频流
      • 二.云直播服务器
      • • 1.云直播申请
        • 2.云直播配置
        • • 2-1添加域名
          • 2-2获取推流地址
          • 2-3获取播放地址
      • 三.组件介绍
      • • 1.live-pusher
        • 2.live-player
      • 四.代码实现
      • • 1.页面结构
        • 2.离线检测

微信小程序接入直播

​ 作者：kerwin

微信小程序开发如火如荼，很多公司都构建了自己的小程序。对于一些有产品的公司， 他们对于自己的小程序有直播需求，希望通过小程序直播获得流量变现。本文章就此需求，跟大家聊聊如何在自己的小程序加入直播功能。

一.小程序配置

小程序虽然提供了直播组件（后面会有介绍），但是直播组件暂只针对国内主体部分类目的小程序开放（https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html），需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。具体流程如下：

1.添加/更改服务类目

注意 ：添加类目（小程序必须经过企业认证），可能需要提供资质证明，比如添加在线视频课程的类目需要的资质如下

2.开通实时播放/录制音视频流

二.云直播服务器

直播功能除了小程序端的支持，也需要服务器（推拉流服务器）支持，我们自己搭建的成本过高，所以本文基于腾讯云直播来实现。

1.云直播申请

1. 注册 腾讯云账号，并完成 实名认证。
2. 进入 腾讯云直播服务开通页，勾选同意《腾讯云服务协议》，并单击 申请开通 即可开通云直播服务。

说明：

云直播服务申请开通成功后，会赠送20GB国内播放流量免费体验使用。为避免赠送流量用完后自动扣费，导致欠费无法使用云直播服务，建议您根据实际业务需求， 购买相应规格的套餐包。

2.云直播配置

使用云直播服务，至少需要2个域名，一个作为推流域名，一个作为播放域名，推流和播放不能使用相同的域名。

2-1添加域名

1. 准备自有域名，并完成域名备案。

2. 登录云直播控制台，进入域名管理，单击添加域名

• 云直播默认提供测试域名xxxx.livepush.myqcloud.com，您可通过该域名进行推流测试，但不建议您在正式业务中使用这个域名作为推流域名。
• 域名添加成功后，您可通过 域名管理 的域名列表查看域名信息。若您需要对已添加成功的域名进行管理，请参见 域名管理。
  3. 域名添加成功后，系统会为您自动分配一个 CNAME 域名（以 .tlivecdn.com 或 .tlivepush.com 为后缀）。CNAME 域名不能直接访问，您需要在域名服务提供商处完成 CNAME 配置，配置生效后即可享受云直播服务。

2-2获取推流地址

选择 直播工具箱 > 地址生成器。进入地址生成器页面，并进行如下配置：

1. 选择生成类型：推流域名。

2. 选择您在域名管理中已添加的推流域名。

3. 填写 AppName，默认为 live。

4. 填写自定义的流名称 StreamName，例如：liveteststream。

5. 选择地址过期时间，例如：2021-05-31 23:59:59。

6. 单击 生成地址 即可生成推流地址。

2-3获取播放地址

选择 直播工具箱 > 地址生成器获取播放地址，在该页面进行如下配置：

1. 选择生成类型：播放域名。
2. 选择您在域名管理中已添加的播放域名。
3. 填写 AppName，默认为 live。
4. 填写与推流地址相同的 StreamName，播放地址 StreamName 要与推流地址 StreamName 一致才能播放对应的流。
5. 选择地址过期时间，例如：2021-05-31 23:59:59。
6. 单击 生成地址 即可生成播放地址。
   

保存播放地址与推流地址，给后面的小程序组件使用。

三.组件介绍

1.live-pusher

https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html

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

  <live-pusher url="https://domain/push_stream" mode="RTC" autopush bindstatechange="statechange" style="width: 300px; height: 225px;" />

Page({
  statechange(e) {
    console.log('live-pusher code:', e.detail.code)
  }
})

2.live-player

https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html

实时音视频播放

<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />

Page({
  statechange(e) {
    console.log('live-player code:', e.detail.code)
  },
  error(e) {
    console.error('live-player error:', e.detail.errMsg)
  }
})

四.代码实现

1.页面结构

home.wxml

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>

<button type="primary" bindtap="handleTapOwner">我是主播</button>
<button bindtap="handleTapPlayer">我是观众</button>

home.js

  handleTapOwner(){
    wx.navigateTo({
      url: '/pages/owner/owner',
    })
  },
  handleTapPlayer(){
    wx.navigateTo({
      url: '/pages/player/player',
    })
  },

owner.wxml(主播)

<text>我是主播页面</text>
<live-pusher url="填之前保存的推流域名" mode="RTC" autopush bindstatechange="statechange" style="width: 100vw; height: 100vh;" beauty="9" whiteness="9"/>

player.wxml(观众)

<text>我是观众页面</text>
<live-player src="填之前保存的播放域名" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 100vw; height: 100vh" object-fit="fillCrop"  id="player"/>

把域名替换成自己申请的播放和推流域名

在手机预览效果如下 （必须两个微信号测试）

1. 如果手机支持分屏功能，登录两个微信号，分别打开主播和观众页面
2. 如果有两部手机，登录两个微信号，分别打开主播和观众页面

2.离线检测

如果主播不在线， 进去看到就是黑屏，我们可以通过云直播返回code来判断，主播是否正在直播，如果不在直播可以提示用户，主播已经下线。

code:-2301 网络断连，且经多次重连抢救无效，更多重试请自行重启播放

player.js

 onLoad: function (options) {
    this.player = wx.createLivePlayerContext("player")
  },
  
 statechange(evt){
    console.log(evt.detail.code)

    switch(evt.detail.code){
      case -2301: //网络断连，且经多次重连抢救无效，更多重试请自行重启播放

        wx.showModal({
          content:"主播暂时离开了",
          success:(res)=>{
            if(res.confirm){
              //重新连接播放地址
              this.player.play()
            }else{
              wx.navigateBack()
            }
          }
        })
    }
  },

ess:(res)=>{
if(res.confirm){
//重新连接播放地址
this.player.play()
}else{
wx.navigateBack()
}
}
})
}
},

好了，纸上得来终觉浅，小伙伴快试试吧！