虎牙开放平台文档

弹幕

本章节介绍虎牙小程序的弹幕模块，方便进行与弹幕相关的处理。

开发者可以使用小程序基础库中的hyExt.context中的以下方法做相关的弹幕管理：

引导当前用户发送弹幕（hyExt.context.leadBarrage）
监听弹幕消息（hyExt.context.onBarrageChange）
取消监听弹幕消息（hyExt.context.offBarrageChange）

注意：以上SDK在不同终端的是使用权限并不完全相同，具体适用终端可查看对应的SDK说明。

为了更好地理解相关的弹幕功能，下面我们将会创建一个示例小程序来体验弹幕的基本使用。

准备工作

参考创建小程序项目，初始化一个小程序项目，其中小程序类型选择：

虎牙直播主站-面板
虎牙直播APP-面板
虎牙助手APP-面板
PC主播端-面板
PC观众端-面板

参考创建小程序，创建一个小程序和创建一个开发版本。

新增示例组件

新增src/components/demo.js和src/components/demo.hycss文件

新增src/components/demo.js文件

import { UI } from '@hyext/hy-ui'
import React, { useState } from 'react'
import './demo1.hycss'
const { View, Text, Button } = UI

export const DemoFirst = () => {
  let [result, setResult] = useState('');

  //引导当前用户发送弹幕
  function handleLeadBarrage() {
    hyExt.context.leadBarrage().then(() => {
      /** 引导成功 */
      setResult('leadBarrage引导成功')
    }).catch(err => {
      /** 引导失败 */
      setResult('leadBarrage引导失败' + err)
    })
  }

  //监听弹幕消息
  function handleOnBarrageChange() {
    var middle = '';
    hyExt.context.onBarrageChange({}, ({
      sendNick,
      senderAvatarUrl,
      senderGender,
      nobleLevel,
      fansLevel,
      content,
      unionId
    }) => {
      /** 监听弹幕回调消息 */
      middle = '' + sendNick + ' ' + senderAvatarUrl + ' ' + senderGender + ' ' + nobleLevel + ' ' + fansLevel + ' ' + content + ' ' + unionId;
      setResult('onBarrageChange调用成功' + middle)
    }).then(() => {
      /** 调用成功 */
      setResult('onBarrageChange调用成功' + middle)
    }).catch(err => {
      /** 调用失败 */
      setResult('onBarrageChange调用失败' + err)
    })
  }

  //取消监听弹幕消息
  function handleOffBarrageChange() {
    hyExt.context.offBarrageChange().then(() => {
      /** 取消监听成功 */
      setResult("offBarrageChange取消监听成功")
    }).catch(err => {
      /** 取消监听失败 */
      setResult('offBarrageChange取消监听失败 ' + err)
    })
  }

  return (
    <View className="container">
      <Button type='success' onPress={handleLeadBarrage}>leadBarrage引导当前用户发送弹幕</Button>
      <Button type='primary' onPress={handleOnBarrageChange}>onBarrageChange监听弹幕消息</Button>
      <Button type='info' onPress={handleOffBarrageChange}>offBarrageChange取消监听弹幕消息</Button>
      <View style={{ width: 300}}>
        <Text >{result}</Text>
      </View>
    </View>
  )

}

新增src/components/demo.hycss文件

.container {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

在小程序中使用组件

修改viewer/app.js：

--- a/viewer/app.js
+++ b/viewer/app.js
@@ -1,13 +1,13 @@
 import { UI } from '@hyext/hy-ui'
 import React, { Component } from 'react'
 import './app.hycss'
-
-const { View, Text } = UI
+import { DemoFirst } from '../src/components/demo'
+const { View } = UI

 class App extends Component {
-  render () {
+  render() {
     return (
-      <View className="container"><Text>hello world</Text></View>
+      <View className="container"><DemoFirst></DemoFirst></View>
     )
   }
 }