小程序直播

关于小程序直播推拉流

        微信小程序有自己的推拉流组件以及API所以用小程序做直播还是很方便的,需要注意的是目前只支持rtmp和flv格式.
话不多说先贴代码

第一部分是wxml文件的

　　主要有一个拉流(live-player)和一个推流(pusher)

 1 <cover-view hidden="{{hideall}}" class="darg" style=" top:{{top}}px;left:{{left}}px;" bindtouchmove="setTouchMove">
 2     分数：{{mark}}
 3 </cover-view>
 4 <view class="page-body">
 5     <view class="page-section">
 6         <view class='live-player'>
 7             <live-player class="live-body-player" id="player" src="rtmp://live.hkstv.hk.lxdns.com/live/hks" mode="live" autoplay bindstatechange="statechange" bindtouchstart="show_pusherC" binderror="error" object-fit="fillCrop" bindtouchend="touchend" />
 8             <cover-view hidden='{{!pusher_c}}' class='inner'>
 9                 <!---rtmp://10.206.208.1/myapp/mystream-->
10                 <cover-image bindtap="bindStart" class="live-body-button" src="../../image/play3.png"></cover-image>
11                 <cover-image bindtap="pusherPause" class="live-body-button" src="../../image/pause.png"></cover-image>
12                 <cover-image bindtap="pusherStop" class="live-body-button" src="../../image/stop.png"></cover-image>
13                 <cover-image bindtap="pusherResume" class="live-body-button" src="../../image/resume.png"></cover-image>
14                 <cover-image bindtap="pusherSwitchCamera" class="live-body-button" src="../../image/camera.png"></cover-image>
15             </cover-view>
16         </view>
17         <view>
18             <live-pusher id="pusher" class="live-body-pusher" url="rtmp://28618.livepush.myqcloud.com/live/28618_789af258d8?bizid=28618&txSecret=ca539a6a284807e6e90964e389eaae79&txTime=5B82CE7F" mode="SD" autopush bindstatechange="statechange" aspect="3:4" />
19         </view>
20 
21     </view>
22 </view>
23 <view class='voide_control'>
24     <video id="myVideo" src="http://yzy.tunnel.qydev.com/images/upload/video/20180609/1528547498007.mp4" class='video_player'></video>
25 </view>

第二部分js

 onReady(res) {
    this.ctx = wx.createLivePusherContext('pusher');
    this.video = wx.createVideoContext("myVideo");
  },
  statechange(e) {
    console.log('live-pusher code:', e.detail.code)
    // if (e.detail.code == 2001) {
            if(true){
      this.video.play();        
     

    }
  },

  pusherStart() {
    this.ctx.start({
      success: res => {
        console.log('start success')
      },
      fail: res => {
        console.log('start fail')
      }
    })
  },
  pusherPause() {
    this.ctx.pause({
      success: res => {
        console.log('pause success')
      },
      fail: res => {
        console.log('pause fail')
      }
    })
  },
  pusherStop() {
    this.ctx.stop({
      success: res => {
        console.log('stop success')
      },
      fail: res => {
        console.log('stop fail')
      }
    })
  },
  pusherResume() {
    this.ctx.resume({
      success: res => {
        console.log('resume success')
      },
      fail: res => {
        console.log('resume fail')
      }
    })
  },
  pusherSwitchCamera() {
    this.ctx.switchCamera({
      success: res => {
        console.log('switchCamera success')
      },
      fail: res => {
        console.log('switchCamera fail')
      }
    })
  },
  touchend: function(e) {
    var that = this;
    setTimeout(function() {
      that.setData({
        "pusher_c": false
      })
    }, 3000)
  },
  show_pusherC: function() {
    var that = this;
    that.setData({
      "pusher_c": true
    })
  },

  //分数
  onShow: function() {
      wx.connectSocket({
          url: 'test.php'
      })
      wx.onSocketOpen(function (res) {
          console.log('WebSocket连接已打开！')
      })
      wx.onSocketError(function (res) {
          console.log('WebSocket连接打开失败，请检查！')
      })
      wx.onSocketMessage(function (res) {
          console.log('收到服务器内容：' + res.data)
      })




        var that = this;
        setTimeout(function () {
            setInterval(function () {
                var mark = Math.round(Math.random() * 20)+60;
                that.setData({
                    "mark": mark
                })
            }, 1000)
        }, 3000)
  },
})

另外大家可能在做开发时没有直播源进行测试

在这里告诉大家一个测试的方法:

大家可以登陆腾讯云直播在产品里找到直播,

然后使用腾讯的直播服务进行测试