微信小程序-腾讯云即时通信 IM 小程序直播(一)_小程序接腾讯云直播

 一、这里我们先讲讲使用腾讯云直播 流程

请先将1.2.3的都去简单的过一遍 就是组件的参数了解一下

1.准备推流跟拉流地址 （登录腾讯云在控制台 在直播工具箱 找到创建推流跟拉流）推流跟拉流的地址是不一样的 这里需要注意  详细步骤 https://cloud.tencent.com/document/product/454/7915

2.需要去到绑定小程序的公众平台添加相关直播的类目 比如你是做那类直播的 详细步骤https://cloud.tencent.com/document/product/454/12518

3.以上都做好之后 我们就可以使用

  3.1.<live-pusher> （推流组件 也就是直播）

  3.2.<live-player>（拉流组件 也就是观看直播）

  3.3.<mlvb-live-room>

  详细步骤请看这里 https://cloud.tencent.com/document/product/454/12518

4.讲一下这两个组件的几个重要属性

4.1<live-pusher> 推流组件

url:'推流地址' //这个是展示的推流地址 是我们第一步创建的推流地址 放在这里就好

mode:'SD' //这里有四个选择 SD，HD，FHD，RTC 。 SD、HD 和 FHD 主要用于直播类场景， RTC 则主要用于双向视频通话或多人视频通话场景

autopush:false 是否自动启动推流 //这个就是如果为 true 主播点击开播 那就是直接开播了 false 的话 我们就可以先预览一下直播效果 如果合适我们在直接开播

enable-camera:true //是否开启摄像头 默认开启

debug:true //是否开启调试 我们在开发中 开启这个方便我们观察 直播是否正常 上线需关闭

4.2<live-player> 拉流组件

url:'拉流地址' //这个是展示的拉流地址 是我们第一步创建的拉流地址 放在这里就好

mode:'live' //live 模式主要用于直播类场景 RTC 则主要用于双向视频通话或多人视频通话场景

autoplay:false //进入直播间是否自动播放 一般都是自动播放的

background-mute：false //当微信切到后台时，是否关闭播放声音

debug:true //是否开启调试 我们在开发中 开启这个方便我们观察 观看直播是否正常 上线需关闭

二、现在我们来看看 代码如果实现

提示:做一个功能的时候 我们最好先自己写一个dome测试一下 通了在放在咱自己的项目里面去 这样才不会眼花缭乱

1.这个是一个简单的创建直播的页面 其实还有其他的 这根据你们业务需求来 当我们点击直播的时候 这中间过程是需要请求后端接口 将房间名称以及其他业务需求传过去 然后后端会返回房间id 推流地址给你 这里我就不做了 因为我知道推流地址了 就直接拿来用了

index.wxml文件

<view class="box">
 
  <input class="input" value='{{roomData.roomName}}'
     type="text" placeholder="需要创建的房间名称" maxlength='30' />
 
  <button class="mini-btn" type="primary" 
     size="mini" bindtap='setupLive'>开播</button>
 
</view>

index.js文件

Page({
  data: {
    roomData: {
      roomNumberID: 110,//房间号
      roomName: '',//房间名称
      userNameID: 2,//用户id
      userName: '小明',//用户名称,
    }
  },
  //开播
  setupLive() {
    // 跳转到直播页面 
    wx.navigateTo({
      url: `/pages/room-live/index?roomData=` + this.data.roomData,
    });
  },
})

2.直播页面   直播展示  看你们怎么设计 如果直播是全屏的画 我们那些按钮采用cover-view 这个组件悬浮上去 比如：暂停直播、美颜等级调整、关闭直播等等这些操作

room.wxml

<view class="box">
 
  <live-pusher id="livePlayerID" src="{{roomData.roomUrl}}" mode="SD" 
     autopush='{{pusher.autopush}}' enable-camera='true' auto-focus='true' 
     orientation="orientation" beauty='5'  whitenes='5' device-position='front' 
     waiting-image='https://profile.csdnimg.cn/B/F/D/2_qingqingyang6' 
     background-mute  class="live-playe"></live-pusher>
 
  <view>
    <text>这里做一些其他操作</text>
  </view>
 
  <cover-view style="position: fixed;  top: 0;  left: 0;">
    悬浮在页面上 比如：暂停直播、美颜等级调整、关闭直播等等这些操作
  </cover-view>
 
</view>

room.js

 
Page({
  data: {
    roomData: {
      roomNumberID: 110,//房间号
      roomName: '美好的一天直播间',//房间名称
      userNameID: 2,//用户id
      userName: '小明',//用户名称,
      roomUrl: 'rtmp://.....', //推流地址
    },
    livePlayer: null,
  },
  onLoad(e) {
     <!-- 这里是初始化id -->
    this.data.livePlayer = wx.createLivePusherContext('livePusherID');
    this.data.livePlayer.start({})
  },
})

以上是简单的直播流程

3.观看直播间页面 其实跟直播的差不多 相对比较简单

see-rome.wxml

<view>
 
    <live-player src="rtmp://....." mode="live" 
      autoplay='false' muted="false" orientation="orientation"
      background-mute object-fit="contain" 
      debug id="livePlayerID" class="live-playe"></live-player>
 
</view>

see-rome.js

Page({  
 
    onLoad(e) {
        <!-- 这里是初始化id -->
        let player = wx.createLivePlayerContext('livePlayerID');
        player.play();
      },
 
})

一个简单的dome就完成了 其实有很多需要注意的 比如直播的时候实在pc端直播还是用什么第三方的 如果用第三方的 那我们前端就只需要做拉流 就不需要做推流了 拉流就比较简单

下期就讲一下 我们观看直播间的时候 给主播点赞 在直播间发送消息 直播间商品展示 送礼物等 腾讯云的即时通信IM