小程序直播插件调研 - 直播带货

TanXiang
469 阅读7分钟
前提条件是要有资质：直播资质，电商资质


产品架构



优势：可以快速植入原生小程序，满足抄底延迟，超大并发量的要求，基于微信生态，能快速通过微信传播


费用

注意：

  • 类目资质下来在进行购买，否则购买了小程序也会驳回
  • 即日起至2020年8月31日，申请插件通过后立享免授权费试用1个月，活动页 下单可享额外优惠（试用期间流量费正常结算，最终上线以微信审核为准，建议发布成功后再下单购买）

费用组成： 插件授权费（30,000元/年/插件） + 小程序直播流量费 + 增值功能费

计费说明：一个插件授权只能一个appid使用，授权可以叠加买，相当于延期，

小程序直播流量费用： 4元/ GB 计费方式：后付费，每月1号口出上月费用

增值功能费用： 直播转码，直播录制，直播截图，智能鉴黄，移动直播SDK，点播服务，IM相关服务

方案选择

场景类直播：需要开通 1，电商平台类目（方案：小程序直播插件） 2，社交-直播类目（标准直播+直播标签）

资质

小程序 - 云直播插件

方案我们选择: 小程序+云直播插件


申请插件

  1. 登录微信小程序后台，在【设置】 > 【基本设置】中，确定已具备符合接入的类目，然后保存基本信息服务类目截图备用（小程序名称和服务类目），和记录小程序AppID用于填写申请。
  2. 在小程序后台选择【设置】【第三方设置】【插件管理】，添加小程序-云直播插件并截图
  3. 小程序需要满足【电商】或【教育】类目场景，为避免购买后无法接入，需要先准备以上信息和截图
  4. 信息提交完成后，审核为5个工作日

购买服务

当插件状态【待审核】变为【待付款】，即可前往购买插件，见购买指南

添加直播域名

完成插件购买后，在【云直播控制台】【域名管理】中，单击【添加域名】，捷克添加直播域名。

可使用标准直播的推流域名进行直播推流，使用小程序的播放域名进行播放，按照小程序直播的价格计费，可参见 购买指南

  • 若无小程序直播推流需求，无需添加小程序推流域名，可直接使用标准直播的推流域名在 App 或者 OBS 推流即可。
  • 小程序插件必须使用小程序直播的播放域名，但是 App 或其他终端不限制，建议 App、Web（H5）等其他终端使用标准直播的播放域名进行播放。


注意：

  • 添加小程序直播的播放域名时，建议使用当月没有产生消耗的自有域名，否则添加完成后当月用量均按照小程序直播的价格出账。
  • 添加小程序直播的播放域名后，暂不支持删除解绑，请慎重处理。

域名CNAME配置

域名计入云直播后，系统会自动分配一个CNANE域名，可在管理列表中查看。CNAME不能访问，需要在域名服务提供商完成CNAME配置，配置生效后，即可使用云直播服务。

若您的 DNS 服务商为阿里云，且已完成域名备案，可参考下述步骤进行 CNAME 设置。

  1. 登录阿里云控制台，进入【云解析DNS】>【域名解析】。
  2. 选择您需添加 CNAME 的域名，单击【解析设置】。
  3. 选择【添加记录】，在添加记录页进行如下设置：
    • 记录类型：选择 CNAME。
    • 主机记录：填写子域名的前缀。若播放域名为play.myqcloud.com，则添加play；若需要直接解析主域名myqloud.com，则输入@；若需要解析泛域名，则输入\*。
    • 解析路线：建议选择默认。
    • 记录值：填写腾讯云控制台域名管理页域名对应的 CNAME 值，格式为domain.livecdn.liveplay.myqcloud.com。
    • TTL：建议填写10分钟。
  4. 单击【确定】即可。

验证CNAME是否生效

方法1：进入云直播控制台的【域名管理】查询后缀为.myqcloud.com的域名状态符号是否变成表明 CNAME 已成功。

方法2：Linux/Mac 系统下，通过 dig 命令查看，命令格式为：dig 自有域名。若第一行显示解析到云直播提供的目标域名，表明 CNAME 已成功

方法3：Windows 系统，可通过【开始】→【运行】→输入 cmd 并回车，在命令行模式下输入：nslookup 自有域名。若已解析至云直播提供的目标域名，表明 CNAME 已成功。

使用推流组件

先了解插件

版本支持：见文档

准备工作

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


在小程序中引入插件代码，在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 的文档说明。

组件实例化

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

在page的.js文件中，将插件加载进来，即可获取live-room-push组件实例


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

组件接口

可参考微信小程序组件 LivePusherContext 方法

推流事件

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

使用播放组件

版本支持，准备工作同引入插件代码同推流组件

使用播放组件

{
    "usingComponents": {
        "live-room-play": "plugin://liveRoomPlugin/live-room-play"    //播放组件
    }
}

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

<view class="container-box">
<view class="player-view">
  <live-room-play liveAppID="{{liveAppID}}" playUrl="{{playUrl}}" orientation="{{orientation}}" objectFit="{{objectFit}}"
    minCache="{{minCache}}" maxCache="{{maxCache}}" mode="{{mode}}" muted="{{muted}}" debug="{{debug}}" bindPlayEvent="onPlayEvent" >
  </live-room-play>
</view>
</view>

播放组件相关属性说明

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

在组件区域叠放额外展示信息

组件提供了一个<slot>节点，用于承载组件引用时提供的子节点。本功能受限于微信，只能在组件上叠加cover-image、cover-view和canvas。

组件实例化

live-room 组件支持播放、停止播放、全屏等接口，要调用这些接口需要先获取到 live-room-play 的实例。

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


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

live-room-play 组件提供如下接口：

最佳实践



avatar
文章
阅读
粉丝