跳转到内容
we-livesdk

快速开始

本页带你用最少代码起一个 we-livesdk 直播间。完整配置/方法/事件见 产品手册 与 API 参考。

环境要求

Section titled “环境要求”
  • iOS 12+ / Android 7+ / Safari 12+（ES2017）
  • 你需要从后端拿到三个凭证：activityId、token、merchantId

方式一：ESM（打包工具 / 框架内）

Section titled “方式一：ESM（打包工具 / 框架内）”
Terminal window
pnpm add we-livesdk
# 或 npm i we-livesdk
import { LiveSDK } from 'we-livesdk'
import 'we-livesdk/styles'


const sdk = new LiveSDK({
  activityId: 'your-activity-id',
  token: 'your-token',
  merchantId: 'your-merchant-id',
})


await sdk.mount('#live-container')


sdk.on('ready', () => console.log('直播间就绪'))
sdk.on('chat.message', msg => console.log('新消息:', msg.content))
<div id="live-container" style="width:100%;height:100%"></div>

方式二：UMD（裸 HTML / 老浏览器）

Section titled “方式二：UMD（裸 HTML / 老浏览器）”
<link rel="stylesheet" href="we-livesdk/styles.css">
<script src="we-livesdk/dist-umd/livesdk.umd.js"></script>


<div id="live-container"></div>
<script>
  var sdk = new LiveSDK.LiveSDK({
    activityId: 'xxx', token: 'xxx', merchantId: 'xxx',
  })
  sdk.mount('#live-container')
</script>

常用事件

Section titled “常用事件”
sdk.on('auth.error', e => console.error('认证失败', e.message))
sdk.on('player.error', e => console.error('播放错误', e))
sdk.on('goods.buy', ({ numIid }) => router.push(`/order?itemId=${numIid}`))
sdk.on('room.viewerCount', ({ count }) => updateBadge(count))

销毁

Section titled “销毁”
sdk.destroy() // 卸载 UI、断开 WS/IM、清理定时器

下一步

Section titled “下一步”