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

请先将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 //进入直播间是否自动播放 一般都是自动播放的

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.img.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端直播还是用什么第三方的 如果用第三方的 那我们前端就只需要做拉流 就不需要做推流了 拉流就比较简单