使用推流组件

最近更新时间:2020-09-21 17:58:35

在正式接入前,请先阅读微信小程序提供的 插件文档,了解插件的使用范围和限制。

版本支持

  • 最新插件版本:1.3.0。新增小窗功能,包体缩减。需在云直播控制台添加插件,使用小程序直播域名才能调用,无需通过 version 标识方案(即与旧版本不兼容,需要在云直播控制台接入插件)。
  • 最低插件版本限制:1.2.4。仍支持旧方案,但是新功能暂时不支持,需要通过 version 2 来标识新方案。

准备工作

  1. 微信公众平台 注册并登录小程序。
  2. 符合接入要求,申请插件并购买小程序·云直播服务,详见 小程序·云直播插件
  3. 开通小程序·云直播服务后,登录 云直播控制台,在【域名管理】中添加小程序直播域名,然后 自助拼接直播地址
  4. 下载并安装最新版本的 微信开发者工具,使用小程序绑定的微信号扫码登录开发者工具。

引入插件代码

在小程序中引入插件代码,可参考 demo 源码。使用插件前需在小程序工程的app.json中声明要使用的插件,例如:

{
  ……
  "plugins": {
      "liveRoomPlugin": {
          "version": "1.3.0",
          "provider": "wx95a7d2b78cf30f98"
      }
  }
}

使用插件中的推流组件

在 page 的.json文件中定义需要引入的live-room-push组件,使用plugin://协议。

{
    "usingComponents": {
        "live-room-push": "plugin://liveRoomPlugin/live-room-push"    //推流组件
    }
}

在 page 的.wxml文件加载上一步引入的live-room-push组件。

<live-room-push liveAppID="{{liveAppID}}" pushUrl="{{pushUrl}}" orientation="{{orientation}}" muted="{{muted}}" mode="{{mode}}" waitingImage="{{waitingImage}}" enableCamera="{{enableCamera}}" beauty="{{beauty}}" whiteness="{{whiteness}}" backgroundMute="{{backgroundMute}}"
  debug="{{debug}}" autoFocus="{{autoFocus}}" aspect="{{aspect}}" minBitrate="{{minBitrate}}" maxBitrate="{{maxBitrate}}" zoom="{{zoom}}" devicePosition="{{devicePosition}}" sdkAppID="{{sdkAppID}}" accountType="{{accountType}}" userID="{{userID}}" userSig="{{userSig}}"
  roomID="{{roomID}}" nickName="{{nickName}}" avatar="{{avatar}}" bindPushEvent="onPushEvent" bindIMEvent="onIMEvent">

直播推流组件相关属性说明

直播插件的使用方法和微信原生标签的方法一致,可参考微信小程序标签 live-pusher 的文档说明。

属性 类型 默认值 必填 说明
liveAppID Number 0 用户的腾讯云 AppID
pushUrl String "" 需用小程序直播推流域名生成的推流地址,详见 自助拼接直播地址
version Number 1 1.2.4版本插件参数,此处必填值为:2。旧方案接入:填1或不填。高版本无需填写。
orientation String "vertical" 推流画面方向,可选值有 vertical、horizontal
muted Boolean false 是否静音
mode String "SD" 清晰度,可选值:SD(标清)、HD(高清)、FHD(超清)、RTC(实时通话)
waitingImage String "" 进入后台推流时候的垫片图片
enableCamera Boolean true 是否开启摄像头
beauty Number 0 美颜指数,取值0 - 9,数值越大效果越明显
whiteness Number 0 美白指数,取值0 - 9,数值越大效果越明显
backgroundMute Boolean false 进入后台时是否静音,初始化设置生效
debug Boolean false 是否显示日志
autoFocus Boolean true 自动聚焦,初始化设置生效
aspect String "9:16" 宽高比,可选值有3:4,9:16
minBitrate Number 200 最小码率,仅在 mode 为"RTC"的时候生效
maxBitrate Number 1000 最大码率,仅在 mode 为"RTC"的时候生效
zoom Boolean false 自动调整焦距,初始化设置生效
devicePosition String "front" 摄像头前置或后置,值为 front,back。注意,这个值只是在组件初始化时生效,不能动态修改。动态切换摄像头用接口 switchCamera
audioQuality String 'high' 录音质量,'high'或者'low'
mirror Boolean false 是否镜像反转
autopush Boolean true 是否自动推流
bindPushEvent EventHandle null 推流状态变化事件回调
bindNetStatus EventHandle null 网络状态变化事件回调
bindError EventHandle null 推流错误回调
bindBgmStart EventHandle null 背景音乐开始播放回调
bindBgmProgress EventHandle null 背景音乐进度回调
bindBgmComplete EventHandle null 背景音乐播放完成回调
bindAttachedEvent EventHandle null 插件加载完成回调

组件实例化

live-room 组件支持开始推流、截图、切换摄像头等接口,要调用这些接口需要先获取到 live-room-push 的实例。

怎么获取 live-room-push 组件实例?
live-room-push 是腾讯视频云直播插件中的一个组件,在腾讯视频云直播插件中暴露了获取 live-room-push 组件实例的接口,您只需要先在 page 的.js文件中,将插件加载进来,即可获取到 live-room-push 组件实例。

// 加载插件
var plugin = requirePlugin("liveRoomPlugin")
// 获取 live-room 组件实例
var liveRoomComponent = plugin.instance.getLiveRoomInstance();

组件接口

live-room-push 组件提供如下接口:

  • 可参考微信小程序组件 LivePusherContext 方法
  • start
    开始推流。调用之后会启动推流。在开始推流之前,pushUrl也要保证已经设置到组件属性中。
    // 获取live-room-push组件实例
    var liveRoomPushComponent = plugin.instance.getLiveRoomPushInstance();
    liveRoomPushComponent.start();
  • stop
    结束推流。
    // 获取live-room-push组件实例
    var liveRoomPushComponent = plugin.instance.getLiveRoomPushInstance();
    liveRoomPushComponent.stop();
  • snapshot
    截图。
    liveRoomPushComponent.snapshot({
      success: function (res){
         wx.saveImageToPhotosAlbum({
             filePath: {{imagepath}}
         })
      },
      fail:function(res) {
      }
    });
  • switchCamera
    切换前后摄像头。
    liveRoomComponent.switchCamera();
  • toggleTorch
    打开/关闭手电筒。
    liveRoomComponent.toggleTorch();
  • playBGM
    播放背景音乐。
    liveRoomComponent.playBGM({
      url: media_url,
      success: function(res){},
      fail: function(err){},
      complete: function(res){}
    });
  • stopBGM
    停止背景音乐。
    liveRoomComponent.stopBGM();
  • pauseBGM
    暂停背景音乐。
    liveRoomComponent.pauseBGM();
  • resumeBGM
    恢复背景音乐。
    liveRoomComponent.resumeBGM();
  • setBGMVolume
    设置背景音量。
    liveRoomComponent.setBGMVolume({
      volume: "0.5",// 0-1之间的浮点数字符串
      success: function(ers){},
      fail: function(err){},
      complete: function(res){}
    });
  • startPreview
    开启摄像头预览。
    liveRoomComponent.startPreview();
  • stopPreview
    关闭摄像头预览。
    liveRoomComponent.stopPreview();

推流事件

推流事件分为:

  1. 普通的推流事件,tag 是 pushEvent,code 含义见 状态码
  2. 错误事件,tag 是 error。现在只有白名单校验出错时会抛出,code 是-1,具体的错误原因在 detail 中给出。
目录