微信小程序使用live-pusher和live-player实现视频直播

微信小程序使用<live-pusher> 和 <live-player>实现视频直播

本文通过使用微信小程序来做一个简单的直播与播放功能

第一、音视频直播小程序中有类目限制，限制如下：

我们可以登录小程序后台设置，修改类目

修改成功后进入小程序后台的开发-开发管理-接口设置 菜单中，我们把这下面二个开关打开

第二、开通通讯的云直播，新用户免费赠送20G流量

打开下面网址，https://curl.qcloud.com/RNFIVHBh 

注册登录后开通云直播

第三，设置直播播放的域名

进入云直播后台，选择域名管理

云直播默认赠送一个免费的二级推流域名，主要用于推流，但是直播播放域名需要增加自己的已备案域名

添加完域名后要在自己域名的管理后台添加cname解析，具体步骤可以参考这个 https://cloud.tencent.com/document/product/267/19908

域名解析设置完后，我们在域名管理中可以看到自己的推流域名与播放域名

点击推流域名的管理按钮，切换到推流管理标签

我们可以看到推流的主key和防盗key，这个要记下来，最下面还有生成推流地址url的代码，复制下来

第四、具体代码

php生成推流和播放地址url代码

/**
 * 获取推流地址
 * 如果不传key和过期时间，将返回不含防盗链的url
 * @param domain 您用来推流的域名，就是前面设置cname的自己域名
 *        streamName 您用来区别不同推流地址的唯一流名称
 *        key 安全密钥
 *        time 过期时间 sample 2016-11-12 12:00:00
 * @return String url
 */
function getPushUrl($domain, $streamName, $key = null, $time = null){
    if($key && $time){
          $txTime = strtoupper(base_convert(strtotime($time),10,16));
          //txSecret = MD5( KEY + streamName + txTime )
          $txSecret = md5($key.$streamName.$txTime);
          $ext_str = "?".http_build_query(array(
                "txSecret"=> $txSecret,
                "txTime"=> $txTime
          ));
    }
    return "rtmp://".$domain."/live/".$streamName . (isset($ext_str) ? $ext_str : "");
}
function getPlayhUrl($playdomain, $streamName){
    return "rtmp://".$playdomain."/live/".$streamName;
}
echo getPlayhUrl("自己的播放域名","123456");
echo getPushUrl("腾讯赠送的二级推流域名","123456","自己的主key","2016-09-11 20:08:07");

直播端wxml

<live-pusher id="pusher" url="{{url}}" mode="RTC" autopush bindstatechange="statechange" style="width: 100vw; height: 100vh;"
    wx:if="{{enablepush}}" />

直播端js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    url: "",
    enablepush: false,

  },
  statechange(e) {
    console.log('live-push code:', e.detail.code)
  },
  onLoad:function(){
    var that=this;
    wx.request({
              url: "获取推流地址后端url",
              method: 'GET',
  
              success: function (res) {
                console.log(res)
                if (res.statusCode == '200' ) {
                     that.setData({
       			 url: res.dadta,
		         enablepush:true

     		     })
                } 

              },
              fail: function (res) {
               
              }
            })
  }
}

<live-player wx:if="{{enableplay}}" class="player" src="{{url}}" mode="RTC" autoplay bindstatechange="statechange"  style="width: 100vw; height: 100vh;"/>
</view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    url: "",
    enableplay: false,

  },
  statechange(e) {
    console.log('live-play code:', e.detail.code)
  },
  onLoad:function(){
    var that=this;
    wx.request({
              url: "获取播放地址后端url",
              method: 'GET',
  
              success: function (res) {
                console.log(res)
                if (res.statusCode == '200' ) {
                     that.setData({
       			 url: res.dadta,
		         enableplay:true

     		     })
                } 

              },
              fail: function (res) {
               
              }
            })
  }
}

this.contx = wx.createLivePusherContext("pusher");
        
this.contx.start({
          success: res => {
            wx.setKeepScreenOn({
              keepScreenOn: true,
            })
            wx.showToast({
              title: '直播开始',
            })
            console.log("start");
          },
          fail: res => {
            wx.showToast({
              title: '直播失败',
            })
            console.log("fail");
          }
        });